Initial commit: antigravity-claudekit

skills/ck-ui-styling/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: ck-ui-styling
+description: 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
+
+```bash
+# 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
+
+```tsx
+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)
+
+```bash
+npm install -D tailwindcss @tailwindcss/vite
+```
+
+```css
+/* 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