Generates modern, accessible CSS and SCSS code based on the clean, minimal shadcn/ui design system.
Provides comprehensive guidance for creating a refined CSS architecture that mirrors the popular shadcn/ui aesthetic. It focuses on implementing HSL color systems, consistent 4px spacing scales, and layered shadows to build professional, accessible interfaces. The skill ensures styles are highly maintainable and theme-able via CSS variables, featuring first-class support for dark mode and modern layout primitives like Grid and Flexbox while actively identifying and avoiding common CSS anti-patterns.
Características Principales
01Consistent 4px incremental spacing scale for harmonious layouts
02Detection and prevention of legacy CSS anti-patterns
03HSL-based color system with comprehensive CSS variable integration
04Standardized component patterns for buttons, inputs, cards, and badges
05Refined shadow and transition systems for professional depth and motion
060 GitHub stars
Casos de Uso
01Building a custom design system or theme from scratch
02Creating accessible and dark-mode compatible UI components for web frameworks
03Refactoring legacy styles into modern, maintainable CSS/SCSS architecture
