Best Design & frontend agent skills, page 2

Imagegen Frontend Web

Leonxlnx/taste-skill

Elite frontend image-direction skill for generating premium, conversion-aware website design references.

Imagegen Frontend Mobile

Leonxlnx/taste-skill

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows.

Design Taste Frontend V1

Leonxlnx/taste-skill

The original v1 taste-skill, preserved for projects depending on its exact behavior.

Computer Use

stablyai/orca

Drives the GUI of a visible local app window through orca computer: accessibility tree, clicks, typing, menus, dialogs, and screenshots in native apps and external browser windows (Chrome, Edge…

Orca Emulator

stablyai/orca

iOS Simulator control from inside Orca, with the live device view in Orca's emulator pane.

Orca Emulator Android

stablyai/orca

Android device and emulator control from inside Orca over adb, with the live device view in Orca's emulator pane.

Understand Figma

Egonex-AI/Understand-Anything

Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.

Impeccable

pbakaus/impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface.

Artifacts Builder

ComposioHQ/awesome-claude-skills

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

Slack Gif Creator

ComposioHQ/awesome-claude-skills

Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives.

Openspec Propose

Fission-AI/OpenSpec

Propose a new OpenSpec change with all artifacts generated in one step.

Hyperframes

heygen-com/hyperframes

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card…

Hyperframes Registry

heygen-com/hyperframes

Search, install, and wire registry blocks and components into HyperFrames compositions.

Media Use

heygen-com/hyperframes

Agent Media OS, the single skill for every media need in a HyperFrames project.

Hyperframes Animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus…

Hyperframes Creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos.

Hyperframes Keyframes

heygen-com/hyperframes

Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS…

General Video

heygen-com/hyperframes

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion.

Remotion To Hyperframes

heygen-com/hyperframes

Port an existing Remotion (React) composition's source to HyperFrames HTML.

Figma

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI)…

Applying Brand Guidelines

anthropics/claude-cookbooks

This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging.

Cirq

K-Dense-AI/scientific-agent-skills

Google quantum computing framework. Use when targeting Google Quantum AI hardware, designing noise-aware circuits, or running quantum characterization experiments.

Experimental Design

K-Dense-AI/scientific-agent-skills

Designs experiments and studies BEFORE data is collected — choosing a design, randomizing, blocking, and laying out treatment combinations so results are interpretable.

3d Web Experience

sickn33/agentic-awesome-skills

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes.

Image Generation

zhayujie/CowAgent

Generate or edit images from text prompts.

Diagram Design

cathrynlavery/diagram-design

Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop)…

Emil Design Eng

emilkowalski/skills

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Review Animations

emilkowalski/skills

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy.

Animation Vocabulary

emilkowalski/skills

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" →…

Apple Design

emilkowalski/skills

Apple's approach to interface design and fluid, physical motion, translated for the web.

Find Animation Opportunities

emilkowalski/skills

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't.

Pick UI Library

emilkowalski/skills

Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more.

Prototype

emilkowalski/skills

Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right.

Animate

emilkowalski/skills

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and…

Ask Sonner

emilkowalski/skills

Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and…

Animate Expo

emilkowalski/skills

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing…

Break UI

emilkowalski/skills

Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme…

Tailwind Design System

wshobson/agents

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.

Next.js App Router Patterns

wshobson/agents

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching.

Python Design Patterns

wshobson/agents

Python design patterns including KISS, Separation of Concerns, Single Responsibility, and composition over inheritance.

React State Management

wshobson/agents

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Build MCP App

anthropics/claude-plugins-official

This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows…

Visual Asset Design

agentscope-ai/QwenPaw

为角色/场景/道具设计视觉资产、编写或修复 VisualVariant 与阵容图的生成 Prompt 时使用。涵盖参考图布局（艺术身份板/序列关键帧/环境研究板/道具研究 板）、构图与镜头语言、图片审核误判规避、实体 continuity 与以主图为参考 的跨 Variant 衍生设计。不用于视频 Prompt 编译（见 professional-media-prompts）、…

Vercel React Best Practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering.

Vercel React Native Skills

vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps.

Vercel React View Transitions

vercel-labs/agent-skills

Guide for implementing smooth, native-feeling animations using React's View Transition API ( component, addTransitionType, and CSS view transition pseudo-elements).

Morph Ppt 3d

iOfficeAI/OfficeCLI

3D Morph PPT — extends morph-ppt with GLB model insertion, cinematographic camera, model-content layout, and enriched visual design system.

Frontend Engineer

nanocoai/nanoclaw

Pro frontend engineering discipline. Enforces build-test-verify workflow for every web project.