1---
2name: ckm:ui-styling
3description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
4argument-hint: "[component or layout]"
5license: MIT
6metadata:
7  author: claudekit
8  version: "1.0.0"
9---
10 
11# UI Styling Skill
12 
13Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
14 
15## Reference
16 
17- shadcn/ui: https://ui.shadcn.com/llms.txt
18- Tailwind CSS: https://tailwindcss.com/docs
19 
20## When to Use This Skill
21 
22Use when:
23- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
24- Implementing accessible components (dialogs, forms, tables, navigation)
25- Styling with utility-first CSS approach
26- Creating responsive, mobile-first layouts
27- Implementing dark mode and theme customization
28- Building design systems with consistent tokens
29- Generating visual designs, posters, or brand materials
30- Rapid prototyping with immediate visual feedback
31- Adding complex UI patterns (data tables, charts, command palettes)
32 
33## Core Stack
34 
35### Component Layer: shadcn/ui
36- Pre-built accessible components via Radix UI primitives
37- Copy-paste distribution model (components live in your codebase)
38- TypeScript-first with full type safety
39- Composable primitives for complex UIs
40- CLI-based installation and management
41 
42### Styling Layer: Tailwind CSS
43- Utility-first CSS framework
44- Build-time processing with zero runtime overhead
45- Mobile-first responsive design
46- Consistent design tokens (colors, spacing, typography)
47- Automatic dead code elimination
48 
49### Visual Design Layer: Canvas
50- Museum-quality visual compositions
51- Philosophy-driven design approach
52- Sophisticated visual communication
53- Minimal text, maximum visual impact
54- Systematic patterns and refined aesthetics
55 
56## Quick Start
57 
58### Component + Styling Setup
59 
60**Install shadcn/ui with Tailwind:**
61```bash
62npx shadcn@latest init
63```
64 
65CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
66 
67**Add components:**
68```bash
69npx shadcn@latest add button card dialog form
70```
71 
72**Use components with utility styling:**
73```tsx
74import { Button } from "@/components/ui/button"
75import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
76 
77export function Dashboard() {
78  return (
79    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
80      <Card className="hover:shadow-lg transition-shadow">
81        <CardHeader>
82          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
83        </CardHeader>
84        <CardContent className="space-y-4">
85          <p className="text-muted-foreground">View your metrics</p>
86          <Button variant="default" className="w-full">
87            View Details
88          </Button>
89        </CardContent>
90      </Card>
91    </div>
92  )
93}
94```
95 
96### Alternative: Tailwind-Only Setup
97 
98**Vite projects:**
99```bash
100npm install -D tailwindcss @tailwindcss/vite
101```
102 
103```javascript
104// vite.config.ts
105import tailwindcss from '@tailwindcss/vite'
106export default { plugins: [tailwindcss()] }
107```
108 
109```css
110/* src/index.css */
111@import "tailwindcss";
112```
113 
114## Component Library Guide
115 
116**Comprehensive component catalog with usage patterns, installation, and composition examples.**
117 
118See: `references/shadcn-components.md`
119 
120Covers:
121- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
122- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
123- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
124- Feedback & status (Alert, Progress, Skeleton)
125- Display components (Table, Data Table, Avatar, Badge)
126 
127## Theme & Customization
128 
129**Theme configuration, CSS variables, dark mode implementation, and component customization.**
130 
131See: `references/shadcn-theming.md`
132 
133Covers:
134- Dark mode setup with next-themes
135- CSS variable system
136- Color customization and palettes
137- Component variant customization
138- Theme toggle implementation
139 
140## Accessibility Patterns
141 
142**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**
143 
144See: `references/shadcn-accessibility.md`
145 
146Covers:
147- Radix UI accessibility features
148- Keyboard navigation patterns
149- Focus management
150- Screen reader announcements
151- Form validation accessibility
152 
153## Tailwind Utilities
154 
155**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**
156 
157See: `references/tailwind-utilities.md`
158 
159Covers:
160- Layout utilities (Flexbox, Grid, positioning)
161- Spacing system (padding, margin, gap)
162- Typography (font sizes, weights, alignment, line height)
163- Colors and backgrounds
164- Borders and shadows
165- Arbitrary values for custom styling
166 
167## Responsive Design
168 
169**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**
170 
171See: `references/tailwind-responsive.md`
172 
173Covers:
174- Mobile-first approach
175- Breakpoint system (sm, md, lg, xl, 2xl)
176- Responsive utility patterns
177- Container queries
178- Max-width queries
179- Custom breakpoints
180 
181## Tailwind Customization
182 
183**Config file structure, custom utilities, plugins, and theme extensions.**
184 
185See: `references/tailwind-customization.md`
186 
187Covers:
188- @theme directive for custom tokens
189- Custom colors and fonts
190- Spacing and breakpoint extensions
191- Custom utility creation
192- Custom variants
193- Layer organization (@layer base, components, utilities)
194- Apply directive for component extraction
195 
196## Visual Design System
197 
198**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**
199 
200See: `references/canvas-design-system.md`
201 
202Covers:
203- Design philosophy approach
204- Visual communication over text
205- Systematic patterns and composition
206- Color, form, and spatial design
207- Minimal text integration
208- Museum-quality execution
209- Multi-page design systems
210 
211## Utility Scripts
212 
213**Python automation for component installation and configuration generation.**
214 
215### shadcn_add.py
216Add shadcn/ui components with dependency handling:
217```bash
218python scripts/shadcn_add.py button card dialog
219```
220 
221### tailwind_config_gen.py
222Generate tailwind.config.js with custom theme:
223```bash
224python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
225```
226 
227## Best Practices
228 
2291. **Component Composition**: Build complex UIs from simple, composable primitives
2302. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition
2313. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants
2324. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML
2335. **Design Tokens**: Use consistent spacing scale, color palettes, typography system
2346. **Dark Mode Consistency**: Apply dark variants to all themed elements
2357. **Performance**: Leverage automatic CSS purging, avoid dynamic class names
2368. **TypeScript**: Use full type safety for better DX
2379. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally
23810. **Expert Craftsmanship**: Every detail matters - treat UI as a craft
239 
240## Reference Navigation
241 
242**Component Library**
243- `references/shadcn-components.md` - Complete component catalog
244- `references/shadcn-theming.md` - Theming and customization
245- `references/shadcn-accessibility.md` - Accessibility patterns
246 
247**Styling System**
248- `references/tailwind-utilities.md` - Core utility classes
249- `references/tailwind-responsive.md` - Responsive design
250- `references/tailwind-customization.md` - Configuration and extensions
251 
252**Visual Design**
253- `references/canvas-design-system.md` - Design philosophy and canvas workflows
254 
255**Automation**
256- `scripts/shadcn_add.py` - Component installation
257- `scripts/tailwind_config_gen.py` - Config generation
258 
259## Common Patterns
260 
261**Form with validation:**
262```tsx
263import { useForm } from "react-hook-form"
264import { zodResolver } from "@hookform/resolvers/zod"
265import * as z from "zod"
266import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
267import { Input } from "@/components/ui/input"
268import { Button } from "@/components/ui/button"
269 
270const schema = z.object({
271  email: z.string().email(),
272  password: z.string().min(8)
273})
274 
275export function LoginForm() {
276  const form = useForm({
277    resolver: zodResolver(schema),
278    defaultValues: { email: "", password: "" }
279  })
280 
281  return (
282    <Form {...form}>
283      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
284        <FormField control={form.control} name="email" render={({ field }) => (
285          <FormItem>
286            <FormLabel>Email</FormLabel>
287            <FormControl>
288              <Input type="email" {...field} />
289            </FormControl>
290            <FormMessage />
291          </FormItem>
292        )} />
293        <Button type="submit" className="w-full">Sign In</Button>
294      </form>
295    </Form>
296  )
297}
298```
299 
300**Responsive layout with dark mode:**
301```tsx
302<div className="min-h-screen bg-white dark:bg-gray-900">
303  <div className="container mx-auto px-4 py-8">
304    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
305      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
306        <CardContent className="p-6">
307          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
308            Content
309          </h3>
310        </CardContent>
311      </Card>
312    </div>
313  </div>
314</div>
315```
316 
317## Resources
318 
319- shadcn/ui Docs: https://ui.shadcn.com
320- Tailwind CSS Docs: https://tailwindcss.com
321- Radix UI: https://radix-ui.com
322- Tailwind UI: https://tailwindui.com
323- Headless UI: https://headlessui.com
324- v0 (AI UI Generator): https://v0.dev
325