# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 43 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=43 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [fintech-banking](https://affpapa.org/en/nevibecode/skills/fintech-banking.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 535 installs — Guides animation design for banking apps, payment systems, and financial dashboards. - [gaming-entertainment](https://affpapa.org/en/nevibecode/skills/gaming-entertainment.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 535 installs — A skill for animation in gaming apps, streaming platforms and interactive media: it maps Disney's 12 principles onto concrete UI elements. - [accessibility-advocate](https://affpapa.org/en/nevibecode/skills/accessibility-advocate.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 533 installs — This skill guides developers in designing inclusive web animations that prevent vestibular discomfort and meet WCAG standards. - [frontend-ui-ux-design](https://affpapa.org/en/nevibecode/skills/frontend-ui-ux-design.md) — skill · DauQuangThanh · Claude Code, Codex, Cursor +3 · 536 installs — Guides coding agents through end-to-end interface design, atomic component structuring, mobile-first responsive grids, and WCAG accessibility audits. - [modals-dialogs](https://affpapa.org/en/nevibecode/skills/modals-dialogs.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 528 installs — Guides AI coding agents on animating dialogs, modals, and popovers using Disney's animation principles. - [ux-researcher](https://affpapa.org/en/nevibecode/skills/ux-researcher.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 527 installs — Turns your agent into a UX researcher who plans motion studies on perception, errors and task completion. - [entrance-animations](https://affpapa.org/en/nevibecode/skills/entrance-animations.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 527 installs — Teaches coding agents to apply Disney animation principles to UI entrance effects. - [excitement-energy](https://affpapa.org/en/nevibecode/skills/excitement-energy.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 526 installs — Guides AI agents in building high-energy interface animations with punchy timing and springy easing. - [spatial-thinking](https://affpapa.org/en/nevibecode/skills/spatial-thinking.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 526 installs — A skill that makes the AI agent treat every frame as a three-dimensional space: depth, perspective, volume. - [arc-mastery](https://affpapa.org/en/nevibecode/skills/arc-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 525 installs — A skill about arcs in animation: why straight lines read as mechanical and how to build curved paths for UI, characters and games. - [animator-traditional](https://affpapa.org/en/nevibecode/skills/animator-traditional.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 527 installs — Brings Disney's 12 principles of classical animation and frame-by-frame workflow to your AI agent. - [joy-delight](https://affpapa.org/en/nevibecode/skills/joy-delight.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 522 installs — Guides coding agents in designing playful UI animations based on Disney principles. - [design-systems-frontend-architecture](https://affpapa.org/en/nevibecode/skills/design-systems-frontend-architecture.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 635 installs — Turns UI, UX and brand decisions into reusable components, tokens and layout rules your agent can act on. - [animate](https://affpapa.org/en/nevibecode/skills/aladicf-animate.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 607 installs — Adds movement to an interface: transitions, micro-interactions, gestures, hover states. - [micro-100-200ms](https://affpapa.org/en/nevibecode/skills/micro-100-200ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 521 installs — A skill for micro-interactions in the 100–200ms range: tooltips, dropdown opens, small feedback. - [calm-relaxation](https://affpapa.org/en/nevibecode/skills/calm-relaxation.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 521 installs — A skill for AI coding that sets rules for gentle, quiet motion: long timings, soft easing curves, no sudden jumps. - [squash-stretch-mastery](https://affpapa.org/en/nevibecode/skills/squash-stretch-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 522 installs — Guides AI agents on squash and stretch physics: handles UI bounces and impact deformation while preserving object volume. - [staging-mastery](https://affpapa.org/en/nevibecode/skills/staging-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 520 installs — Design guideline for visual clarity and motion hierarchy. - [slow-in-out-mastery](https://affpapa.org/en/nevibecode/skills/slow-in-out-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 520 installs — A skill that tells your coding agent which acceleration and deceleration curve to use in UI, character or game animation. - [brand-consistency](https://affpapa.org/en/nevibecode/skills/brand-consistency.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 520 installs — A skill that diagnoses animation which feels off-brand and points to the fixes: timing, easing curves, level of exaggeration. - [setup](https://affpapa.org/en/nevibecode/skills/aladicf-setup.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 605 installs — Scans project files and asks UX questions to capture audience, brand personality, and UI defaults into .better-web-ui.md. - [attention-grabbers](https://affpapa.org/en/nevibecode/skills/attention-grabbers.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 519 installs — A skill that tells your coding agent how to build badge pulses, error shakes and feature highlights using Disney's animation principles. - [appeal-mastery](https://affpapa.org/en/nevibecode/skills/appeal-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 519 installs — A skill about appeal — the quality that makes an audience want to keep watching. - [anticipation-payoff](https://affpapa.org/en/nevibecode/skills/anticipation-payoff.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 519 installs — Teaches AI agents to structure animation sequences using setup and delivery. - [ui-ux-pro-max](https://affpapa.org/en/nevibecode/skills/pixel-process-ug-ui-ux-pro-max.md) — skill · Pixel-Process-UG · Claude Code, Codex, Cursor +3 · 1200 installs — Guides interface styling, font pairings, semantic palettes, and UX rules while prioritizing WCAG accessibility and performance budgets. - [performance-optimization](https://affpapa.org/en/nevibecode/skills/dylantarre-performance-optimization.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 516 installs — Diagnoses and resolves janky UI animations and frame drops using core animation principles. - [react-spring](https://affpapa.org/en/nevibecode/skills/react-spring.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 516 installs — A skill that maps all 12 Disney animation principles onto React Spring's spring physics, with a working example for each one. - [anticipation-mastery](https://affpapa.org/en/nevibecode/skills/anticipation-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 516 installs — A skill that teaches the anticipation principle and helps the agent add preparatory movement so animation stops feeling abrupt. - [enterprise-b2b](https://affpapa.org/en/nevibecode/skills/enterprise-b2b.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 515 installs — Provides animation rules for B2B platforms and admin dashboards. - [follow-through-overlapping](https://affpapa.org/en/nevibecode/skills/follow-through-overlapping.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 514 installs — Teaches your coding agent how to handle momentum, drag, and staggered settling. - [expo-liquid-glass](https://affpapa.org/en/nevibecode/skills/expo-liquid-glass.md) — skill · devanshuDesai · Claude Code, Codex, Cursor +3 · 478 installs — Walks your agent through building glass UI in Expo React Native: four implementation paths, accessibility checks, Android fallbacks. - [cards-containers](https://affpapa.org/en/nevibecode/skills/cards-containers.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 513 installs — Applies Disney's animation principles to cards, tiles, and UI containers. - [hierarchy](https://affpapa.org/en/nevibecode/skills/hierarchy.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 606 installs — A skill that reads an interface for visual hierarchy: where the primary action gets lost, what competes for attention, and which labels get in the way. - [universal-emotion](https://affpapa.org/en/nevibecode/skills/universal-emotion.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 511 installs — Turns a target emotion into animation parameters: timing, easing, deformation. - [designing-frontend-interfaces](https://affpapa.org/en/nevibecode/skills/designing-frontend-interfaces.md) — skill · osmontero · Claude Code, Codex, Cursor +3 · 642 installs — The skill makes the agent write a design brief and lock a token block before touching component code. - [timing-principle-mastery](https://affpapa.org/en/nevibecode/skills/timing-principle-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 510 installs — Provides duration systems and pacing rules for interface transitions and character movement. - [forms-inputs](https://affpapa.org/en/nevibecode/skills/forms-inputs.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 509 installs — A skill that tells your agent how to animate inputs, textareas and selects: timings, field states and CSS for clear feedback. - [loaders-spinners](https://affpapa.org/en/nevibecode/skills/loaders-spinners.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 508 installs — Guides your agent to build spinners, progress bars, and skeleton screens using Disney's 12 principles of animation. - [orchestrated-sequences](https://affpapa.org/en/nevibecode/skills/orchestrated-sequences.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 508 installs — A skill for multi-part animation: it tells you how to set delays, easing curves and element roles so a reveal reads as one composed moment. - [promo-video](https://affpapa.org/en/nevibecode/skills/iart-ai-promo-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 693 installs — Generates snappy 6–15s sale promo videos in Remotion with animated strike-through pricing and promo codes. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=44 ## 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