7 added, 3 removed. Audit A to A.
---
name: pe-build
description: Write and refine production UI code to a high craft bar. Use for building components, polish and detail work (spacing, typography, color, copy, icons, shadows, interaction states), implementing animation and gestures, implementing accessibility (keyboard, screen readers, focus, forms), and hardening for production (real data, failure states, devices, languages, offline, shipping metadata). Triggers on build, implement, polish, refine, tighten, "feels off", animate, transition, gesture, drawer, make accessible, keyboard navigation, production-ready, edge cases, empty states. The deliverable is code. Not for read-only critique (review) or pre-code design work (design).
license: Apache-2.0
metadata:
provenance: foundry/derivations/build.md in the source repository
---
# Build
Production UI to the craft bar. This spine routes and carries the shared loop; the
craft itself lives in the reference files — load only what the mode needs.
## The loop (every mode)
1. **Boundary** — name the exact target, what must remain unchanged, and the surface's
job (persuade / operate / read / experience); read `DESIGN.md` when present and
- verify it against tokens, components, and rendered output. Preserve the incumbent
- identity: polish is refinement, never a concealed redesign.
+ verify it against tokens, components, and rendered output. Read `.product/approved/`
+ for a record matching the target: an approved artifact ranks above your judgment and
+ below the user's words — implement to it, and state any deviation (constraint,
+ platform, accessibility) before making it, never as a silent improvement. Preserve
+ the incumbent identity: polish is refinement, never a concealed redesign.
2. **Evidence** — read the real code and, where possible, the rendered result before
changing anything.
3. **Triage** — fix in order: blocked tasks and inaccessible paths → missing states
and recovery → flow, hierarchy, responsiveness, drift → visual/copy/motion
inconsistencies → cleanup. Don't perfect one corner while the path stays below bar.
4. **Implement** — complete fixes, in the project's stack and idiom.
5. **Verify** — walk the whole path; check states, viewports, zoom, focus, semantics,
console, layout shift. At most two bounded visual rounds — no open-ended loop.
- 6. **Report** — what changed, what was preserved, what remains.
+ 6. **Report** — what changed, what was preserved, what remains, and the approved record
+ built against (with each stated deviation), when one exists.
## Modes
| Mode | When | Load from `references/` |
| --- | --- | --- |
| **craft** (default) | Components, polish, detail work, "feels off" | `craft/emil-craft.md` for the canon; the domain folders as the work touches them: `craft/ui/` (details: surfaces, icons, enter/exit), `craft/layout/`, `craft/typography/`, `craft/colors/`, `craft/writing/` (each has `index.md`); `craft/polish-lenses.md` for trade-offs; `craft/library-choices.md` before adding a dependency |
| **motion** | Animate, transition, gesture, "feels janky" | `motion/build.md` + `motion/recipes.md`; `motion/apple-design.md` for gesture physics and fluid interfaces; `motion/view-transitions/` for React's View Transition API; `motion/perf-additions.md`; `motion/vocabulary.md` to name an effect |
| **a11y** | Make accessible, keyboard, screen reader, focus, forms | `a11y/index.md`, then its files per subtopic |
| **harden** | Production-ready, edge cases, real data, offline, metadata | `harden/index.md`, `harden/resilience-matrix.md`, `harden/adaptation-patterns.md`, `harden/performance-diagnostics.md`, `harden/metadata.md` |
**Generation guardrail:** when writing new UI from scratch in any mode, also load
`craft/generation-guardrails.md` (terse MUST/NEVER rules).
**Course preference:** if `references/course/` contains files, prefer them for their
topics — `craft-design-rules.md` and friends extend craft; the `motion-*` files extend
and deepen motion (CSS, Motion for React, gestures, scroll, debugging, performance,
reduced-motion snippets, and the motion-brief interview). They are a licensed local
install; never copy from them into tracked files.
## Gates
- **Redesign gate:** changing the visual identity (fonts, palette, layout language) is
forbidden unless the user explicitly asked for a redesign. Only then load
`craft/deslop-audit.md` and work audit-first within the existing stack.
- **Read-only requests are not this skill.** "Review/audit/critique" → hand to
**pe-review**. Findings received from pe-review are implemented here at their stated
file:line.
## House rules (bind every mode)
- Press scale is exactly `0.96`.
- Spring bounce `0` unless the design direction's register is explicitly playful.
- Reduced motion means gentler-not-zero — keep opacity/color transitions.
- Exits use ease-out; accelerate-away only as a stated deliberate choice.
`motion/view-transitions/css-recipes.md` uses `ease-in` on several
`::view-transition-old` (exit) snippets and one enter — apply ease-out instead.
- `will-change` only on observed first-frame stutter, never prophylactically.
- Custom easing from the named curves in the motion references — never invent
novel curves ad hoc.
- Stagger ~30–80ms between list items, ~100ms between semantic groups.
- Never disable submit buttons; validate on submit.
## Name mapping
References that route to `better-*` skills by name resolve inside this skill:
better-ui → `craft/ui/` · better-layout → `craft/layout/` · better-typography →
`craft/typography/` · better-colors → `craft/colors/` · better-writing →
`craft/writing/` · better-accessibility → `a11y/` · better-interface → the pe-review
skill.
## Handoffs
Verdicts and audits → **pe-review**. Direction, mockups, variations → **pe-design**. Standalone brand assets → **pe-brand-assets**. Documenting the
system you built → **pe-design**, understand mode.