Tailwind + shadcn/ui

Apply these patterns whether you're building new UI from scratch or refactoring existing code — the rules are the same either way.

Detect framework first

This skill serves two ecosystems. Before doing anything, read package.json to detect which one you're in:

react / react-dom present → React mode. Primitive layer is Base UI; the CLI is the official npx shadcn@latest. Gather project context by running:
```
npx shadcn@latest info --json
```
Key fields: tailwindVersion (v4 uses @theme inline; v3 uses tailwind.config.js), tailwindCssFile (always edit this file for CSS variables — never create a new one), aliases (use the actual alias prefix for imports, never hardcode), base (the primitive layer).
solid-js present → Solid mode. Primitive layer is Kobalte (Zaidan components); the CLI is npx shadcn-solid@latest (much thinner — no info/search/docs). Gather project context by reading ui.config.json + package.json. See references/cli-shadcn-solid.md and references/primitives-solid.md.