# consumer-skills

Claude Code skills for the **other side of the install** — an application that
depends on this kit, not this repository.

Every skill in `.claude/skills/` is written for whoever develops the kit. These
three are written for whoever *uses* it: a developer starting a new project who
installs the package and now has to get 39 components, two independent style
axes, dozens of import subpaths and a types-only dev dependency right. Copy them
into that project and Claude there builds with the kit instead of hand-rolling a
button.

| Skill | Fires when | Does |
| --- | --- | --- |
| `ui-kit-setup` | just installed, or something renders unstyled | stylesheet route, dark mode, the `radix-ui` dev dependency, root providers, bundler settings |
| `ui-kit-usage` | any UI is written in that project | which component to reach for, subpath imports, `variant` × `colorPalette`, safe overrides, icons |
| `ui-kit-review` | asked to review/align the UI | audits the app against the kit and fixes the drift, findings first |

## Handing them over

Copy all three folders into the consuming project's `.claude/skills/`:

```bash
# from the consuming project, with this kit checked out alongside it
mkdir -p .claude/skills
cp -r ../<this-kit>/consumer-skills/ui-kit-* .claude/skills/
```

```powershell
# PowerShell
New-Item -ItemType Directory -Force .claude\skills
Copy-Item -Recurse -Force ..\<this-kit>\consumer-skills\ui-kit-* .claude\skills\
```

Commit them in that project. They are three folders of Markdown with no build
step and no dependency.

**Copy all three together.** `ui-kit-setup` and `ui-kit-review` both read
`ui-kit-usage/references/`, so copying one on its own leaves dangling pointers.

**They do not travel with the published package.** `package.json#files` is
`dist`-only, deliberately: these are for a team that has the kit's source
alongside their app, and they are not something every npm installer should
download. Handing them over is a copy, and it is manual on purpose.

## Keeping them true

`ui-kit-usage/references/` is **generated** — five files holding every fact the
skills quote:

```bash
npm run consumer:gen          # rewrite them
npm run consumer:gen --check  # fail if stale; part of `npm run verify`
```

Regenerate after adding a component, after renaming the package, and after any
change to the token layer. The prose in each `SKILL.md` is hand-written and
outlives all of that.

The `/consumer-skills` skill does the whole job — regenerate, then reconcile the
prose against the kit as it now stands.

A consuming project that already has these copied in gets an update the same way
it got them: copy the folders again.

## The one rule

These files are read **inside an application**, which has
`node_modules/<package>/dist` and its own source — nothing else. It cannot edit
a token, run this repository's scripts, or open a file under this repository's
`src/`. A skill that says otherwise sends a developer looking for something that
is not there.

`npm run consumer:gen --check` enforces that mechanically: it fails if anything
inside a `ui-kit-*` folder names a script, directory or tool that exists only on
this side of the install. That check is the reason this README is not itself
inside one of those folders — it is addressed to you, and it never travels.