skin-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, and the reference wins every disagreement with taste. 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. Load the shadcn skill with the Skill tool, from the directory holding components.json (in a monorepo, the ui package). It injects the project context and owns the CLI, the composition rules and the styling rules for every later phase. A directory without components.json is scaffolded first, style chosen by reference/init.md, then info --json is re-run.
2. Check for an existing DESIGN.md at the project root. An existing one is shown to the user before anything replaces it; when the argument says the reference is already in it, Phase 1 is scripts/check-design.mjs alone.
3. Read DESIGN.md when it exists, 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.
4. Fix the scope: the screens the skin must cover. Screens or images in the argument are the scope. A bare site URL is mapped first: dispatch one subagent per top-level navigation section, each returning the distinct screen templates it found with one URL apiece; the union is the scope.
5. Fix the iso page: the screen named in the argument, otherwise the screen in scope that exercises the most primitives (a settings or integration page beats a hero).

Write the scope and the iso page into the ledger before Phase 1.

Phase 1 — Capture the reference into DESIGN.md

Read reference/capture.md. Scrape the reference yourself (live DOM, or the images of a case study), sample exact pixels, then write DESIGN.md with its shadcnMapping block. Both modes are captured when the reference has both.

Done when scripts/check-design.mjs passes on DESIGN.md and the css file, sizes that are estimates are labelled so under source, and the reference renders are saved under .scratch/design-ref/<slug>/ for the later phases.