# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 42 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=42 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [elegance-sophistication](https://affpapa.org/en/nevibecode/skills/elegance-sophistication.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 585 installs — Prompting rules for AI agents to craft restrained, luxury-focused UI motion. - [data-visualization](https://affpapa.org/en/nevibecode/skills/dylantarre-data-visualization.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 583 installs — Applies Disney's 12 animation principles to charts, dashboards, and data transitions. - [creative-director](https://affpapa.org/en/nevibecode/skills/dylantarre-creative-director.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 581 installs — Directs project animation vision and standards using Disney's 12 principles of motion. - [ui-visual-composition](https://affpapa.org/en/nevibecode/skills/ui-visual-composition.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 707 installs — Teaches AI coding agents to critique and construct visual UI layouts. - [character-appeal](https://affpapa.org/en/nevibecode/skills/character-appeal.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 580 installs — Applies animation principles to craft distinct character traits and movement styles. - [transition-sequences](https://affpapa.org/en/nevibecode/skills/transition-sequences.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 575 installs — A skill for multi-step animation: page transitions, onboarding flows, wizard steps. - [carousels-sliders](https://affpapa.org/en/nevibecode/skills/carousels-sliders.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 575 installs — Applies traditional animation principles to carousels, sliders, and image galleries to build fluid horizontal navigation. - [app-store-screenshots-generator](https://affpapa.org/en/nevibecode/skills/app-store-screenshots-generator.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 818 installs — Builds ad-style iOS app screenshots in Next.js and exports PNG files for App Store device sizes. - [tailwindcss-fundamentals-v4](https://affpapa.org/en/nevibecode/skills/tailwindcss-fundamentals-v4.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 389 installs — A skill covering Tailwind CSS v4: install steps, CSS-first config with @theme, v3-to-v4 migration and the new utilities. - [frontend-design](https://affpapa.org/en/nevibecode/skills/aladicf-frontend-design.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 675 installs — Walks the agent through a decision order: task and hierarchy first, systems next, colour and decoration last. - [education-learning](https://affpapa.org/en/nevibecode/skills/education-learning.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 570 installs — A skill for animation work in e-learning and tutoring apps: it sets timings, answer feedback and progress cues. - [physics-intuition](https://affpapa.org/en/nevibecode/skills/physics-intuition.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 571 installs — An animation skill that makes agent-generated motion feel weighted: falls, jumps, collisions and inertia. - [travel-hospitality](https://affpapa.org/en/nevibecode/skills/travel-hospitality.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 568 installs — Guides AI coding agents on animation rules and timing standards for travel booking platforms and hospitality apps. - [dramatic-2000ms-plus](https://affpapa.org/en/nevibecode/skills/dramatic-2000ms-plus.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 566 installs — A skill for animation sequences over 2000ms: cinematic intros, story sequences, premium onboarding. - [open-pencil-design-editor](https://affpapa.org/en/nevibecode/skills/open-pencil-design-editor.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 810 installs — Teaches your coding agent to inspect, modify, and export local .fig design files using OpenPencil CLI commands or an MCP server. - [photo-editor](https://affpapa.org/en/nevibecode/skills/photo-editor.md) — skill · mpstats · Claude Code, Codex, Cursor +3 · 638 installs — This skill sends product-image jobs to the MPSTATS Photo Editor API. - [loading-states](https://affpapa.org/en/nevibecode/skills/dylantarre-loading-states.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 565 installs — A skill for loading indicators: spinners, progress bars, skeletons and shimmer. - [rive-animations](https://affpapa.org/en/nevibecode/skills/rive-animations.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 564 installs — A skill that walks your agent through building Rive animations on Disney's 12 principles: state machines, inputs, timing, React hooks. - [notifications-toasts](https://affpapa.org/en/nevibecode/skills/notifications-toasts.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 561 installs — Guides AI assistants on animating toasts and system alerts using classic animation principles. - [tailwindcss](https://affpapa.org/en/nevibecode/skills/martinholovsky-tailwindcss.md) — skill · martinholovsky · Claude Code, Codex, Cursor +3 · 498 installs — A skill that teaches AI agents to style the JARVIS assistant UI with Tailwind utility classes: dark HUD theme, responsive grids, animations, and tests before implementation. - [recoup-music-video](https://affpapa.org/en/nevibecode/skills/recoup-music-video.md) — skill · recoupable · Claude Code, Codex, Cursor +3 · 1200 installs — Builds a narrative music video from an approved track through a reviewed edit. - [frontend-developer](https://affpapa.org/en/nevibecode/skills/dylantarre-frontend-developer.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 558 installs — Translates Disney's 12 animation principles into code for UI transitions and micro-interactions. - [navigation-menus](https://affpapa.org/en/nevibecode/skills/navigation-menus.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 557 installs — A skill for animating navbars, dropdowns and sidebars: timings, easing curves and transition states built on Disney's principles. - [gantt-chart-visualization](https://affpapa.org/en/nevibecode/skills/gantt-chart-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 9 installs — Designs Gantt charts, audits schedule models, and selects frontend visualization stacks. - [timing-mastery](https://affpapa.org/en/nevibecode/skills/timing-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 554 installs — Sets pacing and frame counts for character or UI motion. - [buttons-ctas](https://affpapa.org/en/nevibecode/skills/buttons-ctas.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 552 installs — A skill that tells your coding agent how to animate buttons and CTAs: states, timings, CSS transitions. - [figma-prototyping](https://affpapa.org/en/nevibecode/skills/figma-prototyping.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 550 installs — A skill that walks your agent through building Figma prototypes with Disney's 12 animation principles, Smart Animate and component variants. - [brand-marketing](https://affpapa.org/en/nevibecode/skills/brand-marketing.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 545 installs — Applies Disney's 12 animation principles to brand identities, commercial ads, and logo reveals. - [motion-one](https://affpapa.org/en/nevibecode/skills/motion-one.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 544 installs — A skill that walks through Disney's 12 animation principles as Motion One code — squash and stretch, anticipation, stagger, scroll effects. - [image-generation](https://affpapa.org/en/nevibecode/skills/zc277584121-image-generation.md) — skill · zc277584121 · Claude Code, Codex, Cursor +3 · 4000 installs — This skill creates illustrations, diagrams, and other visuals for articles and docs. - [attention-direction](https://affpapa.org/en/nevibecode/skills/attention-direction.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 540 installs — Guides viewer focus across animation frames and UI scenes using classic motion principles. - [material-3-expressive](https://affpapa.org/en/nevibecode/skills/material-3-expressive.md) — skill · Albermonte · Claude Code, Codex, Cursor +3 · 502 installs — A skill for designing and reviewing Android UI with Material 3 Expressive: picks component tokens, sets hierarchy, motion, color and shape. - [polish](https://affpapa.org/en/nevibecode/skills/polish.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 637 installs — A skill for the last pass over a UI: alignment, spacing, states, consistent copy. - [solid-drawing-mastery](https://affpapa.org/en/nevibecode/skills/solid-drawing-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 538 installs — A skill for anyone animating UI or characters who wants objects to read as solid forms in space instead of flat shapes sliding around. - [search](https://affpapa.org/en/nevibecode/skills/aladicf-search.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 626 installs — Walks an agent through designing site search: autocomplete, filters, result lists and recovery from zero results. - [add-ui](https://affpapa.org/en/nevibecode/skills/add-ui.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 636 installs — Generates five distinct UI directions for a new or existing section, then walks you through comparing them and applying the one you pick. - [icons-badges](https://affpapa.org/en/nevibecode/skills/icons-badges.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 537 installs — A skill for animating icons, badges, avatars and status indicators. - [naturalistic-motion](https://affpapa.org/en/nevibecode/skills/naturalistic-motion.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 537 installs — Animation guidelines for organic creatures and natural elements. - [audit](https://affpapa.org/en/nevibecode/skills/aladicf-audit.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 625 installs — Runs code-level checks on accessibility, performance, theming, responsive design and anti-patterns. - [gesture-responses](https://affpapa.org/en/nevibecode/skills/gesture-responses.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 535 installs — A skill for animating tap, swipe and drag responses: it sets timings, easing curves and code patterns for CSS and JS. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=43 ## 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