---

name: UIDesign description: UI design system combining UI Skills constraints with Vercel design guidelines. USE WHEN building UI, reviewing interfaces, creating components, frontend design, web interfaces, accessibility review, animation guidelines, form design, or layout work.

UIDesign

Constraint-based UI design system combining UI Skills with Vercel Design Guidelines.

Updated: January 2026

Integration with FrontendDesign

This skill focuses on constraints and correctness. For creative direction and distinctive aesthetics, use the FrontendDesign skill first.

Recommended workflow:

1. FrontendDesign → Establishes aesthetic direction (typography, color, motion vision)
2. UIDesign → Ensures implementation meets constraints (a11y, performance, stack)

Both skills should be used together for best results: distinctive designs that are also accessible and performant.

Customization

Before executing, check for user customizations at: ~/.claude/skills/CORE/USER/SKILLCUSTOMIZATIONS/UIDesign/

If this directory exists, load and apply any PREFERENCES.md, configurations, or resources found there. These override default behavior. If the directory does not exist, proceed with skill defaults.

Voice Notification

When executing a workflow, do BOTH:

1. Send voice notification:

   Copycurl -s -X POST http://localhost:8888/notify \
     -H "Content-Type: application/json" \
     -d '{"message": "Running the WORKFLOWNAME workflow from the UIDesign skill"}' \
     > /dev/null 2>&1 &
   

2. Output text notification:

   CopyRunning the **WorkflowName** workflow from the **UIDesign** skill...
   

Workflow Routing

Quick Reference

Modular Skills (UI Skills)

Stack Constraints (UI Skills)

• CSS: Tailwind CSS only
• Animation: motion/react for JS animations, tw-animate-css for micro-animations
• Utilities: cn utility for class logic
• Primitives: Base UI, React Aria, or Radix (never mix)

Core Principles (Vercel)

• Keyboard accessible (WAI-ARIA patterns)
• Honor prefers-reduced-motion
• GPU-accelerated animations only (transform, opacity)
• Optical alignment over geometric
• Maximum 200ms for UI interaction animations

Full Documentation:

• Vercel guidelines: VercelGuidelines.md
• UI Skills constraints: UISkillsConstraints.md
• Accessibility: FixingAccessibility.md
• Metadata: FixingMetadata.md
• Motion Performance: FixingMotionPerformance.md

Examples

Example 1: Review existing UI code

CopyUser: "Review the login form for accessibility"
--> Invokes Review workflow
--> Checks against Vercel accessibility guidelines
--> Checks against UI Skills constraints
--> Returns issues with specific fixes

Example 2: Build a new component

CopyUser: "Build a modal dialog component"
--> Invokes Build workflow
--> Uses Radix primitives (per UI Skills)
--> Applies Vercel interaction patterns
--> Returns accessible, animated component

Example 3: Quick constraint check

CopyUser: "Is this animation okay? transition: all 0.5s"
--> Direct answer (no workflow needed)
--> NO: Never use `transition: all`, explicitly list properties
--> NO: 500ms exceeds 200ms animation cap
--> Fix: `transition: transform 150ms, opacity 150ms`

Example 4: Fix accessibility issues

CopyUser: "Fix accessibility in the navigation"
--> Invokes Accessibility workflow
--> Applies fixing-accessibility rules by priority
--> Returns minimal, targeted fixes

Example 5: Audit metadata

CopyUser: "Check SEO on the product page"
--> Invokes Metadata workflow
--> Checks for duplicate tags, canonical URL, OG images
--> Returns issues with specific fixes

Example 6: Fix animation performance

CopyUser: "The scroll animation is janky"
--> Invokes MotionPerformance workflow
--> Checks for Never Patterns (scroll polling, layout thrashing)
--> Suggests Scroll Timeline or IntersectionObserver