Ui Skills

**Quick judgment**: This skill is a strong fit for teams using **React + Tailwind CSS + motion/react** who want AI-generated UI to follow strict accessibility, performance, and design rules. It is intentionally opinionated and narrow in scope. **What it does well** - Enforces concrete, implementation-level constraints (e.g., Tailwind defaults, `h-dvh` over `h-screen`, `text-balance`, `tabular-nums`, no arbitrary `z-[]`). - Strong accessibility stance via mandated use of established primitive libraries and explicit rules for icon-only buttons & dialogs. - Sensible animation and performance constraints (compositor-only props, short durations, respects `prefers-reduced-motion`). - Encourages safer interactions (AlertDialog for destructive actions, local error placement, no paste blocking, safe-area handling). **Key risks / limitations** - **Stack-specific**: Optimized for React + Tailwind + motion/react; compatibility is limited if your UI stack differs (e.g., no Tailwind, different animation or primitive libraries). - **Highly prescriptive**: Hard bans on gradients, glow effects, and mixing primitive systems can conflict with existing design languages or creative requirements. - **Design lock-in**: Prefers existing primitives and Tailwind tokens, which is ideal for established systems but less flexible for experimental or non-standard UIs. **Recommended scenarios** - You have a **mature Tailwind-based design system** (with Base UI / React Aria / Radix primitives) and want agents to extend it safely and consistently. - You care about **performance and accessibility by default**, and want to prevent common footguns in animation, layout, and interaction. - You’re using agents for **production UI code**, not just rough prototypes, and need them to respect an existing house style and UX standards.