Builds reusable, maintainable, and type-safe UI components using Tailwind CSS and modern design patterns.
This skill equips Claude with expert guidance for architecting professional-grade Tailwind CSS component libraries and design systems. It moves beyond basic utility classes to implement advanced patterns such as Class Variance Authority (CVA) for variant management, compound component structures, and clean template-level abstractions. By focusing on maintainability and scalability, the skill helps developers create flexible UI elements like accessible modals, dropdowns, and form inputs while avoiding common pitfalls like the over-reliance on the @apply directive.
主な機能
01Template-level component abstraction strategies
02Type-safe variant management with Class Variance Authority (CVA)
03Compound component pattern implementation for flexible APIs
04Centralized design system integration for consistent themes
05Advanced conditional styling using clsx and tailwind-merge
0639 GitHub stars
ユースケース
01Refactoring repetitive utility-heavy templates into clean, reusable React components
02Building a custom UI kit or design system from scratch using Tailwind CSS
03Implementing complex interactive UI elements with conditional loading and error states
