← ClaudeAtlas

karvey-mockuplisted

Generate a navigable HTML mockup with 3 levels of depth from approved requirements. Iterate with user until approved, then advance to graphic design. Triggers include "karvey mockup", "generar mockup", "generate mockup", "crear prototipo", "create prototype", "wireframe".
MauricioQuezadaHaintech/karvey · ★ 0 · Testing & QA · score 75
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