← ClaudeAtlas

frontend-sketchlisted

Low-fi UI canvas for sketching screens — drag components, ask Claude to generate frames, promote to high-fi code. Use with /frontend-sketch.
AirMile/claude-config · ★ 0 · Web & Frontend · score 75
Install: claude install-skill AirMile/claude-config
# Sketch Low-fidelity UI sketching canvas powered by Excalidraw. Claude writes frames into `.project/canvas/<slug>.excalidraw`; the browser polls and reloads live. **Pipeline position:** Before `/frontend-design` — use to explore layout ideas, generate multiple screen variants, then `promote` the winner to high-fi code via Convert route. **Related skills:** `/frontend-design` · `/frontend-tokens` · `/project-viewer` --- ## PHASE 0: Pre-flight Check prerequisites: 1. `.project/` exists in the current project directory — if not, ask the user to run `/core-setup` first. 2. `project-viewer` server is reachable (`curl -s http://localhost:9876/ > /dev/null 2>&1`) — if not, start it using the same logic as `/project-viewer` PHASE 1. 3. Canvas template exists at `~/.claude/skills/frontend-sketch/templates/canvas-template.html` — hard error if missing. ``` Pre-flight: .project/ [✓|✗] Server :9876 [✓ running | ✗ starting…] Template [✓|✗] ``` --- ## Router Parse the first positional argument (or default to `generate` when a quoted prompt is the only argument): | Argument starts with | Route | | -------------------- | ----------------------------------- | | `new` | `references/route-new.md` | | `generate` | `references/route-generate.md` | | `promote` | `references/route-promote.md` | | `open` | **inline** (PHASE 2 → print URL) | | _(quoted st