Agent skill · design visual · aiskillstore
shadcn-aesthetic
Modern CSS/SCSS architecture based on shadcn/ui design principles. Use this when generating any CSS, SCSS, or styling code to ensure modern, refined, and accessible design patterns.
Why this skill is useful
Provides specific CSS/SCSS architecture patterns and anti-patterns that enhance modern web design practices.
What it needs
About 10k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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: Usage ❌ Anti-Pattern (Don't Do This) --- Spacing Scale Use a consistent spacing scale based on 4px increments: Usage ❌ Anti-Pattern (Don't Do This) --- Shadow System Use subtle, layered shadows for depth: Usage ❌ Anti-Pattern (Don't Do This) --- Typography Scale Use a harmonious type scale: Usage ❌ Anti-Pattern (Don't Do This) --- Transitions & Animations Use quick, smooth transitions: Usage ❌ Anti-Pattern (Don't Do This) --- Focus States Modern, accessible focus rings: ❌ Anti-Pattern (Don't Do This) --- Modern Layout Patterns Grid Layouts Flex Layouts ❌ Anti-Pattern (Don't Do This) --- Component Patterns Button Input Card Badge --- Dark Mode Strategy CSS Variable Approach ❌ Anti-Pattern (Don't Do This) --- Border Radius System --- Z-Index System --- Accessibility Patterns Keyboard Navigation Screen Reader Only High Contrast Support Reduced Motion --- Complete Example: Modern Component --- Quality Checklist Before finalizing any CSS, verify: [ ] Using CSS variables for colors [ ] HSL color format with opacity support [ ] Consistent spacing scale (4px base) [ ] Subtle, layered shadows [ ] Quick transitions (150ms default) [ ] Pr …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/shadcn-aesthetic