Production UI to a craft bar. Every mode runs the same loop: name the boundary, read the real code and the rendered result, fix in triage order, implement completely, walk the whole path, report what changed and what was preserved.
Say this, get this
| You say | You get |
|---|---|
| “Build the pricing card” | A component in the project’s stack and idiom, at the craft bar |
| “Polish this” | Refinement of the existing identity, with the redesign gate closed |
| “Animate the drawer” | Motion with the house values: press scale 0.96, bounce 0, ease-out exits |
| “Make this accessible” | Keyboard, screen reader, focus, and form semantics implemented |
| “Get this ready for production” | Data extremes, failure states, devices, languages, offline, metadata |
| “Build the approved mock” | Implementation against the record in .product/approved/, with every deviation stated first |
Modes
| Mode | When |
|---|---|
craft (default) |
Components, polish, detail work, “feels off” |
motion |
Animate, transition, gesture, “feels janky” |
a11y |
Make accessible, keyboard, screen reader, focus, forms |
harden |
Production-ready, edge cases, real data, offline, metadata |
Writing new UI from scratch in any mode also loads the generation guardrails. Changing the visual identity requires that you asked for a redesign.
Setup
required |
the project’s code, in its own stack |
optional |
the dev server, so the rendered result can be checked |
optional |
the animations.dev course pack, installed locally by owners with foundry/scripts/course-dropin.sh; it is never committed |
convention |
reads DESIGN.md for tokens and components |
convention |
reads .product/approved/ for a record matching the target and implements to it |
What it produces
Code in your stack, plus a report: what changed, what was preserved, what remains, and the approved record built against with each stated deviation.
House rules in every mode: press scale exactly 0.96; spring bounce 0 unless the
direction is explicitly playful; reduced motion keeps opacity and color transitions;
exits ease out; will-change only on observed stutter; easing from the named curves;
stagger 30 to 80 ms between list items and about 100 ms between groups; submit buttons
stay enabled and validate on submit.
Handoffs
Verdicts and audits: pe-review. Proof that the built feature works, with recordings: pe-verify, the natural last step after harden. Direction, mockups, variations: pe-design. Standalone assets: pe-brand-assets.
Provenance
Carries 47 files from Jakub Krehel (32), Emil Kowalski (6), Vercel (5), Julien Thibeaut (3), Leon (1), and 5 authored here. 20 files from the animations.dev course pack are mapped for owners to install locally and are never distributed. Every vendored file is hash-locked to a pinned upstream commit.
Apache-2.0 · skills/pe-build