@bongos/core 1.19.461 → 1.19.463

package/modules/ui-design/skills/README.md

@@ -20,14 +20,14 @@ Two origins were scanned for the set scoped with the owner (impeccable; the elev
 
 | Skill (in-house name) | Upstream | Licence | Verdict | Landing |
 |---|---|---|---|---|
-| `impeccable` | `pbakaus/impeccable` @ `<redacted>` (skill v4.1.x) | Apache-2.0 | **dangerous** — floor: 3 critical (a `bypassPermissions` marker in the skill's own live copy-edit agent; an instruction-override phrase in a test fixture; a same-file credential-store + http-client co-occurrence in a test), 19 high (shipped PostToolUse + Stop hooks, credential-store references), 107 medium, 147 low; panel: hooks written into five harness configs (globally on a global install), a child agent spawned with permissions bypassed from a loopback HTTP route, an autonomy directive that tells the agent to disregard its system prompt, a live-server token embedded in page source, an unverified remote bundle download | rebuild spec → GDS task |
+| `impeccable` | `pbakaus/impeccable` @ `<redacted>` (skill v4.1.x) | Apache-2.0 | **dangerous** — floor: 3 critical (a `bypassPermissions` marker in the skill's own live copy-edit agent; an instruction-override phrase in a test fixture; a same-file credential-store + http-client co-occurrence in a test), 19 high (shipped PostToolUse + Stop hooks, credential-store references), 107 medium, 147 low; panel: hooks written into five harness configs (globally on a global install), a child agent spawned with permissions bypassed from a loopback HTTP route, an autonomy directive that tells the agent to disregard its system prompt, a live-server token embedded in page source, an unverified remote bundle download | rebuild spec → [task 1003326](https://cloudbongos.com/builders#/task/1003326) → rebuilt in-house as `impeccable/` ([ADR 0221](../../../docs/adr/<redacted>.md)) |
 | `design-taste-frontend`, `design-taste-frontend-v1`, `high-end-visual-design`, `minimalist-ui`, `industrial-brutalist-ui`, `redesign-existing-projects`, `gpt-taste`, `stitch-design-taste`, `image-to-code`, `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit` | `Leonxlnx/taste-skill` @ `<redacted>` | MIT | **dangerous** — floor: 1 critical (an injection-phrase hit at `skills/taste-skill/SKILL.md:892`, which the panel identifies as a filename placeholder; the floor is untouchable by design); panel: caution (1 medium: the only documented install path runs an unpinned third-party `npx` CLI; 21 low: mandated invocation of any available image-generation tool, unbounded image counts, remote assets and scripts in generated pages, an auto-loaded cross-agent instruction file) | rebuild spec → GDS task |
 
 The eleven taste skills are single-file prose; the floor's one critical is a false positive in the human sense and a true positive in the scanner's — and the rule that makes the scanner worth having is that a session does not get to tell the difference. Vendoring any of them anyway is an **owner override recorded in an ADR**, not a judgement a task makes.
 
 ## The in-house rebuilds (2026-09-01)
 
-A rebuild spec becomes a **first-party skill** at `<name>/` — no `vendor/` segment, so the ratchets count it; no `PROVENANCE.md` or `LICENSE`, because an in-house skill claims no upstream; the same PLATFORM PREAMBLE first after the frontmatter, byte-identical; then a **`## Rebuilt from`** section naming the origin the *spec* was derived from (documentation only), the scan verdict, the spec task, the statement that no upstream bytes were consulted or copied, and what changed in translation ([ADR 0220](../../../docs/adr/<redacted>.md)). Declared in `module.json` like any other; `claude-materialize.js` step 1b lands it through its own-dir branch, which no sidecar gate touches. `tests/ui_design_skills.mjs` pins all of it.
+A rebuild spec becomes a **first-party skill** at `<name>/` — no `vendor/` segment, so the ratchets count it; no `PROVENANCE.md` or `LICENSE`, because an in-house skill claims no upstream; the same PLATFORM PREAMBLE first after the frontmatter, byte-identical; then a **`## Rebuilt from`** section naming the origin the *spec* was derived from (documentation only), the scan verdict, the spec task, the statement that no upstream bytes were consulted or copied, and what changed in translation ([ADR 0220](../../../docs/adr/<redacted>.md)). Declared in `module.json` like any other; `claude-materialize.js` step 1b lands it through its own-dir branch, which no sidecar gate touches. `tests/ui_design_skills.mjs` pins all of it. A rebuild whose method is a family of sub-commands ships as **one** skill dir with a `reference/<sub-command>.md` playbook beside the `SKILL.md`, exactly one loaded per request; the preamble is pinned once, in the `SKILL.md`, and governs every playbook ([ADR 0221](../../../docs/adr/<redacted>.md)).
 
 | Skill | Rebuilt from (spec) | Task | What it is |
 |---|---|---|---|
@@ -35,8 +35,9 @@ A rebuild spec becomes a **first-party skill** at `<name>/` — no `vendor/` seg
 | `design-taste-frontend-v1` | `Leonxlnx/taste-skill` `taste-skill-v1` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the earlier generation, kept distinct: a fixed baseline triple adapted in conversation, stack conventions for a served surface, the layout bans, full interaction cycles, the pattern vocabulary, the tile-grid archetypes |
 | `high-end-visual-design` | `Leonxlnx/taste-skill` `soft-skill` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the agency-build polish pass: one texture archetype (the style library's looks) and one layout archetype per project, the nested container anatomy where the world allows a container, the pill with its nested arrow disc, rhythm, choreography and scroll entry inside the Kill Switch |
 | `redesign-existing-projects` | `Leonxlnx/taste-skill` `redesign-skill` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the in-place upgrade: scan the stack, diagnose against the seven-group audit with the instance's world as the answer key, fix in impact-per-risk order, one group per commit; keeps the stack, never migrates frameworks |
+| `impeccable` | `pbakaus/impeccable` @ `<redacted>` (skill v4.1.x) | [task 1003326](https://cloudbongos.com/builders#/task/1003326) | the design-craft method as one skill with sub-commands, one playbook loaded per request from `impeccable/reference/`: shape, critique, audit, polish, harden, onboard, animate, colorize, typeset, layout, adapt, distill, clarify, optimize, document, extract, bolder, quieter; the craft floor and the bounded finish live in its `SKILL.md`; the three persisted homes are the instance's own files; no hooks, no bypass agent, no telemetry, no live server (the playwright plugin and the kit are the loops) |
 
-What every rebuild does with the upstream's opinions, in the same words: the palette is the pack and a variant is a look from [`../styles/`](../styles/README.md); the design system is the instance's `DESIGN.md`; images are hero plates and hero objects by token and never a step; every motion rule lives inside the Kill Switch (springs, magnetic hover, pointer-tracked borders are named *not available*); the upstream's bans are defaults an instance's `DESIGN.md` overrides; the kit's renders are the pre-flight. Still specs, not skills: the impeccable method (task 1003326), the image family (1003328), the detector (1003329), the four looks (1003327).
+What every rebuild does with the upstream's opinions, in the same words: the palette is the pack and a variant is a look from [`../styles/`](../styles/README.md); the design system is the instance's `DESIGN.md`; images are hero plates and hero objects by token and never a step; every motion rule lives inside the Kill Switch (springs, magnetic hover, pointer-tracked borders are named *not available*); the upstream's bans are defaults an instance's `DESIGN.md` overrides; the kit's renders are the pre-flight. Still specs, not skills: the image family (task 1003328), the detector (1003329), the four looks (1003327).
 
 **The playwright plugin** (`claude-plugins-official`, an MCP plugin) is the LIVE browser-driving loop, where the kit is the headless one. It is a prerequisite, documented — `claude plugin install playwright@claude-plugins-official` — never vendored.
 

package/modules/ui-design/skills/impeccable/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: impeccable
+description: The design-craft method for ANY surface on ANY Cloud Bongos instance, invoked as one skill plus an optional sub-command and an optional target ("impeccable audit /projects", "impeccable polish the hall's ranks page", "impeccable harden the wizard"). Sixteen sub-command playbooks (shape, audit, critique, polish, harden, animate, typeset, colorize, layout, adapt, distill, clarify, onboard, optimize, document, extract) plus the two directions (bolder, quieter), exactly one loaded per request; a bare description with no sub-command is ordinary design work routed to the closest playbook; no argument prints a menu built from live project signals and never auto-runs anything. Carries the craft floor (loaded right before UI is edited, never recited to the user) and the bounded finish (build fully, one render round through the kit, one batch of fixes, at most one confirming round, stop). Triggers on "impeccable", "critique this page", "audit the UI", "polish the whole path", "make it survive long text", "animate this", "tighten the copy", "document the design system", "extract the repeated pattern". Rebuilt in-house from the impeccable rebuild spec (task 1003326, ADR 0198) with no hooks, no bypass agent, no telemetry and no live server; the live loop is the playwright plugin and the headless loop is the module's kit. Web surfaces only; a native mobile target declines to /design.
+---
+
+<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
+> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
+>
+> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
+> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
+> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
+> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
+> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
+> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
+> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
+>
+> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
+<!-- END PLATFORM PREAMBLE -->
+
+## Rebuilt from
+
+This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `pbakaus/impeccable` @ `<redacted>` (Apache-2.0; skill v4.1.x), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28: three critical findings at the deterministic floor and a panel that upheld PostToolUse and Stop hooks written into five harness configs, a child agent spawned with its permissions bypassed from a loopback HTTP route, a setup directive that overrode the harness's own instructions, a live-server credential embedded in page source, an unverified remote bundle, and default-on telemetry. Under [ADR 0198](../../../../docs/adr/<redacted>.md) that verdict lands a REBUILD-SPEC, never a copy. The spec is the body of [task 1003326](https://cloudbongos.com/builders#/task/1003326), derived from the origin's documentation only; this file and the playbooks under `reference/` implement its requirements from scratch, **no upstream bytes consulted or copied**. The landing shape (the in-house `skills/<name>/` home, this section in place of a `PROVENANCE.md`) is [ADR 0220](../../../../docs/adr/<redacted>.md); the sub-command shape (one skill, one playbook per sub-command, what was kept and what was dropped) is [ADR 0221](../../../../docs/adr/<redacted>.md).
+
+What changed in translation, on purpose. The method's **three persisted homes** (product truth, the visual system, per-surface briefs) are the instance's own files here: product truth is `docs/project-context.template.md` and the identity block of the branding pack, the visual system is the root `DESIGN.md` (and a look's `DESIGN.md` under `modules/ui-design/styles/`), and a surface's brief is the claimed task's body and ship notes. This skill creates none of them and writes the root `DESIGN.md` only through the `document` playbook, as a draft on the claim's branch the owner reviews. Everything the panel flagged is **gone, not disabled**: no hook is written anywhere, no child agent runs with permissions bypassed (a reviewer is an ordinary subagent through the harness's own Agent tool), nothing is reported home, nothing is downloaded, and there is no live helper server. The **live loop** is the playwright plugin (a documented prerequisite) driving the module's stub; the **headless loop** is `kit/render.js` and `kit/probe.js`. The **anti-pattern detector** is not shipped here: task 1003329 lands it as rules in `kit/check-mock.js` and `kit/lib.js`, and until then the floor is what the kit already measures. The **native playbooks** (the two mobile platforms) are not rebuilt: every surface on this platform is a served web page, so a native target declines to `/design` with one line. The `init`, `doctor`, `pin`, `unpin` and installer operations, which existed to write and repair the origin's own config and harness entries, have no counterpart: the materialiser is the install. Imagery follows the owner's rule (hero plates only, task 1003328 for the image family); the palette is the pack and a variant is a look from the style library; every motion rule lives inside the Kill Switch.
+
+## Invocation: one name, one sub-command, one target
+
+`impeccable [<sub-command>] [<target>]` where the target is a page path (`/projects`), a surface (`hall-ui`), a file, or a plain description.
+
+- **A sub-command names a playbook.** Load exactly one: `reference/<sub-command>.md` beside this file. Do not load two, do not load the whole set.
+- **No sub-command, but a description** ("the pricing band feels loud") is ordinary design work: pick the playbook whose "when" line fits, say which you picked in one line, and run it. A new surface or a replacement look is not this skill's playbook; it is `design-taste-frontend` for a marketing surface or the plain `/design` loop for a working one, and a new *world* is the owner's decision and an ADR.
+- **Two playbooks plausibly fit** ("clean this up" could be `distill` or `polish`): ask once, with the two names and one line each. Never guess, never run both.
+- **No argument at all**: print the menu below. Never auto-run a command from the menu.
+- **A native mobile target** (an app for either mobile platform, or cross-platform): decline in one line and route to `/design`. The platform serves web surfaces and the native playbooks were not rebuilt.
+
+## The menu (no argument)
+
+Read four live signals, then print two or three recommended next commands with a one-line reason each, followed by the full list grouped by category. Signals, all read locally and none written:
+
+1. **The world files**: does `DESIGN.md` exist at the repo root; is `config/branding.json` present over the neutral pack; is `docs/project-context.template.md` filled or still the scaffold. A scaffold with no answers recommends `shape` first; a missing `DESIGN.md` alone does not make the project greenfield (the neutral pack is the world).
+2. **The last kit report** for the target, if any: `report.json` under `%TMP%/ui-design-kit/<surface>/<page>/` (or the `--out` dir the last run named). Problems listed recommend `audit` on that page; a clean report with no critique yet recommends `critique`; no report at all recommends `audit`, because the render is the read.
+3. **Dirty files in version control**: `git status --porcelain` over the surfaces (`modules/*/public/`, `src/ui/`, `public*/`). Dirty UI files recommend `polish` on that path before anything new.
+4. **A stub already listening**: `kit/serve.js` prints its port when it starts; a page already served means the live loop (the playwright plugin) is available without a second server. Never start a duplicate on an occupied port.
+
+The full list, grouped:
+
+| Category | Sub-commands |
+|---|---|
+| Discover | `shape`, `critique`, `audit` |
+| Build | `polish`, `harden`, `onboard`, `animate`, `colorize`, `typeset`, `layout`, `adapt`, `distill`, `clarify`, `optimize` |
+| Direction | `bolder`, `quieter` |
+| Record | `document`, `extract` |
+
+## Session setup, once
+
+The setup step is the preamble's world load, done **once per session** and not repeated: the pack, the tokens, the root `DESIGN.md`, and `docs/project-context.template.md` for product truth. The directives that come back are the world's own named rules and its Do's and Don'ts; quote them from the files, never from memory. Then, before editing anything, inspect the target **and at least one source of existing visual truth** for it: the sheet the page loads, a sibling component, the page's states file, or a plate under the instance's assets. A surface is edited only after both have been read.
+
+This skill lives at `modules/ui-design/skills/impeccable/` in the core and at `.claude/skills/impeccable/` once materialised into an instance; the playbooks are always `reference/<name>.md` relative to this file. If a harness has put the file somewhere else, resolve the playbooks relative to wherever this file was read from, and fall back to the module path.
+
+## The three homes, and what they are here
+
+| The method's home | On this platform | Written by |
+|---|---|---|
+| Durable product truth (platform, users, purpose, positioning, constraints, brand commitments, principles, accessibility) | `docs/project-context.template.md` plus the branding pack's identity strings | the owner; `shape` records answers in the task, and only proposes edits to the file |
+| The durable visual system | the root `DESIGN.md`; a look's `DESIGN.md` under `modules/ui-design/styles/<name>/` | the owner; `document` drafts one where none exists, from shipped code, on the claim's branch |
+| The per-surface strategy brief | the claimed task's body and its ship notes (the brief block below) | the session, under the claim |
+
+Never merge them into one file, never create a second copy of any of them. **Product truth is required before new visual work begins**: a scaffold with no answers stops the build and starts `shape`. **An existing look is evidence of what the thing is, never authority over what it becomes**; a page's current sheet tells you the world it was built in, and the world file tells you the rules.
+
+**Refinement or redesign, never a blend.** Refinement keeps identity, content, behaviour and everything out of scope; redesign keeps product truth and function and replaces the look. Name which one the request is in the brief block; refusing to split the difference is the rule. The four starting cases branch every playbook: **full redesign** (product truth stays, the look goes, and a new look is a look from the style library or an owner decision), **inherit an established world** (the instance has a `DESIGN.md`: every decision is a lookup), **extend a partial brand** (a pack but no `DESIGN.md`: the pack's fifteen and the platform floors are the rulebook, and the gaps are named, not filled), **no visual authority at all** (the neutral pack is the world; say so). Scale invention to scope: an extension inherits everything, a new surface in a settled world explores structure only, and a new or replacement world is not a session's call. A local addition (a section, a component, a state) inherits the surface it sits in and is never escalated into an identity exercise.
+
+**The brief block**, written into the ship notes before the first edit and kept current:
+
+```
+Brief: <surface> · <refine|redesign> · case <1-4>
+Mode: <persuade|operate|read|experience> (from the surface, not the product)
+Audience / primary action / proof:
+Constraints (the world's named rules that bind here):
+Direction chosen / memorable moment:
+Open decisions:
+```
+
+The visitor mode is picked per surface (a ledger operates, a landing persuades, a policy page reads), persists only in that surface's brief, and changes what every playbook optimises. A brief that already names an era, a material, a face or a palette **overrides this skill's own saturated-pattern warnings**; steering a clear brief toward the agent's taste is the failure, not the pattern.
+
+## The playbooks
+
+| Sub-command | Playbook | When | Returns |
+|---|---|---|---|
+| `shape` | `reference/shape.md` | before any new work, or when the brief has holes | a confirmed written brief; no code, no persistence |
+| `critique` | `reference/critique.md` | "is this good?" | heuristics on a table, personas walked, a cognitive-load pass, three to five prioritised issues with fixes |
+| `audit` | `reference/audit.md` | "is this correct?" | five dimensions scored, every issue with a file and line, nothing fixed |
+| `polish` | `reference/polish.md` | a whole path before ship | every drift classified and fixed at the narrowest correct level |
+| `harden` | `reference/harden.md` | real data is coming | the surface survives long, empty, foreign, failing and huge |
+| `onboard` | `reference/onboard.md` | first run, empty states, a short tour | the fastest path to first value, skippable, never repeated |
+| `animate` | `reference/animate.md` | motion, delight, an ambitious effect | a motion thesis, one focal moment, a reduced-motion path for everything |
+| `colorize` | `reference/colorize.md` | colour feels off | colour by role inside the fifteen, ratios verified from computed values |
+| `typeset` | `reference/typeset.md` | type feels off | the role scale on the pack's faces, measure and tracking verified |
+| `layout` | `reference/layout.md` | order, grouping, rhythm, density | the page restructured, not rescaled |
+| `adapt` | `reference/adapt.md` | another width or context | restructured per context; native declines |
+| `distill` | `reference/distill.md` | too much | elements, options, copy and code removed; function kept through disclosure |
+| `clarify` | `reference/clarify.md` | copy is unclear | interface copy rewritten by its function, flagged to `copy-desk` |
+| `optimize` | `reference/optimize.md` | it feels slow | the measured bottleneck fixed, not the suspected one |
+| `document` | `reference/document.md` | after the build | the design-system doc drafted from shipped code |
+| `extract` | `reference/extract.md` | a pattern repeats | repeated patterns consolidated into the system, call sites migrated |
+| `bolder` | `reference/bolder.md` | one section falls short of its neighbours | one section raised, nothing else touched |
+| `quieter` | `reference/quieter.md` | too loud | saturation, weight, decoration and motion reduced; hierarchy kept |
+
+Every playbook opens by naming which of the four cases it is running in and which visitor mode the brief holds, ends by handing the result to the finish below, and obeys the preamble: the world first, the fifteen as the only colours, hero plates as the only imagery, the switch as the only motion, the kit as the proof.
+
+## The craft floor
+
+Load this **after direction is settled and immediately before editing UI**; skip it for planning-only work (`shape`, `critique`, `audit`, `document` read it, they do not edit); **never recite it to the user**. It is mechanics, not direction: the floor is what every surface clears, the world is what it becomes.
+
+- **Contrast, on the built result**: body and placeholder text at 4.5:1, large text at 3:1, in both modes, measured (`kit/contrast.js` for the pairs, `render.js` for the page). Secondary text on a coloured surface is tinted from that hue (`color-mix()` of the surface and the ink), never a grey dropped on top.
+- **Depth, in the world's language**: where the world has shadows they carry an offset and a soft blur; a zero-offset coloured halo is decoration, not elevation. Where the world is hairlines by rule (the chrome world), the absence of a shadow is the floor, and a hard zero-blur offset shadow belongs only to a world that chose that language.
+- **Spacing rhythm, from computed values**: tight within a group, generous between groups, more air above a heading than below it, every step on the world's scale.
+- **Type**: prose measure 65 to 75 characters; a display ceiling; a tracking floor at display sizes; balanced headings (`text-wrap: balance`) and pretty prose; no overflow with real copy at 1440, 390 and 320.
+- **Motion**: one authored moment, not scattered effects and not the same entrance on every section; easing out from an already-visible default; everything inside the switch; the rest frame complete.
+- **States**: hover, disabled, loading, error and empty, each named in the page's states file; real content, working controls, responsive composition, a visible keyboard focus ring.
+- **The browser surfaces nobody draws**: `::selection`, `caret-color`, the scrollbar, the focus ring, `text-underline-offset`, `font-variant-numeric: tabular-nums` on data.
+- **Refuse**: identical icon-plus-heading-plus-text card grids as page structure; a card nested in a card; the hero-metric template; decorative section numbering; a kicker or eyebrow above a heading where the world bans one (the chrome world does, above the h1); gradient text; decorative glass and blur; a coloured side stripe above a hairline on a card or callout; emoji or unicode glyphs standing in for a drawn icon set; a system display face as the world's display voice (the pack's faces are the voice); a geometric mask faking an organic cutout.
+- **Then commit.** With every check green, the remaining effort goes to the committed world; when torn between refined and committed, commit.
+
+## The finish
+
+Verification is **bounded passes, never an open loop**, and the budget covers the whole cycle: shots, checks, micro-edits and rebuilds all count against it.
+
+1. **Build fully.** Nothing is inspected half-built.
+2. **Inspect once, batched.** `node modules/ui-design/kit/render.js --page <path>` renders every state at 1440 / 390 / 320 in the modes the states file names and audits each against the floors; `node modules/ui-design/kit/probe.js --page <path>` runs the interaction contract. Desktop and mobile arrive in the same round. Validate the captures before believing them: entrance motion settled (the kit's reduced-motion pass is the rest frame), captured from the document top, at the intended dimensions, and each file opened to confirm it shows what its name claims.
+3. **Fix everything it showed in one batch.** Not one finding at a time.
+4. **Confirm with at most one more round.** Then stop.
+
+**The separate reviewer.** Hand the review to a read-only subagent that did not see the build conversation (the harness's Agent tool, the top-tier model, its ordinary permissions), with an explicit packet: the request, the user's answers, the artifact paths, the shots directory, the brief block, the kit's findings, and the approved mock where one exists. The reviewer runs an **evidence check first** and returns `recapture` when any required capture is missing, blank, mismatched or implausibly sized, rather than scoring on broken evidence. It builds its **own inventory** of the approved mock and classifies each salient element as *match*, *acceptable adaptation*, *missing*, *contradicted* or *added without approval*; a deviation is intentional only when it cites a user answer, the brief, an accessibility need or product truth, and an uncited deviation is a defect. Its disposition is **one of four words, derived from its checks**: `clean`, `recapture`, `defects`, `contradicted`; report that word unchanged and at its true scope (a page, not the site). A **second verdict pass** scores each prior fix *resolved*, *partial* or *unresolved* strictly from new captures, opens no new checks, and treats the builder's narration as non-evidence. When the user supplies evidence that contradicts a verdict, **reopen a fresh review** rather than defending the last one.
+
+**Close.** A source diff pass removes accidental churn, orphaned rules, duplicate values and temporary artifacts; then `document` records the design system from what was built. The platform's own ship-time grader is a second independent reviewer and reads the real committed diff, so the ship notes carry the brief block, the shots looked at and in which modes, and the reviewer's word.
+
+## Not here, and where it went
+
+- **The anti-pattern detector**: task 1003329 lands it as rules in `kit/check-mock.js` and `kit/lib.js`; today `check-mock.js` (the platform rules and the instance's `DESIGN.md` bans over a mock), `render.js`'s floors and `contrast.js` are the deterministic floor. Run it once per review round, treat a clean scan as a floor and never as proof, verify every finding in context and name false positives out loud.
+- **The live loop**: `claude plugin install playwright@claude-plugins-official`, a prerequisite the module never installs, driving `kit/serve.js`'s stub (`SURFACE=<dir or module key>`, `STYLE=<look>`). Variants are states in the states file, rendered by the kit; accepting one is a commit and discarding one is a checkout; there is no in-page overlay, no injected script, no journal, and no leftover to sweep because nothing was injected.
+- **Hooks, the bypass agent, telemetry, the remote bundle, the installer, `doctor`, `pin`, `unpin`**: gone. The ship gate is the sweep; the materialiser is the install; a reviewer runs with ordinary permissions.
+- **The asset producer**: images are hero plates and hero objects by token (task 1003328 for the image family); nothing here generates, crops or cleans an image.
+- **Native mobile**: `/design`, with the one principle that survives the drop stated for the record: the platform governs structure, navigation and interaction, and brand expresses through tint, type, motion and content.

package/modules/ui-design/skills/impeccable/reference/adapt.md

@@ -0,0 +1,25 @@
+# `impeccable adapt` — restructure per context, never scale pixels
+
+**When:** a surface built at one width must work at another, or in another context: a phone, a narrow pane, a print sheet, a large-text setting, a kiosk. Edits: yes, on the sheet's context rules and the states file.
+
+**Runs in:** every case. The platform's contexts are the three the kit renders (1440 / 390 / 320), the two modes, the reduced-motion pass and the large-text setting; the world names one breakpoint and the collapse it wants.
+
+## Native declines
+
+An adaptation to a native mobile app, on either platform or cross-platform, is not this playbook: the surfaces here are served web pages and the native playbooks were not rebuilt. Say so in one line and route to `/design`. What survives of the principle is that porting translates idioms and never transplants them, and that a screenshot from a browser is not evidence for a native surface.
+
+## Diagnose per context
+
+For each context, read the shot and answer three questions: what does the visitor do here that they do not do elsewhere (a phone is one-handed and interrupted; a print sheet is read once, without a hover); what breaks (the bar wraps, the headline hits three lines, a table scrolls sideways, a hover-only affordance vanishes); what must survive (the primary action above the fold, the 24px floor, the measure).
+
+## Restructure
+
+- The collapse the world names comes first (the chrome world: a 60px single-row bar under 900, the hero as a static centred column, the ledger one column per row, the basics stacked). Below it, invent nothing that the wider layout does not already contain.
+- A table becomes rows with labelled cells, not a sideways scroll; a menu becomes a disclosure; a hover affordance gains a visible twin.
+- Large text: every container is `min-height` or content-sized, nothing `height`; the bar still holds one row at 200 percent.
+- Print: a `@media print` block that hides the chrome and keeps the content, in ink on the pack's light ground.
+- Nothing scales: the type roles keep their sizes, the controls keep their floor, the composition changes.
+
+## The return
+
+Every context the page serves named as a state or a size the kit renders, ALL CLEAN; `probe.js` PASS at 390; the ship notes list which contexts were adapted and which the page does not serve.

package/modules/ui-design/skills/impeccable/reference/animate.md

@@ -0,0 +1,27 @@
+# `impeccable animate` — motion with a thesis
+
+**When:** motion is asked for, a page feels dead, delight is wanted, or an ambitious effect is proposed. Edits: yes, in CSS only.
+
+**Runs in:** every case; the world's motion grammar (the chrome world: the breath and the drift, a 20s floor on ambient loops, one authored arrival) caps everything below.
+
+## Write the thesis before any keyframe
+
+Three sentences in a comment at the top of the motion rules: **the one focal moment** (what arrives, once, and why the visitor should notice), **the feedback motion** (what answers a press, a hover, a change of state, on the state curve at 200 to 400ms), and **the continuity motion** (what keeps a change from being a cut: a band opening, a row entering). A page has one focal moment; a second is a `quieter` finding.
+
+Choose every property by what it communicates: `opacity` for presence, `transform` for place and scale, `filter` on a plate for atmosphere where the world paints one. Nothing else animates, and never a layout property. Ease out from an already-visible default: the rest frame is the design, and motion is how it is reached, so a page that fails to animate is still the page.
+
+## Delight, earned once
+
+A personality moment is allowed when it is **tied to the product's own mechanism** (a ledger's figure ticking to its new value; a project's orb settling into its shelf), never a generic flourish. One per surface. If the sentence that justifies it is "it looks nice", it goes.
+
+## Ambitious effects
+
+For a technically extraordinary effect, **propose two or three directions first**, each one paragraph with what it costs at 390 and under the switch, and get the person's pick before writing any code. A direction that needs script to move (a spring, a magnetic hover, a pointer-tracked border, a shared-element transition) is named **not available** on this platform and a CSS neighbour is proposed instead; a scroll-driven one goes through `animation-timeline` behind `@supports` with a static fallback.
+
+## The reduced-motion path, for everything
+
+The Kill Switch at the foot of the token layer kills every animation and transition; the rest frame you designed first is what remains. A stagger comes from an `--i` custom property in the markup. A loop moves only plates and respects the world's period floor. Every rule carries a one-sentence comment naming what it communicates.
+
+## The return
+
+The thesis comment; the rules; the kit's reduced-motion pass green (`render.js` fails a page where anything still runs); the ship notes name the focal moment and the shots where it was seen at rest and in flight. Contrast holds at every phase where a ground moves.

package/modules/ui-design/skills/impeccable/reference/audit.md

@@ -0,0 +1,19 @@
+# `impeccable audit` — the technical review
+
+**When:** "is this correct?" The engineering half of a review: what the page does under the platform floors and the world's named rules, documented with locations and **fixed by nothing here**. `polish` fixes; `audit` lists.
+
+**Runs in:** every case. In cases 3 and 4 the world's rules are the pack's fifteen and the platform floors, and an audit row that would need a `DESIGN.md` rule to judge is marked *no rule*, not failed.
+
+## The five dimensions, each scored
+
+Score each 0 to 3 from evidence the kit produced, never from reading the sheet alone: `render.js` for the floors at every state, size and mode, `probe.js` for the interaction contract, `contrast.js` for the pack pairs, `check-mock.js` for a mock. Then read the source for the location of every problem the shots showed.
+
+1. **Accessibility.** Contrast in both modes; a visible focus ring on every control; one `<main>`, one `<header>`, one `<h1>`, a skip link that targets `<main>`; every control at the 24px floor; every image with `alt` or `aria-hidden`; a disclosure pattern on every menu; nothing that reads only by colour.
+2. **Performance.** The largest contentful element is a plate or the headline, never a node a script built; fonts sized-fallback and `font-display: swap`; nothing animates a layout property; no continuous script (`requestAnimationFrame`, timers that touch layout); live DOM is `createElement` and `textContent`.
+3. **Theming.** No literal colour outside black or white with alpha; no page `:root`; every dark rule written twice and byte-identical; no pack colour pinned as a literal; the accent spent only where the world allows.
+4. **Responsive behaviour.** Nothing scrolls sideways at 1440, 390 or 320; the bar holds one row; the headline holds the world's line count at every width; touch targets keep the floor when the layout collapses.
+5. **Implementation integrity.** One sheet, no inline styles, a named `z-index` scale on `body`, no dead selectors, no duplicate values that should be one token, no `innerHTML`, every state in the states file reachable, every probe green.
+
+## The return
+
+A table of issues: **dimension, file and line, what the shot shows, the floor or named rule it breaks, the playbook that fixes it**. Scores per dimension and the total. A row the instance's `DESIGN.md` calls for by name (the chrome world's pure-black dark, its flat bands) is not a defect and is listed under *world-sanctioned* so the next reader does not re-flag it. Save nothing except the ship notes; the kit's `report.json` is the artifact and it is regenerated each run.

package/modules/ui-design/skills/impeccable/reference/bolder.md

@@ -0,0 +1,17 @@
+# `impeccable bolder` — raise one section to its neighbours' conviction
+
+**When:** one named section falls short of the page around it: a band that whispers between two that speak, a call to action that recedes, a headline that apologises. Edits: yes, **inside the named target only**; everything outside it stays byte-identical.
+
+**Runs in:** cases 2 and 3; there is no bolder without a world that already sets the register.
+
+## Only the vocabulary the system already owns
+
+Bolder is not louder. The section is raised to the conviction its neighbours already reach, using only what the world already has: its display size ceiling, its heavier term weight, its one accent (on the pressable and the live only), its full-bleed band, its plate where the composition allows one, its scale of air. Nothing is introduced: no new colour, no new face, no gradient, no glow, no motion the thesis does not already name.
+
+- Read the neighbours first and write down what gives them conviction (a two-line headline at the ceiling, a single door, a plate behind them, a band of air). Then give the target the same devices at the same intensity, not more.
+- One device usually does it. Try the largest lever (size and air) before the smallest (weight), and stop at the first one that brings the section level.
+- If the section cannot reach its neighbours without a device the world lacks, that is a `shape` finding about the section's purpose, not a reason to invent one.
+
+## The return
+
+The diff confined to the target's rules and markup, with one line in the ship notes naming the device used; the page rendered ALL CLEAN at all three widths in both modes; the rest of the page's shots pixel-identical to the before run.

package/modules/ui-design/skills/impeccable/reference/clarify.md

@@ -0,0 +1,25 @@
+# `impeccable clarify` — interface copy by its function
+
+**When:** the words on the surface are unclear: a button that does not say what happens, an error that blames, a label that needs the help text to make sense. Edits: proposed, and applied only where the string is structural (a label, an action); the product's voice belongs to `copy-desk`, so voice changes are flagged to them with the proposed text.
+
+**Runs in:** every case; copy is not world, but the instance's copy bans are (no long dash in visible copy where banned, no emoji, no exclamation in success copy).
+
+## Rewrite by function, not by feel
+
+Every string on the surface has one of seven jobs; classify it first, then apply that job's rule.
+
+| Function | The rule |
+|---|---|
+| **Action** (buttons, links that do) | a verb and its object, in the visitor's words: "Save changes", never "Submit" or "OK"; destructive actions name the loss |
+| **Form** (labels, placeholders, hints) | the label says what to enter, the placeholder shows the shape and is never the label, the hint says the constraint before the mistake |
+| **Error** | what happened, what to do next, in that order, addressed to the situation and never to the visitor's fault; the field it belongs to is named |
+| **Loading** | what is being fetched and, if it is slow, how long; never a spinner with no sentence |
+| **Empty** | what this will hold and the one action that fills it (`onboard` designs the state; this rule writes its line) |
+| **Success** | what is now true, plainly, without an exclamation mark |
+| **Help** | the one fact the visitor cannot infer from the control, and nothing the label already said |
+
+Then the hygiene: sentence case; no long dash where the instance bans it; a number is a number, not "a few"; no placeholder names or invented brands; every string that appears twice appears in one place in the source.
+
+## The return
+
+A table of strings: **location, function, before, after, who owns it** (structural strings changed here; voice strings flagged). The page rendered with the new strings at 390 and 320 so no label wraps into a second row in the bar; the ship notes carry the flag list for `copy-desk`.

package/modules/ui-design/skills/impeccable/reference/colorize.md

@@ -0,0 +1,22 @@
+# `impeccable colorize` — colour by role, inside the fifteen
+
+**When:** colour feels off: too many, too few, an accent spent on the wrong thing, a pairing that fails in one mode. Edits: yes, on the token layer and the rules that read it, never on the pack.
+
+**Runs in:** cases 2 and 3 with the pack as the palette; in case 1 (a redesign) the new palette is a look from `modules/ui-design/styles/` compared with `--style <name>` on the kit and adopted by the owner, never chosen here.
+
+## Assign roles, then map roles to tokens
+
+Write the role list for the surface before touching a value: **ground, surface, ink, ink-muted, rule, accent (pressable and live only), a second voice where the world has one, the status vocabulary the platform owns (green, amber, red on the hall), focus, selection.** Every element on the page takes exactly one role. A role with no token is a `color-mix()` of two that exist (`color-mix(in srgb, var(--ink) 55%, var(--bg))` for a muted ink), declared once on `body`, never a literal.
+
+- The accent lights what is pressable or live; a mark that is neither is ink, rule or nothing.
+- No dark block pins an accent-family token to a literal; dark derives.
+- A coloured surface tints its secondary text from its own hue, so a muted label on the accent is `color-mix()` of the accent and the ink, not a grey.
+- The purple-blue generated gradient, gradient text and a coloured glow are refused on every pack unless the instance's `DESIGN.md` names them.
+
+## Verify from computed values
+
+Ratios are measured, never judged by eye: `node modules/ui-design/kit/contrast.js` for the pack's pairs (`--pack <look>` to measure a look), `render.js` for the page in both modes at every state. Body and placeholder text 4.5:1, large text and non-text 3:1, and where a ground moves under the text, at every phase of the loop. A pairing that fails in one mode is fixed in the role map, not by a mode-specific override that splits the twins.
+
+## The return
+
+The role list as a comment at the head of the token block; every colour on the page a `var()` or a `color-mix()`; the twins byte-identical; the contrast run clean in both modes; the ship notes name any role the world lacks as a gap for the owner, never as a private token this page added.

package/modules/ui-design/skills/impeccable/reference/critique.md

@@ -0,0 +1,15 @@
+# `impeccable critique` — the design review
+
+**When:** "is this good?" A judgement of the surface as a person meets it. Read-only: it returns issues and fixes and edits nothing.
+
+**Runs in:** every case; the visitor mode from the brief sets what "good" means (a persuading page is judged on conviction and the fold, an operating page on error cost and speed, a reading page on measure and rhythm, an experiencing page on the one moment).
+
+## The three passes, in order
+
+1. **The heuristics, scored on a table.** Render the page first (`node modules/ui-design/kit/render.js --page <path>`) and judge the shots, not the source. One row per heuristic, a score from 0 to 2 and one line of evidence: visibility of state, match to the world's vocabulary, control and undo, consistency with the instance's other surfaces, error prevention, recognition over recall, efficiency for the returning visitor, aesthetic restraint, error recovery, help where it is needed. A row with no evidence line is not scored.
+2. **The personas, walked.** Three archetypes and one path each, written as what they see and do at 1440 and at 390: the first-time visitor who has thirty seconds; the returning operator who does this daily and hates every extra click; the visitor with a screen reader, a keyboard, a large text setting or reduced motion. Each walk ends in the moment they would leave, or the moment they were done.
+3. **The cognitive-load checklist.** Count, do not feel: distinct type sizes in view; distinct colours in use; competing calls to action in the first viewport; choices offered before the first meaningful one; things that move; things that need reading before the primary action is understood. Anything above the world's own ceilings (the chrome world: two lines of headline, one accent, one authored motion) is a finding.
+
+## The return
+
+**Three to five issues, prioritised** by cost to the visitor times how often it is met, each with the heuristic or persona that surfaced it, the shot that shows it, and the fix named as the playbook that does it (`clarify` for a copy problem, `layout` for a grouping problem, `distill` for too much, `harden` for a state that breaks). Fewer than three means the page is good and the review says so; more than five means the top five and a line that the rest exist. Where the world calls for something the checklist would count against it, say the world is the answer key and drop the row.

package/modules/ui-design/skills/impeccable/reference/distill.md

@@ -0,0 +1,26 @@
+# `impeccable distill` — remove what does not earn its place
+
+**When:** too much: too many elements, options, words, states, rules. Edits: yes, and they are mostly deletions.
+
+**Runs in:** every case. Distilling toward the world means the surviving elements are the world's components and nothing else.
+
+## The four inventories
+
+Count before cutting. For each inventory, write the list, then mark each entry *earns its place* (the visitor's task needs it, in this mode) or *does not*.
+
+1. **Elements.** Every band, panel, badge, dot, cue, stripe, divider. A decorative status dot, a scroll cue, a version badge, an enumerated section label and a trust strip are the usual first cuts and are banned outright in the chrome world.
+2. **Options.** Every control the visitor can operate: filters, toggles, sorts, secondary actions. An option used by fewer than one visitor in ten goes behind a disclosure; an option nobody would miss goes.
+3. **Copy.** Every sentence: a headline that explains the subhead, a subhead that repeats the headline, a caption under a self-evident control, help text for a labelled field. Tighten to the word; the voice stays `copy-desk`'s and the cuts are flagged to them.
+4. **Code.** Every rule that no selector matches, every token no rule reads, every state no probe reaches, every script that only decorates. Delete, do not comment out.
+
+## Where the function must survive
+
+- **Progressive disclosure**: the rarely-used behind a disclosure control that follows the world's pattern (a button with `aria-expanded` and `aria-controls`), the disclosed content still in the DOM and still a state the kit renders.
+- **Consolidation**: three similar panels become one with a switch; two bands saying one thing become one band.
+- **Defaults**: a choice with an obvious answer becomes the answer, with the choice moved out of the way.
+
+Never remove a state the visitor can reach (error, empty, loading); never remove the skip link, the focus ring or a control's floor; never remove a rule the world names.
+
+## The return
+
+The four inventories with each entry's verdict; the diff mostly red; the page rendered ALL CLEAN with fewer distinct type sizes, colours and gaps than before (state the counts); `probe.js` PASS with the same probes, because function survived.

package/modules/ui-design/skills/impeccable/reference/document.md

@@ -0,0 +1,25 @@
+# `impeccable document` — the design-system doc from shipped code
+
+**When:** after a build, when an instance has no `DESIGN.md`, or when the one it has no longer describes what is served. Writes: a draft, on the claim's branch, that the owner reviews in the PR. **The root `DESIGN.md` is the instance's world; this playbook records it and never invents it.**
+
+**Runs in:** cases 3 and 4 as a seed; case 2 as a refresh. It never runs in the same pass as `shape` (product truth and the visual system are written by different hands at different times).
+
+## Ground truth is what shipped
+
+Scan in this order and record only what repeats (a value used once is not a token): the custom properties on `body` and in the pack; the branding pack's `theme.ui`; `config/design-tokens.json`; the served sheets; the components the surfaces share; last, computed styles sampled from a page through the stub. Group colour into role families; map type onto the fixed hierarchy (display, headline, title, body, label, caption, data); catalogue elevation, or record flatness explicitly where the world is hairlines; keep the project's own colour format.
+
+**Refuse to canonise a defect.** A value the craft floor forbids (a literal hex, a page `:root`, a `100vh` band, a script animation) is reported as *carried* in the draft's notes, never written into the system as a rule. **Refuse to ban a device the world natively uses**: if the chrome world's dark is pure black by decision, the draft does not call pure black a defect.
+
+## The creative layer, asked not derived
+
+Two short rounds of at most three questions each, and only for what the code cannot say: the named metaphor (the world's one sentence), the mood, descriptive names for the colours, the elevation philosophy, and one phrase for how components feel. Answers go into the draft's overview as the owner's words.
+
+## The shape of the draft
+
+The root `DESIGN.md`'s own shape, so the kit's `check-mock.js` can read its bans: frontmatter with the machine-readable tokens (colour, type, radius, spacing, components), then the fixed sections by heading: Overview, Colors (with Modes, The derived tiers, Named Rules), Typography (Hierarchy, Named Rules), Layout, Elevation and Depth, Motion, Shapes, Components, Do's and Don'ts, Accessibility Floors. Sections with nothing real are omitted, never padded. A look's `DESIGN.md` under `modules/ui-design/styles/<name>/` takes the same shape with its thirteen in lockstep with its pack.
+
+**An existing doc is never overwritten silently.** Show it and its drift first, and offer the explicit choice: *refresh* (only the sections that drifted), *overwrite* (the whole draft, the old one in the diff), or *merge* (the draft's new rules appended under the existing headings). A project before its first build gets a *seed* with placeholders marked as such and no derived tiers.
+
+## The return
+
+The draft in the diff under the claim; the drift list in the ship notes; the *carried* defects listed with the playbook that would fix each; nothing written outside the branch.

package/modules/ui-design/skills/impeccable/reference/extract.md

@@ -0,0 +1,20 @@
+# `impeccable extract` — consolidate the repeated pattern into the system
+
+**When:** a pattern repeats across pages or components, or hard-coded values recur where a token should be. Edits: yes, across every call site, with parity proven before the old code is deleted.
+
+**Runs in:** cases 2 and 3; in case 4 there is no system to extract into, and the extraction is a proposal for the owner.
+
+## The threshold
+
+**Three or more** repeats, or a hard-coded value that appears in more than one file. Below that, leave it: one-off extractions, uselessly generic components, a token per value, and merging things that only look alike are the four ways an extraction makes a codebase worse, and each is refused by name in the ship notes when the person asks for it.
+
+## The four steps
+
+1. **Inventory** every occurrence: file, line, the values that differ between them. Differences that are content (a label, a count) become the component's inputs; differences that are drift (a 2px taller bar) become the bug the extraction fixes; a difference that is a real design decision means these are two patterns, not one.
+2. **Consolidate** into the existing system: a token on `body` for a value, a shared rule for a component, a fixture shape for a feed. Into the world's vocabulary (the chrome world's pill, ledger row, poster card), never a new family beside it. A markup pattern the platform's pages share becomes a documented snippet with expanded utilities, inlined marks and namespaced classes, so a page can copy it without a build step.
+3. **Migrate every call site** and **verify parity**: `render.js` for each page before and after with the same states file, shots compared; `probe.js` PASS on each; `contrast.js` unchanged. A call site that cannot reach parity is either the drift being fixed (say which) or a second pattern (stop and split).
+4. **Delete the superseded code** and update the catalogue: the component's line in the root `DESIGN.md` (via `document`, as a draft) and in the surface's nested `CLAUDE.md`.
+
+## The return
+
+The inventory; the one place the pattern now lives; the diff red where the copies were; parity shots named per page; the ship notes carry any refusal (below threshold, two patterns, a decision not a drift) in one line each.

package/modules/ui-design/skills/impeccable/reference/harden.md

@@ -0,0 +1,21 @@
+# `impeccable harden` — make the surface survive
+
+**When:** real data is about to arrive, or a surface was built against the neutral fixtures only. Edits: yes, on the sheet and on the states file, never on the copy's meaning.
+
+**Runs in:** every case; hardening is floors, not world.
+
+## The seven pressures, each a state
+
+Add a state to the page's states file for every pressure below that the page can meet, so the kit renders it forever after instead of a session remembering to look once. The fixtures under `modules/ui-design/kit/fixtures/` are the neutral shapes; a hardening state supplies the hostile ones through the stub's `FAIL=` and `LIVE=` switches or a fixture variant.
+
+1. **Long text**: a name at the field's limit, a title that wraps three times, a URL with no break opportunities. `overflow-wrap: anywhere` on user text, `text-overflow` only where truncation is a decision the brief made, a measure that holds.
+2. **Empty text**: a missing name, an empty list, a zero. Every empty state is designed (`onboard` owns the first-run one; the rest are here), and a zero is a number, not a blank.
+3. **Foreign scripts**: emoji in user text (allowed there; banned in the world's own copy), right-to-left runs inside left-to-right lines (`unicode-bidi: plaintext` on user text), CJK with no spaces, combining marks that grow the line box.
+4. **Translation expansion**: every label survives a 40 percent longer string without clipping or a second row in the bar; no control's width is a magic number.
+5. **Failure**: the feed 5xx, the feed slow, the feed a different shape; a state each, and the page still a complete composition with the failure said in the instance's voice (a string flagged to `copy-desk`, not invented).
+6. **Permission**: signed out, signed in below the rank the surface expects, signed in and disabled; the stub's `AUTH=1` and the fixtures' builder are the two ends.
+7. **Scale**: a list of a thousand rows, a plate that never loads, a table wider than 320. Pagination or a window, never a scroll of the whole document sideways.
+
+## The return
+
+The new states named in the states file and rendered ALL CLEAN in both modes at all three widths; `probe.js` still PASS; the ship notes list which pressures the page could not meet and why (a surface with no user text has no long-text state, and says so). Nothing was made prettier; that is `polish`.

package/modules/ui-design/skills/impeccable/reference/layout.md

@@ -0,0 +1,20 @@
+# `impeccable layout` — reading order, grouping, rhythm, density
+
+**When:** a page reads in the wrong order, groups the wrong things, has no rhythm, or is too dense or too thin for its mode. Edits: yes, on structure and spacing; never a rescale.
+
+**Runs in:** every case. The world supplies the container, the breakpoint, the rhythm scale and the archetypes (the chrome world: full-width bands under a hairline, a 1180px wrap, one breakpoint at 900); this playbook arranges inside them.
+
+## Diagnose four things, from the shots
+
+1. **Reading order.** Read the 1440 shot top-left to bottom-right and write down the order the eye takes; then read the DOM order. Where they differ, the DOM is wrong (a screen reader gets the DOM) or the composition is (the eye gets the composition); fix the one that is wrong, never with `order` alone.
+2. **Grouping.** Things that belong together sit closer to each other than to anything else; a group has one heading, one purpose, one boundary (a hairline, air, never a card where the world bans one). A group with two purposes is two groups.
+3. **Rhythm.** Every vertical gap is a step on the world's scale, tight inside a group and generous between groups, with more above a heading than below it. Measure the computed gaps; a page with eleven distinct gap values has no rhythm.
+4. **Density.** The visitor mode sets it: an operating surface holds more per band than a persuading one. Density is facts per band, not padding; the 24px floor and the measure never give.
+
+## Restructure, do not rescale
+
+The fix is a different arrangement at the same size, never a smaller font or a tighter container to make things fit. Adjacent bands never share a layout family (split, full-bleed, ledger, tile grid, single measure each appear once before any repeats); a grid has exactly as many cells as items; a bento with a filler tile is a list.
+
+## The return
+
+The new structure rendered at all three widths in both modes, ALL CLEAN; `probe.js` still PASS; the ship notes carry the before-and-after reading order as two numbered lists and the gap values as one line.

package/modules/ui-design/skills/impeccable/reference/onboard.md

@@ -0,0 +1,22 @@
+# `impeccable onboard` — first run, empty states, hints and a short tour
+
+**When:** a surface has a first time: an empty ledger, an unconfigured project, a page the visitor has never seen. Edits: yes, but only on the empty and first-run states and whatever carries a hint.
+
+**Runs in:** every case; onboarding is content and sequence, and the world supplies the form.
+
+## The one rule
+
+**The fastest path to first value.** Not the fullest introduction: the shortest sequence from arriving to having done the one thing the surface exists for. Count the steps before the first meaningful result and remove every one that a default could take.
+
+## The four devices, in order of preference
+
+1. **The designed empty state.** The page with nothing in it is a composition, not a blank: what this will hold, the one action that fills it, and nothing else. It uses the world's components (the chrome world's door pill, its hairline bands); it never carries an illustration invented for the occasion, because imagery is hero plates only.
+2. **A contextual hint**, placed where the thing it explains is, shown once, dismissable in one press, and **never shown again after dismissal** (a flag in `localStorage` keyed by the hint, read at render, never a server call). A hint that explains a control the world already makes obvious is removed.
+3. **A short tour**: at most three stops, each one sentence, each pointing at a real element on the page, skippable from the first stop with a control that clears the whole tour. A tour that needs a fourth stop is a `distill` finding on the page.
+4. **Progressive defaults**: a form prefilled with the sensible value so the first submit works, the advanced choices behind a disclosure.
+
+Everything is **always skippable and never repeated after dismissal**. Nothing blocks the page; nothing moves under the visitor's hands; the tour respects the switch like everything else.
+
+## The return
+
+The first-run and empty states named in the states file and rendered; the hints' dismissal proven by a probe (open, dismiss, reload, absent); every string flagged to `copy-desk` in the ship notes because voice is theirs. A one-line note of how many steps the first value now takes, against how many before.

package/modules/ui-design/skills/impeccable/reference/optimize.md

@@ -0,0 +1,22 @@
+# `impeccable optimize` — fix the measured bottleneck
+
+**When:** the surface feels slow, or a review suspects it is. Edits: yes, on whatever the measurement names, and nothing else.
+
+**Runs in:** every case; performance is floors, and the platform's surfaces are static markup, one sheet and script only for live data, so the usual suspects are few.
+
+## Measure first, on the real thing
+
+Suspicion is not a finding. Serve the page through the stub (`kit/serve.js`, the instance's real transforms) and measure with the playwright plugin or the browser's own tooling: the largest contentful paint and which element it was; layout shift and which element moved; the long tasks and which script ran; the bytes and which asset carried them; the render count under a live refresh. Write the numbers down before changing anything. **Fix the one thing the numbers name**, re-measure, and stop when the number is under the floor, not when the code looks fast.
+
+## The floors and their usual causes
+
+- **The largest paint is a plate or the headline**, never a node a script built. Cause: markup built from a fetch; fix: real values baked into the markup and refreshed live.
+- **Nothing shifts.** Cause: an unsized image, a web face without a sized fallback, a band that appears late; fix: `width`/`height` or `aspect-ratio` on every plate, `size-adjust` on the fallback face, the band in the markup from the start.
+- **No layout property animates.** Cause: a transition on `height`, `top`, `margin`; fix: `transform` and `opacity` only, and a `grid-template-rows: 0fr → 1fr` for an opening band.
+- **No continuous script.** Cause: a `requestAnimationFrame` loop, a timer that touches layout; fix: delete it, the switch forbids it anyway.
+- **Bytes**: one sheet, plates as a black JPEG plate plus a WebP alpha cutout at production size, fonts subset to the scripts the copy uses, no library for something CSS does.
+- **Live data** is `createElement` and `textContent` into existing nodes, batched per refresh, never `innerHTML` and never a rebuild of the list.
+
+## The return
+
+The numbers before and after on one line each; the one change and why the measurement named it; `render.js` still ALL CLEAN and `probe.js` still PASS; a note of what was **not** changed because the measurement did not name it.

package/modules/ui-design/skills/impeccable/reference/polish.md

@@ -0,0 +1,22 @@
+# `impeccable polish` — the final pass over a whole path
+
+**When:** a whole user path (sign in, pick a project, open the wizard, finish) before it ships, or after `audit` has listed what is wrong. Edits: yes, and every edit is classified first.
+
+**Runs in:** cases 2 and 3 mostly; a polish in case 4 is limited to the platform floors because there is no world to polish toward.
+
+## Classify every drift before touching it
+
+Walk the path in the kit's shots, every state, both modes, three widths. Each thing that is off goes in one of four buckets, and the bucket decides where the fix lives:
+
+| Bucket | What it looks like | Fix at |
+|---|---|---|
+| **Missing token** | a value the world names but the sheet spells out (a literal radius, a hand-typed grey, a duration) | the token layer on `body`: use the existing token, or name the gap in the ship notes if the world has none |
+| **One-off implementation** | the world's component rebuilt slightly differently on this page (a second pill, a bar that is 2px taller) | the shared rule: reuse the world's component, delete the copy |
+| **Conceptual mismatch** | the page speaks a different mode than its brief (a ledger that persuades, a landing that operates) | the brief, then `layout` or `distill`; not a polish edit |
+| **Local defect** | a typo in a selector, a missing state, a wrong breakpoint, an orphaned rule | the line |
+
+**Fix the cause at the narrowest correct level.** A missing token fixed on one page will drift again on the next; a local defect fixed in the token layer changes every page. Never fix a conceptual mismatch in a polish pass: name it and stop that thread.
+
+## Order and proof
+
+Fix all the local defects in one batch, then the one-offs, then the tokens, rendering once after each batch and never after each edit. A path is polished when `render.js` is ALL CLEAN for every page on it, `probe.js` is PASS, and the ship notes list every drift by bucket with the line that fixed it. The mismatches go to the notes as open decisions with the playbook that owns them.

package/modules/ui-design/skills/impeccable/reference/quieter.md

@@ -0,0 +1,17 @@
+# `impeccable quieter` — reduce without losing the point of view
+
+**When:** the surface is too loud: saturated where it should rest, heavy where it should breathe, decorated where it should be plain, moving where it should be still. Edits: yes, across the surface, each a reduction.
+
+**Runs in:** cases 2 and 3; in case 4 quieter means the neutral pack and the floors, and nothing more.
+
+## Quiet is precision, not grayscale
+
+Reduce four things, in this order, and stop at the first level where the page rests: **saturation** (the accent only on the pressable and the live; a second voice back to the world's second token; every other coloured thing to ink or rule), **weight** (the term weight only where a term is; headlines at the world's display weight; no bold as emphasis in prose), **decoration** (no dots, stripes, glows, badges, numbering, cues; a hairline where a box was; air where a divider was), **motion** (the one focal moment kept, everything else at rest; ambient loops slower or gone).
+
+What must survive, and is checked after each level: **hierarchy** (the eye still lands on the headline, then the action, then the proof), **personality** (the world's display voice, its one warm thing, its plate if it had one), and **the point of view** (a quieter page still argues the same thing; if it now says nothing, the reduction went one level too far and the last step is reverted).
+
+Never quieten by desaturating everything to grey, by lowering contrast below the floor, by hiding a state, or by removing the one plate the composition was built around.
+
+## The return
+
+The four levels applied, named in the ship notes with the level at which the page rested; the page rendered ALL CLEAN in both modes; the contrast run unchanged or better; the counts of distinct colours, weights and moving things before and after on one line.