antigravity-claudekit/skills/ck-ui-styling/SKILL.md

name, description

name	description
ck-ui-styling	Style UIs with shadcn/ui (Radix UI + Tailwind CSS). Use for accessible components, dark mode, responsive layouts, design systems, color customization, forms with validation, and theme configuration.

UI Styling

Beautiful, accessible UIs combining shadcn/ui components with Tailwind CSS utility styling.

When to Use

• Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
• Implementing accessible components (dialogs, forms, tables, navigation)
• Creating responsive, mobile-first layouts
• Implementing dark mode and theme customization
• Building design systems with consistent tokens

Don't Use When

• Non-React projects (Vue, Svelte — use framework-native UI libs)
• Simple static HTML without a build tool
• Projects already committed to a different component library

Quick Start

# Initialize shadcn/ui with Tailwind
npx shadcn@latest init

# Add components
npx shadcn@latest add button card dialog form table

Core Stack

Layer	Tool	Purpose
Components	shadcn/ui (Radix UI)	Accessible, copy-paste primitives
Styling	Tailwind CSS	Utility-first, mobile-first
Types	TypeScript	Full type safety

Usage Example

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>
          <Button variant="default" className="w-full">View Details</Button>
        </CardContent>
      </Card>
    </div>
  )
}

Tailwind-Only Setup (Vite)

npm install -D tailwindcss @tailwindcss/vite

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

Reference Files

• references/shadcn-components.md — complete component catalog with usage patterns
• references/shadcn-theming.md — dark mode, CSS variables, color customization
• references/shadcn-accessibility.md — ARIA patterns, keyboard nav, focus management
• references/tailwind-utilities.md — layout, spacing, typography, colors
• references/tailwind-responsive.md — breakpoints, mobile-first, container queries
• references/tailwind-customization.md — @theme, custom tokens, plugins, layers

Best Practices

1. Use Tailwind classes directly; extract components only for true repetition
2. Mobile-first: start with mobile styles, layer responsive variants
3. Leverage Radix UI primitives for accessible focus states and keyboard nav
4. Use CSS variable system for dark mode consistency
5. Never use dynamic class names — Tailwind's purge won't detect them

Resources

• shadcn/ui: https://ui.shadcn.com
• Tailwind CSS: https://tailwindcss.com
• Radix UI: https://radix-ui.com
• shadcn/ui LLM docs: https://ui.shadcn.com/llms.txt