Enforces high-performance UI constraints and accessibility best practices for modern web interfaces.
The UI Skills skill provides a set of production-grade constraints to ensure Claude builds accessible, performant, and visually consistent user interfaces. It automates the adherence to modern frontend standards—including Tailwind CSS best practices, compositor-only animations via motion/react, and accessible component primitives like Radix and Base UI—while preventing common anti-patterns like layout shifts, blocked paste events, or inefficient render logic. It is ideal for teams looking to maintain a high bar for UX quality without manual review overhead.
주요 기능
01Validates typography with modern CSS features like text-balance, text-pretty, and tabular-nums
02Optimizes animations using compositor-only properties and motion/react for high performance
03Prevents performance regressions by restricting heavy filters and inefficient useEffect patterns
04Enforces accessible component primitives using Radix, Base UI, and React Aria
052 GitHub stars
06Standardizes Tailwind CSS usage including dynamic viewport units (h-dvh) and utility merging
사용 사례
01Scaffolding new frontend features with consistent styling, interaction, and animation patterns
02Automating code reviews for UI components to identify accessibility or performance violations
03Refactoring legacy CSS or layout logic to modern, mobile-friendly Tailwind CSS standards
