Initial commit

skills/tailwind-setup/README.md

@@ -0,0 +1,41 @@
+# Tailwind Setup Skill (Vite + shadcn/ui)
+
+Add Tailwind CSS, shadcn/ui, dark-mode theme tokens, and aliases to a React/Vite frontend that talks to a Django backend.
+
+## What This Skill Does
+- Installs Tailwind (+ Vite plugin) and core shadcn/ui deps (`class-variance-authority`, `clsx`, `tailwind-merge`, `lucide-react`).
+- Updates `vite.config.js` to run `tailwindcss()` alongside React and adds `@` alias → `./src`.
+- Replaces `src/index.css` with Tailwind entry, then appends theme tokens via `scripts/apply-theme.sh` (uses `assets/tailwind-theme.css`) for dark/light palettes.
+- Sets up shadcn/ui scaffolding: `components.json`, `jsconfig.json` aliases, and utility `src/lib/utils.js`.
+- Enables class-based dark mode in `tailwind.config.js`.
+- Adds `ThemeContext` & `ThemeToggle` components and wraps `App` with `ThemeProvider`.
+- Installs shadcn/ui components (card, field, input, button, table, navigation-menu, label, separator, alert) via CLI.
+- Verifies build with `npm --prefix ./frontend run build`.
+
+## Prerequisites
+- React + Vite frontend in `frontend/`.
+- Django backend already set up (used only for proxy alignment).
+- Node.js 18+ and npm; mkcert HTTPS recommended.
+
+## Setup Summary (see SKILL.md for exact edits)
+1) **Deps**: `npm --prefix ./frontend install tailwindcss @tailwindcss/vite class-variance-authority clsx tailwind-merge lucide-react`.
+2) **Vite config**: import `path`, `tailwindcss`; add plugin; add `resolve.alias` `{ '@': path.resolve(__dirname, './src') }`.
+3) **CSS entry**: set `src/index.css` to `@import "tailwindcss";`.
+4) **Theme tokens**: run `bash .claude/skills/tailwind-setup/scripts/apply-theme.sh frontend` (appends tokens to `src/index.css`).
+5) **shadcn scaffolding**: create `components.json`, `jsconfig.json`, `src/lib/utils.js`.
+6) **Tailwind config**: `darkMode: 'class'`, content globs for `./index.html` and `./src/**/*.{js,jsx}`.
+7) **ThemeProvider + toggle**: add `src/contexts/ThemeContext.jsx`, `src/components/ThemeToggle.jsx`; wrap `<Router />` in `App.jsx`; drop toggle into navbar.
+8) **shadcn components**: run `npx --prefix ./frontend shadcn@latest add ...` for card/field/input/button/table/navigation-menu/label/separator/alert.
+9) **Build check**: `npm --prefix ./frontend run build`.
+
+## Outputs/Artifacts
+- Tailwind + shadcn tokens in `src/index.css`.
+- `tailwind.config.js`, `components.json`, `jsconfig.json`, `src/lib/utils.js`.
+- Theme context/toggle components added and App wrapped.
+- Installed shadcn/ui primitives ready for use.
+
+## Notes & Gotchas
+- Run theme script from project root and pass `frontend` path arg.
+- Ensure Vite aliases in `vite.config.js` and `jsconfig.json` match.
+- If you already have CSS content, back it up before replacing with Tailwind import (tokens are appended by the script).
+- Add additional content globs to `tailwind.config.js` if you place components elsewhere.