---

name: UI description: Frontend development system integrating Vercel design philosophy, technical constraints, and accessibility review. USE WHEN UI design, frontend patterns, component styling, accessibility review, design systems, OR /ui command.

UI - Frontend Development System

Complete frontend development loop: Philosophy -> Constraints -> Verification.

Three Integrated Systems

Workflow Routing

Quick Reference

Vercel Philosophy Highlights

• Keyboard operability (WAI-ARIA patterns)
• prefers-reduced-motion respect
• Touch targets: 44px mobile, 24px desktop
• Optical alignment > geometric precision
• Active voice, Title Case headings

ui-skills Constraint Highlights

• Tailwind + cn utility (clsx + tailwind-merge)
• Animation: transform/opacity only, 200ms max
• h-dvh not h-screen, fixed z-index scale
• One accent color per view
• No gradients unless requested

Review Targets

• WCAG 2.1 compliance
• Color contrast 4.5:1 minimum
• Component state completeness (hover, focus, active)

Examples

Example 1: Apply design philosophy

CopyUser: "/ui philosophy"
-> Loads Vercel design guidelines
-> Applies to current component context
-> Suggests interaction patterns, accessibility improvements

Example 2: Check constraints

CopyUser: "/ui constraints"
-> Detects project stack (Tailwind, etc.)
-> Loads appropriate constraint set
-> Reviews code against technical rules

Example 3: Full review

CopyUser: "/ui review src/components/Button.tsx"
-> Runs rams CLI (if available) or manual checklist
-> Reports accessibility score
-> Suggests specific fixes with line numbers

Example 4: Default behavior

CopyUser: "/ui"
-> Detects current context
-> Shows detected stack and quick help
-> Applies philosophy + constraints to active work

Stack Detection

The skill auto-detects your UI stack from package.json:

See Data/ConstraintSets.yaml for full configurations.

Design Agent Integration

Use with The UI Designer agent for full design-implement-verify loop:

Copy/agents design "Create a settings panel with dark mode toggle"

The agent orchestrates: Art (mockups) -> UI (implementation) -> Browser (verification)