git:20260913.07cd516 to git:20260915.35aa1e1

---

name: wp-demo-craft

description: Reference-first design floor for premium demos: a client DESIGN.md, a composition library, a motion budget and a render-verified loop. Read by /wp-demo in craft mode, /wp-yolo, /wp-cinematic-demo and /wp-demo-verify.

user-invocable: false

---

# Demo Craft

Adapted from nateherkai/scroll-craft (MIT) for the feeling curve and the device

kit; rebuilt in v2 around finished design as context rather than a list of things

to avoid. v1 was a thousand lines of prohibition with no example of a good

section anywhere in it, and it shipped a 12,000px page whose first screen was an

empty dark field with the headline clipped mid-word. A build steered only by what

it must not do has nothing to steer towards.

## When this applies

Any demo built in craft mode, and every cinematic demo. `/wp-demo` records the

decision as `demo mode` in `.wp-create.json`; read it, do not re-derive it.

## Prerequisite

Craft mode needs a browser. Whichever command enters it — `/wp-demo` Step 2.6 or

`/wp-yolo` Step 2 — runs

`node ${CLAUDE_PLUGIN_ROOT}/bin/demo-verify.mjs --probe` before writing markup,

and only exit 0 continues. A craft build is never made blind and never falls back to

plain: an unverified craft page is the one that reaches the client.

## The two spine rules

1. **Real content only.** Real copy, real names, real numbers or no numbers. An

invented statistic is a liability, not a design element.

2. **One peak.** Visibly the largest change on the page, with a quieter section

before it, and the most scroll room. Two peaks is none.

## The order of work

1. **`demo/DESIGN.md`** from the client docs, `designlang` on their site and

named references, then the nearest catalogue matches for the gaps

(`references/design-md.md`). The demo's `:root` is generated from it, so this

file is written before any markup. Check it against the registry before

building, not after (`references/fingerprint.md`): a palette that fails the

gate is cheap to change now and a rebuild later.

2. **`demo/BRIEF.md`**: person, pain, promise, vibe words, references, the

feeling curve, the peak sentence, and any authored silence so verification can

tell it from dead scroll (`references/feel.md`). Self-author it from the

project docs, mark anything invented as "Self-authored, not interviewed", and

ask only what the docs cannot answer. When `demo/RESEARCH.md` exists, each of

person, pain and promise either

**cites the `demo/RESEARCH.md` line and its source URL, or keeps the marker**

— and the marker now means something, because there was an alternative.

`references/grammars.md` — it decides what a section is, what the chrome is

for and what the ending does, and compositions are chosen inside it, not

instead of it. Then one row per section — section, role, composition, why,

motion cost, the domain signal that justified it, citing the brief

constraint from domain classification, or writing "no domain signal" when

none applies (this is what makes the classification bind on the plan instead

of sitting unread); and the research signal — what `demo/RESEARCH.md`'s

`## Signals` says this sector does at this point in the page, and whether

this row follows it or breaks it — or "no research signal" when none

applies — from the role table in `compositions/README.md`

(`references/compositions.md`). That row format is stated in these same terms

`/wp-demo` Step 2.6 uses on purpose — do not restate it a third way. Sum the

motion cost before building and hold it under the budget in `devices.md`.

5. **Loop** until the rubric passes or three rounds are spent

(`references/verify.md`).

(`references/fingerprint.md`).

## Ship blockers

Never ship: content hidden behind a scroll trigger in the first viewport; a page

over the motion budget in `devices.md`, which owns the pin caps, the total and

the interior-page rule and is the only place they are written down; a hardcoded

hex where a token exists; invented statistics; a `slop` finding from

`impeccable detect`; a build that failed the rubric after three rounds.

- A placeholder image, a placeholder logo, or the words "pending", "placeholder"

or "TBD" in rendered text. Spine rule 1 covers copy; this covers everything

else the reader sees. A build once rendered "HERO PHOTOGRAPH PENDING" as its

hero's primary visual and passed "First paint complete", which asks only that a

primary visual be present.

## References

Read `references/taste.md` (the floor), then `design-md.md`, `feel.md`,

`compositions.md`, `grammars.md`, `devices.md`, `fingerprint.md`, `verify.md`.