authoring-hi-fi — SKILL.md

Variant: standard · When to use: producing (or amending) a high-fidelity UI design as runnable, rendered code from the upstream wireframes + design-system — a build seed an engineer can grow into production, gated on a human visual check.

Overview

This skill is the how-to of producing strong, comprehensive high-fidelity UI design as code — the judgment a producer applies, not the section list. The artifact is code that renders to pixels: standalone HTML+Tailwind by default, React+shadcn when the build stack is React (so the seed sits close to the build target and minimizes drift). It assumes a template tool (section structure), a headless browser (agent-browser/Playwright, to render + screenshot), the product's design-system + shadcn (the token + component source of truth), and a research capability. The producer is handed the upstream wireframes (the screens + states + structure) and the design-system (the tokens + component contracts) and realizes every wireframe-named screen — never a blank page, never re-deciding structure.

The signature mechanism is a loop, not a single write: generate → render headlessly → screenshot (per viewport × state) → vision self-review against the DS + wireframe + the bar → refine → repeat to the bar → human visual gate. This requires a vision-capable runtime; a text-only run is blind codegen (degraded — say so, never fake a render).

Two boundaries keep this in lane: hi-fi owns final visuals realized as pixels + the numeric pixel-WCAG judgment (the wireframe only reserved these); it consumes the design-system's tokens (never invents/grades them); it renders the given wireframe structure (never re-decides layout/screens/nav); and it is a build SEED — intentionally thin (no tests, mock data, CDN fine, single-file fine) — not final production code (the build phase rebuilds the data layer, routing, state, tests, perf).

When to activate

• Authoring a new hi-fi design as code from the upstream wireframes + design-system.
• Realizing the key screens (+ their states) a wireframes doc specifies, to rendered pixels.
• Amending an existing hi-fi when a token, screen, shared layout, or referenced component changes (see Step 8).
• Filling a hi-fi template with researched, rendered, decision-complete screens.