--- name: react-shadcn-ui description: "Use when building React UI on shadcn/ui primitives + Tailwind — the apply/review/polish skill dispatched by `directives/ui/*` for the `react-shadcn` stack." source: package --- # react-shadcn-ui ## Compatibility - **Tested against:** `shadcn@2.1`, Tailwind CSS `3.x`, React `18+`. - The audit step (`directives/ui/audit.py`) reads the line above and compares it with `state.ui_audit.shadcn_inventory.version`; a major mismatch triggers a soft halt before this skill runs. ## When to use Use when `state.stack.frontend == "react-shadcn"` and `directives/ui/apply.py`, `review.py`, or `polish.py` dispatches to this skill, or when a React project clearly uses shadcn/ui (presence of `components.json`, `@radix-ui/*` dependencies, a `components/ui/` folder of generated primitives). Do NOT use when: - Project is Blade + Livewire + Flux (use `flux` / `livewire` / `blade-ui`). - Project is Vue (use the Vue stack skills). - Plain React without shadcn/ui — fall back to manual composition; this skill assumes the primitive set exists. ## Gotcha - shadcn/ui is **not** an npm package. Primitives are copied into `components/ui/` and edited in-place. Do not `npm install shadcn-ui`. Run `npx shadcn@latest add ` to scaffold; then edit. - Major-version drift between this skill's `## Compatibility` line and the project's installed primitives is a real risk. The audit step writes `state.ui_audit.shadcn_inventory` with the detected version — when it diverges by a major, audit emits a soft halt before this skill runs. - shadcn/ui composes Radix primitives. Accessibility is built in via Radix but only when you use the wrapper components correctly (`asChild`, `` instead of a bare `