Tailwind Design System Architect
Builds scalable, production-ready design systems using Tailwind CSS, design tokens, and accessible component patterns.
This skill empowers Claude to architect comprehensive UI design systems from scratch or migrate existing styles to Tailwind CSS. It focuses on implementing a strict design token hierarchy—mapping brand colors to semantic and component levels—while utilizing industry-standard patterns like Class Variance Authority (CVA) for robust component libraries. Whether you're setting up dark mode, building responsive layouts, or ensuring accessible form components, this skill provides the structured logic and implementation patterns necessary for maintainable, high-performance frontend architectures.
Características Principales
01Responsive grid and container system generation
02Semantic dark mode and color scheme configuration
03CVA (Class Variance Authority) component architecture
042 GitHub stars
05Design token hierarchy implementation (Brand, Semantic, Component)
06Accessible form and compound component patterns
Casos de Uso
01Standardizing UI patterns and design tokens across a large codebase
02Building responsive, accessible dashboards with compound components
03Creating a multi-theme component library with Tailwind CSS