gabe-mockuplisted

Playbook for /gabe-mockup execute phases — legacy HTML mockup-project recipes (tokens → atoms → molecules → flows+INDEX → screens → handoff) plus React + Storybook and design-ref modes for React-first apps. Documents tokens.css discipline, Storybook discipline, traceable component stories, design references, Tweaks panel, state-tabs, frame rules, HANDOFF.json, and optional ui-ux-pro-max enrichment. Consumed by /gabe-mockup Step 3.
khujta/gabe-suite · ★ 0 · Web & Frontend · score 60

Install: claude install-skill khujta/gabe-suite

# Gabe Mockup — Playbook Per-phase recipes for `/gabe-mockup` execute step. Covers the canonical 13-phase `mockup-project` preset. Each recipe assumes PLAN.md is already written; this skill only governs HOW each Exec step runs. **Attribution.** `HANDOFF.schema.json` format is a derivative of pbakaus/impeccable `DESIGN.json` v2 (Apache License 2.0). Per §4(c): the derivative schema carries a `NOTICE` line in its file header. Gabe Suite does not bundle impeccable code — only the schema shape for interop. ## Shared conventions (all phases) ### Tokens CSS discipline - **Canonical install path (greenfield):** `docs/mockups/assets/css/tokens.css`. Lives under `assets/` alongside fonts/, icons/, tokens/ (taxonomy data). - **Legacy port:** projects may already have a locked canonical shell (e.g., gastify has `docs/mockups/assets/css/desktop-shell.css` as P1 exit artifact). Keep it; don't rename. tweaks.js detects themes from any loaded stylesheet containing `[data-theme="X"]` selectors — no filename coupling. - Runtime selectors: `[data-theme="<name>"][data-mode="light|dark"]` for theme + mode, `[data-font="<family>"]` for font swap, `[data-density="compact|regular|comfy"]` for spacing scale, `[data-radius="tight|medium|loose"]` for radii. Set by tweaks.js on `<body>`. - **Every screen, atom, molecule, wireframe** imports the canonical CSS via `<link rel="stylesheet" href="../assets/css/<name>.css">` (path depth relative from `screens/<x>.html` etc. — all canonical content dirs