pimp-my-shadcn

Take a design that exists somewhere else — a live website, a case study made of screenshots, a folder of images — and make this project's shadcn primitives wear it, iso: same colours, radii, type, spacing, states, in light and dark. The consumer app never restyles; it only lays out. The proof is a page rebuilt from the primitives alone that a stranger cannot tell from the reference.

Four phases, each with its own reference file and its own completion criterion. Work them in order; each one is a commit. On a project with an issue tracker, they are the four tickets of a wayfinder map (see Tracker); otherwise the ledger is a Markdown file.

Setup

1. Check for an existing DESIGN.md at the project root. An existing one is shown to the user before anything replaces it.
2. Run npx shadcn@latest info --json (or the project's package runner) from the directory holding components.json. In a monorepo that is the ui package, not the root. Note base (base, radix or aria), style, the css file path, and the installed components. A blank directory is scaffolded first with the named style closest to the reference, following reference/init.md, then info is re-run.
3. Read DESIGN.md, the css file with the shadcn variables, and every installed primitive under the components directory before deciding anything. The primitives are already bound to the shadcn variables; that binding is what makes the whole method work.

Grill before charting

Six decisions shape every later edit. Ask them with a recommended answer each, in one round, and record the answers in the ledger. When the user is not reachable, take the recommended answer and write it down as an assumption.