← ClaudeAtlas

mockupslisted

Render the blueprint's screens as self-contained static HTML mockups — one page per screen plus the state variants the Screens contract pins, styled from design-system tokens — into the repo's gitignored docs/scratchpad/ tree for local browser review. Mockups are realizations, never contract; never pushed to Claude Design, never committed.
virajp/ai-plugins · ★ 1 · Web & Frontend · score 78
Install: claude install-skill virajp/ai-plugins
# mockups — Render Screen Mockups Locally Turn the blueprint's **Screens contracts** into reviewable visuals: one self-contained HTML page per screen (plus each pinned state variant), styled from `design-system.md` tokens, written into the repo's **gitignored `docs/scratchpad/` tree** and reviewed in the user's own browser. Mockups are **never pushed to Claude Design** — the scratchpad is the only render surface. Since blueprint flow passes render and review each flow's screens **in-pass** (blueprint §6a), this command is the **batch / regeneration tool**: re-render everything after a design-system change, refresh a legacy repo, or redo one flow post-hoc. It requires reviewed Screens contracts and a design system, and is **never a gate for `/vwf:plan`**. **Mockups are realizations, not contract.** They are *views* of the blueprint, regenerated at will — each flow's folder is **overwritten in place** on re-render, so paths stay stable and the tree always shows the latest render of every flow. A review remark that changes what a screen should *be* routes through `/vwf:blueprint <flow>` or `/vwf:design-system` — then re-run this command (regenerate-over-edit). Nothing here ever writes into `docs/blueprint/`, and nothing under `docs/scratchpad/` is ever committed. ## Doc Paths | Doc | Path | | ------------- | ----------------------------