ui-styling-patterns

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>
  )
}