Shadcn Aesthetic

概要

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.

主な機能

• Consistent 4px incremental spacing scale for harmonious layouts
• Detection and prevention of legacy CSS anti-patterns
• HSL-based color system with comprehensive CSS variable integration
• Standardized component patterns for buttons, inputs, cards, and badges
• Refined shadow and transition systems for professional depth and motion
• 0 GitHub stars

ユースケース

• Building a custom design system or theme from scratch
• Creating accessible and dark-mode compatible UI components for web frameworks
• Refactoring legacy styles into modern, maintainable CSS/SCSS architecture