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

Quick Start

Component + Styling Setup

Install shadcn/ui with Tailwind:

npx shadcn@latest init

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

Add components:

npx shadcn@latest add button card dialog form

Use components with utility styling:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Alternative: Tailwind-Only Setup

Vite projects:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

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:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generate tailwind.config.js with custom theme:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Best Practices

Component Composition: Build complex UIs from simple, composable primitives
Utility-First Styling: Use Tailwind classes directly; extract components only for true repetition
Mobile-First Responsive: Start with mobile styles, layer responsive variants
Accessibility-First: Leverage Radix UI primitives, add focus states, use semantic HTML
Design Tokens: Use consistent spacing scale, color palettes, typography system
Dark Mode Consistency: Apply dark variants to all themed elements
Performance: Leverage automatic CSS purging, avoid dynamic class names
TypeScript: Use full type safety for better DX
Visual Hierarchy: Let composition guide attention, use spacing and color intentionally
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:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

Responsive layout with dark mode:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

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

UI Styling Skill

Reference

When to Use This Skill

Core Stack

Component Layer: shadcn/ui

Styling Layer: Tailwind CSS

Visual Design Layer: Canvas

Quick Start

Component + Styling Setup

Alternative: Tailwind-Only Setup

Component Library Guide

Theme & Customization

Accessibility Patterns

Tailwind Utilities

Responsive Design

Tailwind Customization

Visual Design System

Utility Scripts

shadcn_add.py

tailwind_config_gen.py

Best Practices

Reference Navigation

Common Patterns

Resources