NeVibeCode · 297 items
Design: skills, plugins, subagents, slash commands and mcp servers
Design for Claude Code, Codex and Cursor: skills, plugins, subagents, slash commands and mcp servers, from popular to niche.
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.
Claude Code Claude.ai
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.
Claude Code
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.
Claude Code CX Codex Cursor +1
673,100installs
prototype skill Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase.
Claude Code
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.
Claude Code
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.
Claude Code
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.
Claude Code CX Codex
404,045installs
hyperframes skill Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI.
Claude Code CX Codex Cursor +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.
Claude Code CX Codex Cursor +1
1,200,000installs
media-use skill Finds or generates media for HyperFrames videos, including voiceovers, music, cutouts, and color grades. Stores files locally in assets.
Claude Code CX Codex Cursor +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.
Claude Code CX Codex Cursor +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.
Claude Code CX Codex Cursor +1
413,800installs
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.
Claude Code CX Codex Cursor +1
359,200installs
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.
Claude Code Claude.ai
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.
Claude Code Claude.ai
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.
Claude Code Claude.ai
109,043installs
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.
Claude Code Claude.ai
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.
Claude Code Claude.ai
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.
Claude Code Claude.ai
75,256installs
shadcn skill This skill helps add and configure shadcn/ui components while following project conventions. Use it when building interfaces, applying presets, or working on chat UI.
Claude Code CX Codex Cursor +1
122,100installs
slideshow skill 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.
Claude Code CX Codex Cursor +1
415,500installs
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.
Claude Code CX Codex Cursor +1
329,500installs
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.
Claude Code CX Codex Cursor +1
385,500installs
review-animations skill Reviews UI animation and motion code against Emil Kowalski's design standards. Flags slow easings, non-GPU properties, and unnecessary transitions.
Claude Code CX Codex Cursor +1
254,100installs
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.
Claude Code CX Codex Cursor +1
242,100installs
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.
Claude Code CX Codex Cursor +1
236,900installs
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.
Claude Code CX Codex Cursor +1
222,000installs
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.
Claude Code CX Codex Cursor +1
206,800installs
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.
Claude Code CX Codex Cursor +1
183,400installs
vercel-react-view-transitions skill 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.
Claude Code CX Codex Cursor +1
166,700installs
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.
Claude Code CX Codex Cursor +1
172,400installs
animate skill Builds UI animations from scratch following Emil Kowalski's motion philosophy. Use it when adding motion, transitions, or component interactions.
Claude Code CX Codex Cursor +1
170,400installs
hallmark skill Enforces strict frontend design constraints to stop coding assistants from producing generic, AI-looking web pages.
Claude Code CX Codex Cursor +1
69,100installs
ask-sonner skill A guide skill for Sonner, the React toast library: mount the Toaster, pick the right toast() call, style it, fix what breaks.
Claude Code CX Codex Cursor +1
138,600installs
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.
Claude Code CX Codex Cursor +1
42,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.
Claude Code CX Codex Cursor +1
135,900installs
design skill Generates logos, brand identity assets, design tokens, Chart.js HTML slides, and multi-platform banners using Python scripts and AI providers.
Claude Code CX Codex Cursor +1
40,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.
Claude Code CX Codex Cursor +1
40,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.
Claude Code CX Codex Cursor +1
39,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.
Claude Code CX Codex Cursor +1
39,000installs
1–40 of 297
Design skills teach the agent the visual side of the job: typography, spacing, motion, brand rules, SVG and Figma layouts. The official anthropics/skills repository includes frontend-design and brand-guidelines, for example. A good skill in this topic contains actual numbers (a type scale, animation durations, a palette) instead of vague requests to make things look nice. If a skill works from mockups, check whether it also needs an MCP server to reach Figma.
