NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
frontend-design
official skill This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough.
1,025,790installs
grill-me skill grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts.
1,424,476installs
design-taste-frontend skill 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.
CX Codex +1
678,700installs
prototype skill Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase.
986,201installs
grilling skill Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting.
979,543installs
codebase-design skill 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.
850,344installs
brainstorming skill This skill clarifies a task before implementation by asking questions, checking context, and comparing approaches. Use it for new features and other creative work.
CX Codex
404,045installs
hyperframes skill Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI.
CX Codex +1
1,200,000installs
hyperframes-cli skill Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes.
CX Codex +1
1,300,000installs
media-use skill Finds or generates media for HyperFrames videos, including voiceovers, music, cutouts, and color grades. Stores files locally in assets.
CX Codex +1
1,100,000installs
hyperframes-registry skill 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.
CX Codex +1
1,000,000installs
ui-ux-pro-max skill 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.
CX Codex +1
417,000installs
impeccable skill 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.
CX Codex +1
363,400installs
canvas-design
official skill Builds posters and visual art in .png and .pdf by first writing a design philosophy, then expressing it on the canvas.
121,543installs
web-artifacts-builder
official skill This skill builds complex claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui. Use it for interfaces with state or routing.
112,122installs
brand-guidelines
official skill Applies Anthropic's official brand colors and fonts to documents, slides and other artifacts. Useful whenever something needs to match the company look.
109,043installs
archify skill Creates checked diagrams and one-page explainers as standalone HTML. Use it to show a system’s structure, data flow, or database schema.
CX Codex +1
175,500installs
theme-factory
official skill Applies preset color palettes and font pairs to slides, documents, and HTML pages. Use it when an artifact needs one consistent visual style.
94,921installs
algorithmic-art
official skill Creates p5.js generative art with seeded randomness and adjustable parameters. Use it for flow fields, particle systems, and code-based visual experiments.
89,081installs
slack-gif-creator
official skill This skill helps create animated GIFs for Slack and check their parameters. Use it for custom emoji or GIFs shared in messages.
75,256installs
shadcn skill A skill that keeps your agent on the rails with shadcn/ui: adds components, searches registries, fixes markup and builds a design system from your spec.
CX Codex +1
123,300installs
figma skill 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.
CX Codex +1
334,000installs
emil-design-eng skill This skill guides UI polish, component details, and animation choices. Use it when an interface works but its states and transitions need closer review.
CX Codex +1
388,200installs
review-animations skill Reviews UI animation and motion code against Emil Kowalski's design standards. Flags slow easings, non-GPU properties, and unnecessary transitions.
CX Codex +1
256,500installs
apple-design skill 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.
CX Codex +1
244,500installs
animation-vocabulary skill 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.
CX Codex +1
239,000installs
improve-animations skill 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.
CX Codex +1
224,200installs
find-animation-opportunities skill 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.
CX Codex +1
208,900installs
pick-ui-library skill 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.
CX Codex +1
185,400installs
prototype skill 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.
CX Codex +1
174,300installs
animate skill Builds UI animations from scratch following Emil Kowalski's motion philosophy. Use it when adding motion, transitions, or component interactions.
CX Codex +1
172,700installs
hallmark skill A design skill for AI coding that keeps generated UIs from looking generated. Useful when you ask an agent to build a new page or site.
CX Codex +1
70,800installs
ask-sonner skill A skill for the Sonner React toast library: how to mount the Toaster, which toast() call to use, and how to fix toasts that never show up.
CX Codex +1
140,500installs
design-system skill This skill builds design tokens, component specs, and presentation slides. Use it when an interface and its slides need to follow one visual system.
CX Codex +1
43,200installs
animate-expo skill Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices.
CX Codex +1
137,900installs
design skill Generates logos, brand identity assets, design tokens, Chart.js HTML slides, and multi-platform banners using Python scripts and AI providers.
CX Codex +1
41,800installs
ui-styling skill A skill that helps your agent build accessible interfaces with shadcn/ui and Tailwind CSS: components, themes, dark mode, responsive layouts and canvas design.
CX Codex +1
41,200installs
brand skill Keeps brand voice, visual rules and design tokens in one markdown file, then feeds them to your agent's prompts and to your CSS variables.
CX Codex +1
40,500installs
banner-design skill Generates banners for social media, ads, and web hero sections using HTML/CSS. Useful when you need fast visual creative assets directly in your coding agent.
CX Codex +1
40,000installs
slides skill Builds strategic HTML presentations using Chart.js and design tokens. Useful for generating pitch decks and marketing slides directly from the agent.
CX Codex +1
39,300installs
1–40 of 2,133
