shadcn-aestheticlisted

# Modern CSS Architecture (shadcn Aesthetic) This skill provides comprehensive guidance for writing modern, refined CSS/SCSS that matches the shadcn/ui aesthetic - clean, minimal, accessible, and beautifully crafted. ## When This Skill Activates Apply these patterns when: - Writing any CSS, SCSS, or styling code - Creating component styles from scratch - Refactoring existing styles - Building design systems or theme systems - Working on Blazor, React, Vue, or any web UI ## Core Principles 1. **Use CSS variables for everything themeable** 2. **HSL color system for easy manipulation** 3. **Consistent spacing scale (4px base)** 4. **Subtle, layered shadows** 5. **Quick, smooth transitions (150ms)** 6. **Proper focus states** 7. **Modern layout primitives (Grid/Flex with gap)** 8. **Dark mode first-class citizen** --- ## Color System ### Variable Structure Always use HSL-based CSS variables for colors: ```scss :root { // Background colors --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; // Card colors --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; // Popover colors --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; // Primary brand colors --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; // Secondary colors --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; // Muted colors --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; // Accent colors --acc