Enforces opinionated, high-performance, and accessible UI development patterns for frontend agents.
The UI Skills plugin provides a comprehensive set of constraints and best practices for building modern, production-grade web interfaces. It guides Claude to prioritize Tailwind CSS defaults, accessible primitives like Radix and Base UI, and high-performance animation techniques using motion/react. By enforcing strict rules on typography, layout consistency, and interaction design, it ensures that generated code is not only visually polished but also accessible, performant, and maintainable across different devices.
Key Features
01Standardizes typography with modern CSS features like text-balance and tabular-nums
02Strict interaction guidelines for destructive actions, loading states, and mobile safety
0342 GitHub stars
04Mandates accessible component primitives like Radix, Base UI, and React Aria
05Optimizes animations for performance using compositor props and reduced-motion checks
06Enforces Tailwind CSS utility-first styling and default design tokens
Use Cases
01Refactoring existing components to follow high-performance animation and layout standards
02Standardizing frontend development output across a team using AI agents
03Building a accessible design system from scratch with standardized UI patterns
