# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 45 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=45 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [problem-diagnosis](https://affpapa.org/en/nevibecode/skills/problem-diagnosis.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 490 installs — Turns a vague “this motion feels off” into a named broken principle and a fix list. - [ui-designer](https://affpapa.org/en/nevibecode/skills/ui-designer.md) — skill · daniel-dan-conrad · Claude Code, Codex, Cursor +3 · 3600 installs — A skill that picks a deliberate visual direction before writing code, then builds the interface around typography, color, motion and composition. - [shadcn](https://affpapa.org/en/nevibecode/skills/pymodel-shadcn.md) — skill · PyModel · Claude Code, Codex, Cursor +3 · 458 installs — A skill that hands your agent a rulebook for shadcn/ui: component architecture, accessibility, theming, forms and tables. - [arrange](https://affpapa.org/en/nevibecode/skills/arrange.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 577 installs — A skill that fixes weak spatial composition: arbitrary spacing, crowded groups, monotonous card grids. - [universal-industry](https://affpapa.org/en/nevibecode/skills/universal-industry.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — A skill that turns Disney's 12 animation principles into UI defaults for timing, easing and motion rules when no industry guide applies. - [friendliness-approachability](https://affpapa.org/en/nevibecode/skills/friendliness-approachability.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — Guides interface motion to feel warm, gentle, and welcoming. - [medium-300-500ms](https://affpapa.org/en/nevibecode/skills/medium-300-500ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — A skill that tells your coding agent how to build mid-duration animations: page transitions, modals, staggered reveals. - [large-500-800ms](https://affpapa.org/en/nevibecode/skills/large-500-800ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — A skill that tells your coding agent how to build 500–800ms animations: hero transitions, complex reveals, moments that deserve the user's attention. - [spritecook-build-ui-kits](https://affpapa.org/en/nevibecode/skills/spritecook-build-ui-kits.md) — skill · SpriteCook · Claude Code, Codex, Cursor +3 · 342 installs — Builds a game UI kit through the SpriteCook MCP server: concept, component sheets, extraction, finalization. - [motion-sickness](https://affpapa.org/en/nevibecode/skills/motion-sickness.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 486 installs — Finds the animations that make users dizzy or queasy — parallax, zoom, rotation — and swaps them for safer motion. - [universal-elements](https://affpapa.org/en/nevibecode/skills/universal-elements.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — Applies 12 classic animation principles to any interface component. - [small-200-300ms](https://affpapa.org/en/nevibecode/skills/small-200-300ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — A skill that tells the agent how to build 200–300ms transitions: modal appearances, card expansions, navigation slides. - [trust-reliability](https://affpapa.org/en/nevibecode/skills/trust-reliability.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — A skill for animations that make interfaces feel dependable: predictable motion, steady timing, no surprises. - [deliberate-1200-2000ms](https://affpapa.org/en/nevibecode/skills/deliberate-1200-2000ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — Guidelines for intentional animations lasting between 1200-2000ms. - [product-manager](https://affpapa.org/en/nevibecode/skills/dylantarre-product-manager.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — Helps a PM decide which animations are worth building and which can wait, using business value instead of taste. - [universal-tool](https://affpapa.org/en/nevibecode/skills/universal-tool.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 484 installs — A skill that feeds your agent Disney's 12 animation principles for any animation tool or framework. - [universal-practitioner](https://affpapa.org/en/nevibecode/skills/universal-practitioner.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 482 installs — A skill that maps Disney's 12 animation principles onto interfaces, writing and product work, not just cartoons. - [universal-solutions](https://affpapa.org/en/nevibecode/skills/universal-solutions.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 482 installs — Diagnoses interface animation flaws using the twelve Disney principles and suggests precise fixes for easing, timing, and rendering. - [universal-fallback](https://affpapa.org/en/nevibecode/skills/universal-fallback.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 481 installs — Universal animation guidance based on Disney's 12 principles for any medium. - [accessibility-issues](https://affpapa.org/en/nevibecode/skills/accessibility-issues.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 481 installs — Audits motion that hurts users with vestibular disorders, cognitive overload or screen reader needs, then names the fix for each case. - [ux-friction](https://affpapa.org/en/nevibecode/skills/ux-friction.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 481 installs — A skill that diagnoses animations which make users wait, get confused or abandon a task. - [instant-0-100ms](https://affpapa.org/en/nevibecode/skills/instant-0-100ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 480 installs — This skill provides rules for UI animations under 100ms. - [adapt](https://affpapa.org/en/nevibecode/skills/adapt.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 557 installs — Adapts web layouts for mobile viewports, tablets, wide screens, print, and HTML emails while preserving hierarchy and touch targets. - [typeset](https://affpapa.org/en/nevibecode/skills/typeset.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 557 installs — Audits fonts, type scale and text hierarchy in a UI, then rebuilds them as a system. - [data-viz](https://affpapa.org/en/nevibecode/skills/data-viz.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 568 installs — A skill for designing charts, dashboards and data tables. - [media-publishing](https://affpapa.org/en/nevibecode/skills/media-publishing.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 477 installs — Guides UI motion design for news websites, digital magazines, and reader apps based on Disney's 12 animation principles. - [slow-800-1200ms](https://affpapa.org/en/nevibecode/skills/slow-800-1200ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 477 installs — A coding-agent skill for building deliberately slow animation in the 800–1200ms range: dramatic reveals, loading sequences, moments where the user should stop and watch. - [forms](https://affpapa.org/en/nevibecode/skills/forms.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 555 installs — Guides form interface design and multi-step input flows. - [universal-timing](https://affpapa.org/en/nevibecode/skills/universal-timing.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 476 installs — A skill about animation timing: rules that hold at 50ms and at 5000ms. - [universal-mindset](https://affpapa.org/en/nevibecode/skills/universal-mindset.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 475 installs — This skill frames animation work around story, motion, rhythm, and viewer focus. - [empty-state](https://affpapa.org/en/nevibecode/skills/empty-state.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 552 installs — A skill for designing empty states: zero data, no search results, permission walls and load errors. - [a11y](https://affpapa.org/en/nevibecode/skills/a11y.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 561 installs — Walks the interface through keyboard, screen reader, contrast and semantics checks, then fixes what it finds. - [colorize](https://affpapa.org/en/nevibecode/skills/aladicf-colorize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 551 installs — A coding-agent skill that brings color into interfaces that read as flat gray: semantic states, accents, and color-based hierarchy. - [normalize](https://affpapa.org/en/nevibecode/skills/normalize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 546 installs — Audits UI components and realigns them with project design tokens, spacing rules, and system patterns. - [awesome-design-md-jp](https://affpapa.org/en/nevibecode/skills/awesome-design-md-jp.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 668 installs — Provides Japanese UI specifications in DESIGN.md format for AI agents. - [wireframing](https://affpapa.org/en/nevibecode/skills/wireframing.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 566 installs — A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design. - [accessibility-inclusive-design](https://affpapa.org/en/nevibecode/skills/accessibility-inclusive-design.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 574 installs — A skill that pushes your coding agent to design and critique interfaces for keyboard use, screen readers, contrast and semantics. - [k2f-idml](https://affpapa.org/en/nevibecode/skills/k2f-idml.md) — skill · suzheng · Claude Code, Codex, Cursor +3 · 2500 installs — Turns a brief into a blueprint for brochures, catalogs or annual reports, then exports it as an IDML package a designer can open in InDesign. - [harden](https://affpapa.org/en/nevibecode/skills/aladicf-harden.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 539 installs — Runs your interface through edge cases: long text, network errors, RTL, empty states. - [distill](https://affpapa.org/en/nevibecode/skills/aladicf-distill.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 548 installs — A skill that removes extra controls, options and features from a screen so the main task stands out. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=46 ## Refine [ui](https://affpapa.org/en/nevibecode/tag/ui.md) · [animation](https://affpapa.org/en/nevibecode/tag/animation.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [design-system](https://affpapa.org/en/nevibecode/tag/design-system.md) · [accessibility](https://affpapa.org/en/nevibecode/tag/accessibility.md) · [react](https://affpapa.org/en/nevibecode/tag/react.md) · [ux](https://affpapa.org/en/nevibecode/tag/ux.md) · [image-generation](https://affpapa.org/en/nevibecode/tag/image-generation.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [typography](https://affpapa.org/en/nevibecode/tag/typography.md) · [html](https://affpapa.org/en/nevibecode/tag/html.md) · [design-tokens](https://affpapa.org/en/nevibecode/tag/design-tokens.md) ## Narrow this list Parameters: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md --- NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md