karvey-mockuplisted
Install: claude install-skill MauricioQuezadaHaintech/karvey
# Karvey Mockup — Navigable HTML Prototype
## Purpose
Generate a navigable HTML file with 3 levels of depth before defining the graphic design. The engineer navigates the mockup in the browser, gives feedback, and it's iterated until approval. Only afterward does it advance to graphic design and architecture.
## Target agnosticism
The mockup **adapts to the target declared** in `docs/spec/project.json` (the `targets` field) — see `karvey/rules/targets.md`. **Don't assume web by default:**
- **web** → navigable HTML (App Shell + views + overlays, as described below)
- **mobile (ios/android)** → screen flow (a sequence of screens with transitions, not a desktop sidebar)
- **cli** → command transcript (example terminal input/output)
- **api/backend** → request/response examples (sample payloads per endpoint)
The levels, rules, and HTML structure in the following sections apply to the **web** target. For other targets, generate the target's equivalent artifact and likewise save it under `docs/spec/changes/{change-id}/` (adjusting the extension where appropriate, e.g. `mockup.md` for a CLI transcript or API examples). The rest of the flow (iteration, approval, knowledge sync) is identical.
## Generation modes
- **Normal mode (default)**: a single mockup proposal, iterated with the user until approval (Steps 1 to 6).
- **Shotgun mode (opt-in)**: generate **N variants** of the mockup at once (default **3**) with distinct design approaches, and offer a **comparison board** so