NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
problem-diagnosis skill Turns a vague “this motion feels off” into a named broken principle and a fix list.
CX Codex +1
490installs
ui-designer skill A skill that picks a deliberate visual direction before writing code, then builds the interface around typography, color, motion and composition.
CX Codex +1
3,600installs
shadcn skill A skill that hands your agent a rulebook for shadcn/ui: component architecture, accessibility, theming, forms and tables. Useful whenever it writes or edits React UI.
CX Codex +1
458installs
arrange skill A skill that fixes weak spatial composition: arbitrary spacing, crowded groups, monotonous card grids.
CX Codex +1
577installs
universal-industry skill A skill that turns Disney's 12 animation principles into UI defaults for timing, easing and motion rules when no industry guide applies.
CX Codex +1
487installs
friendliness-approachability skill Guides interface motion to feel warm, gentle, and welcoming. Helpful when building onboarding steps, support widgets, or chat assistants.
CX Codex +1
487installs
medium-300-500ms skill A skill that tells your coding agent how to build mid-duration animations: page transitions, modals, staggered reveals.
CX Codex +1
487installs
large-500-800ms skill A skill that tells your coding agent how to build 500–800ms animations: hero transitions, complex reveals, moments that deserve the user's attention.
CX Codex +1
487installs
spritecook-build-ui-kits skill Builds a game UI kit through the SpriteCook MCP server: concept, component sheets, extraction, finalization. For menus, HUDs, inventories and dialogs.
CX Codex +1
342installs
motion-sickness skill Finds the animations that make users dizzy or queasy — parallax, zoom, rotation — and swaps them for safer motion. Useful when complaints about navigation keep coming in.
CX Codex +1
486installs
universal-elements skill Applies 12 classic animation principles to any interface component. It provides timing scales, custom cubic-bezier curves, and interaction guidelines.
CX Codex +1
485installs
small-200-300ms skill A skill that tells the agent how to build 200–300ms transitions: modal appearances, card expansions, navigation slides.
CX Codex +1
485installs
trust-reliability skill A skill for animations that make interfaces feel dependable: predictable motion, steady timing, no surprises. Useful for payments, forms and settings.
CX Codex +1
485installs
deliberate-1200-2000ms skill Guidelines for intentional animations lasting between 1200-2000ms. Helps agents build splash screens and narrative onboarding sequences.
CX Codex +1
485installs
product-manager skill Helps a PM decide which animations are worth building and which can wait, using business value instead of taste.
CX Codex +1
485installs
universal-tool skill A skill that feeds your agent Disney's 12 animation principles for any animation tool or framework.
CX Codex +1
484installs
universal-practitioner skill A skill that maps Disney's 12 animation principles onto interfaces, writing and product work, not just cartoons.
CX Codex +1
482installs
universal-solutions skill Diagnoses interface animation flaws using the twelve Disney principles and suggests precise fixes for easing, timing, and rendering.
CX Codex +1
482installs
universal-fallback skill Universal animation guidance based on Disney's 12 principles for any medium. Helps whenever animation requirements are vague or span multiple domains.
CX Codex +1
481installs
accessibility-issues skill Audits motion that hurts users with vestibular disorders, cognitive overload or screen reader needs, then names the fix for each case.
CX Codex +1
481installs
ux-friction skill A skill that diagnoses animations which make users wait, get confused or abandon a task. Useful when transitions slow the interface down.
CX Codex +1
481installs
instant-0-100ms skill This skill provides rules for UI animations under 100ms. It fits button presses and toggle switches that need immediate tactile confirmation.
CX Codex +1
480installs
adapt skill Adapts web layouts for mobile viewports, tablets, wide screens, print, and HTML emails while preserving hierarchy and touch targets.
CX Codex +1
557installs
typeset skill Audits fonts, type scale and text hierarchy in a UI, then rebuilds them as a system. Useful when the layout looks generic.
CX Codex +1
557installs
data-viz skill A skill for designing charts, dashboards and data tables. It picks the right chart type and keeps accessibility in the loop.
CX Codex +1
568installs
media-publishing skill Guides UI motion design for news websites, digital magazines, and reader apps based on Disney's 12 animation principles.
CX Codex +1
477installs
slow-800-1200ms skill 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.
CX Codex +1
477installs
forms skill Guides form interface design and multi-step input flows. Enforces validation timing, accessible markup, and mobile ergonomics.
CX Codex +1
555installs
universal-timing skill A skill about animation timing: rules that hold at 50ms and at 5000ms. Useful when you need to pick a duration and an easing curve instead of guessing.
CX Codex +1
476installs
universal-mindset skill This skill frames animation work around story, motion, rhythm, and viewer focus. Use it when a specialised thinking style does not fit the task.
CX Codex +1
475installs
empty-state skill A skill for designing empty states: zero data, no search results, permission walls and load errors. Useful when a screen greets people with nothing but “No items”.
CX Codex +1
552installs
a11y skill Walks the interface through keyboard, screen reader, contrast and semantics checks, then fixes what it finds. Useful when a component fails without a mouse.
CX Codex +1
561installs
colorize skill A coding-agent skill that brings color into interfaces that read as flat gray: semantic states, accents, and color-based hierarchy. Useful when a design feels lifeless.
CX Codex +1
551installs
normalize skill Audits UI components and realigns them with project design tokens, spacing rules, and system patterns. Fixes styling drift and hard-coded values.
CX Codex +1
546installs
awesome-design-md-jp skill Provides Japanese UI specifications in DESIGN.md format for AI agents. It sets up CJK typography, font fallback chains, and punctuation line-break rules.
CX Codex +1
668installs
wireframing skill A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design.
CX Codex +1
566installs
accessibility-inclusive-design skill A skill that pushes your coding agent to design and critique interfaces for keyboard use, screen readers, contrast and semantics.
CX Codex +1
574installs
k2f-idml skill 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.
CX Codex +1
2,500installs
harden skill Runs your interface through edge cases: long text, network errors, RTL, empty states. Worth it before shipping to production.
CX Codex +1
539installs
distill skill A skill that removes extra controls, options and features from a screen so the main task stands out. Useful when everything competes for attention.
CX Codex +1
548installs
1,761–1,800 of 2,133
