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 (dialo

UI Styling Skill Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas based visual design systems. Reference shadcn/ui: https://ui.shadcn.com/llms.txt Tailwind CSS: https://tailwindcss.com/docs When to Use This Skill Use when: Building UI with React based frameworks (Next.js, Vite, Remix, Astro) Implementing accessible components (dialogs, forms, tables, navigation) Styling with utility first CSS approach Creating responsive, mobile first layouts Implementing dark mode and theme customization Building design systems with consistent tokens Generating visual designs, posters, or brand materials Rapid prototyping with immediate visual feedback Adding complex UI patterns (data tables, charts, command palettes) Core Stack Component Layer: shadcn/ui Pre built accessible components via Radix UI primitives Copy paste distribution model (components live in your codebase) TypeScript first with full type safety Composable primitives for complex UIs CLI based installation and management Styling Layer: Tailwind CSS Utility first CSS framework Build time processing with zero runtime overhead Mobile first responsive design Consistent design tokens (colors, spacing, typography) Automatic dead code elimination Visual Design Layer: Canvas Museum quality visual compositions Philosophy driven design approach Sophisticated visual communication Minimal text, maximum visual impact Systematic patterns and refined aesthetics Script Paths Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file is this skill's own scripts/ folder, and ../<skill /scripts/<file is a sibling sub skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand guidelines.md , assets/design tokens.json or src/ relative to it. Quick Start Component + Styling Setup Install shadcn/ui with Tailwind: CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS. Add components: Use components with utility styling: Alternative: Tailwind Only Setup Vite projects: Component Library Guide Comprehensive component catalog with usage patterns, installation, and composition examples. See: references/shadcn components.md Covers: Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation) Layout & navigation (Card, Tabs, Accordion, Navigation Menu) Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command) Feedback & status (Alert, Progress, Skeleton) Display components (Table, Data Table, Avatar, Badge) Theme & Customization Theme configuration, CSS variables, dark mode implementation, and component customization. See: references/shadcn theming.md Covers: Dark mode setup with next themes CSS variable system Color customization and palettes Component variant customization Theme toggle implementation Accessibility Patterns ARIA patterns, keyboard navigation, screen reader support, and accessible component usage. See: references/shadcn accessibility.md Covers: Radix UI accessibility features Keyboard navigation patterns Focus management Screen reader announcements Form validation accessibility Tailwind Utilities Core utility classes for layout, spacing, typography, colors, borders, and shadows. See: references/tailwind utilities.md Covers: Layout utilities (Flexbox, Grid, positioning) Spacing system (padding, margin, gap) Typography (font sizes, weights, alignment, line height) Colors and backgrounds Borders and shadows Arbitrary values for custom styling Responsive Design Mobile first breakpoints, responsive utilities, and adaptive layouts. See: references/tailwind responsive.md Covers: Mobile first approach Breakpoint system (sm, md, lg, xl, 2xl) Responsive utility patterns Container queries Max width queries Custom breakpoints Tailwind Customization Config file structure, custom utilities, plugins, and theme extensions. See: references/tailwind customization.md Covers: @theme directive for custom tokens Custom colors and fonts Spacing and breakpoint extensions Custom utility creation Custom variants Layer organization (@layer base, components, utilities) Apply directive for component extraction Visual Design System Canvas based design philosophy, visual communication principles, and sophisticated compositions. See: references/canvas design system.md Covers: Design philosophy approach Visual communication over text Systematic patterns and composition Color, form, and spatial design Minimal text integration Museum quality execution Multi page design systems Utility Scripts Python automation for component installation and configuration generation. shadcn add.py Add shadcn/ui components with dependency handling: tailwind config gen.py Generate tailwind.config.js with custom theme: Best Practices 1. Component Composition : Build complex UIs from simple, composable primitives 2. Utility First Styling : Use Tailwind classes directly; extract components only for true repetition 3. Mobile First Responsive : Start with mobile styles, layer responsive variants 4. Accessibility First : Leverage Radix UI primitives, add focus states, use semantic HTML 5. Design Tokens : Use consistent spacing scale, color palettes, typography system 6. Dark Mode Consistency : Apply dark variants to all themed elements 7. Performance : Leverage automatic CSS purging, avoid dynamic class names 8. TypeScript : Use full type safety for better DX 9. Visual Hierarchy : Let composition guide attention, use spacing and color intentionally 10. Expert Craftsmanship : Every detail matters treat UI as a craft Reference Navigation Component Library references/shadcn components.md Complete component catalog references/shadcn theming.md Theming and customization references/shadcn accessibility.md Accessibility patterns Styling System references/tailwind utilities.md Core utility classes references/tailwind responsive.md Responsive design references/tailwind customization.md Configuration and extensions Visual Design references/canvas design system.md Design philosophy and canvas workflows Automation scripts/shadcn add.py Component installation scripts/tailwind config gen.py Config generation Common Patterns Form with validation: Responsive layout with dark mode: Resources shadcn/ui Docs: https://ui.shadcn.com Tailwind CSS Docs: https://tailwindcss.com Radix UI: https://radix ui.com Tailwind UI: https://tailwindui.com Headless UI: https://headlessui.com v0 (AI UI Generator): https://v0.dev

ui-styling