ui-styling

1# UI Styling Skill
2 
3Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
4 
5## Reference
6 
7- shadcn/ui: https://ui.shadcn.com/llms.txt
8- Tailwind CSS: https://tailwindcss.com/docs
9 
10## When to Use This Skill
11 
12Use when:
13- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
14- Implementing accessible components (dialogs, forms, tables, navigation)
15- Styling with utility-first CSS approach
16- Creating responsive, mobile-first layouts
17- Implementing dark mode and theme customization
18- Building design systems with consistent tokens
19- Generating visual designs, posters, or brand materials
20- Rapid prototyping with immediate visual feedback
21- Adding complex UI patterns (data tables, charts, command palettes)
22 
23## Core Stack
24 
25### Component Layer: shadcn/ui
26- Pre-built accessible components via Radix UI primitives
27- Copy-paste distribution model (components live in your codebase)
28- TypeScript-first with full type safety
29- Composable primitives for complex UIs
30- CLI-based installation and management
31 
32### Styling Layer: Tailwind CSS
33- Utility-first CSS framework
34- Build-time processing with zero runtime overhead
35- Mobile-first responsive design
36- Consistent design tokens (colors, spacing, typography)
37- Automatic dead code elimination
38 
39### Visual Design Layer: Canvas
40- Museum-quality visual compositions
41- Philosophy-driven design approach
42…