NeVibeCode · collection · 30

Claude Code design skills

Ordered by install count from the source, then by repository stars on GitHub. Only cards with a checked description are included.

1

grill-me

grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts.

skill · Matt Pocock · MIT

1,424,476installs
2

hyperframes

Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI.

skill · heygen-com · Apache-2.0

1,200,000installs
3

hyperframes-cli

Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes.

skill · heygen-com · Apache-2.0

1,200,000installs
4

media-use

Finds or generates media for HyperFrames videos, including voiceovers, music, cutouts, and color grades. Stores files locally in assets.

skill · heygen-com · Apache-2.0

1,100,000installs
5

frontend-design official

This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough.

skill · anthropics · Apache-2.0

1,025,790installs
6

hyperframes-registry

Finds and installs about 450 ready-made HyperFrames blocks and components as editable source code. Useful when adding video effects and titles without building markup from scratch.

skill · heygen-com · Apache-2.0

1,000,000installs
7

design-mobile-apps

Designs mobile screens via the Sleek REST API and translates them into React Native or HTML code.

skill · designed-by-ai · MIT

1,000,000installs
8

prototype

Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase.

skill · Matt Pocock · MIT

986,201installs
9

grilling

Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting.

skill · Matt Pocock · MIT

979,543installs
10

codebase-design

This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write.

skill · Matt Pocock · MIT

850,344installs
11

design-taste-frontend

This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished.

skill · Leonxlnx · MIT

673,100installs
12

slideshow

Build live HyperFrames decks with slides, fragment reveals, branching hotspots, and presenter notes. Use it when the output should be a presentation rather than a video.

skill · heygen-com · Apache-2.0

415,500installs
13

ui-ux-pro-max

Equips coding agents with a local catalog of 119 UX guidelines, 74 font pairings, and 192 product palettes. Useful when designing components or tuning accessibility.

skill · nextlevelbuilder · MIT

413,800installs
14

brainstorming

This skill clarifies a task before implementation by asking questions, checking context, and comparing approaches. Use it for new features and other creative work.

skill · Jesse Vincent · MIT

404,045installs
15

emil-design-eng

This skill guides UI polish, component details, and animation choices. Use it when an interface works but its states and transitions need closer review.

skill · emilkowalski · MIT

385,500installs
16

impeccable

A skill for your coding agent that designs and reworks interfaces: landing pages, dashboards, forms, iOS and Android screens. Useful when the UI needs real design decisions, not guesswork.

skill · pbakaus · Apache-2.0

359,200installs
17

figma

Imports assets, brand tokens and components from Figma into a HyperFrames project, then turns storyboard frames into motion. Useful when a design has to move, not sit still.

skill · heygen-com · Apache-2.0

329,500installs
18

review-animations

Reviews UI animation and motion code against Emil Kowalski's design standards. Flags slow easings, non-GPU properties, and unnecessary transitions.

skill · emilkowalski · MIT

254,100installs
19

apple-design

Translates Apple's fluid interface principles from WWDC talks into web code with Pointer Events and spring physics. Essential for gesture-driven sheets, drags, and sliders.

skill · emilkowalski · MIT

242,100installs
20

animation-vocabulary

This skill maps a vague web animation description to the right term. Use it when you need wording for an AI prompt or a designer.

skill · emilkowalski · MIT

236,900installs
21

improve-animations

Surveys motion and animation code across your project, then generates self-contained fix plans. It spots janky keyframes and poor easing without altering source files.

skill · emilkowalski · MIT

222,000installs
22

remotion-create

This skill creates a new Remotion project and prepares a video composition. Use it when an agent needs to build video with React markup.

skill · remotion-dev

208,800installs
23

find-animation-opportunities

Scans a codebase or UI for motion that would clarify states and interactions, while rejecting decoration that gets in the way. It is read-only.

skill · emilkowalski · MIT

206,800installs
24

remotion-markup

A skill that tells your agent how to write Remotion React markup: frame-driven animation, media components, effects. Useful when you build video in code.

skill · remotion-dev

202,600installs
25

pick-ui-library

A skill that maps a frontend task to one library from Emil Kowalski's curated list: toasts, charts, OTP fields, virtualization, drag and drop. Runs only when you call it.

skill · emilkowalski · MIT

183,400installs
26

prototype

The skill builds several genuinely different versions of one piece of UI and puts them behind a visual picker, so you flip through them live and keep the one that feels right.

skill · emilkowalski · MIT

172,400installs
27

remotion-studio

This skill starts Remotion Studio and opens a video preview. Use it to inspect a composition and follow changes while working on a video.

skill · remotion-dev

172,100installs
28

animate

Builds UI animations from scratch following Emil Kowalski's motion philosophy. Use it when adding motion, transitions, or component interactions.

skill · emilkowalski · MIT

170,400installs
29

vercel-react-view-transitions

This skill guides React View Transition API work for route changes, shared elements, component enter and exit, and list reordering. It fits UI state changes without a third-party animation library.

skill · vercel · MIT

166,700installs
30

ask-sonner

A guide skill for Sonner, the React toast library: mount the Toaster, pick the right toast() call, style it, fix what breaks.

skill · emilkowalski · MIT

138,600installs

Claude Code design skills

frontend-design official

Other collections