Draw-JSON-architecture

One self-contained HTML Architecture Viewer per code flow, built from JSON in the surface's own folder. Walk the seven steps below in order, confirming with the user at each. No file is written until step 7. Long-form detail per step lives in prompts/.

Step 1 — Read the flow

If <flow> is missing, stop with: No flow provided. Re-run as /draw-json-architecture <flow>. Otherwise echo it back and let the user correct the framing. → prompts/01-read-flow.md

Step 2 — Name the surface

Derive a short kebab-case slug from the flow phrase — drop filler words, keep the meaningful nouns ("home screen to order placement" → home-to-order; "user signup" → user-signup). Confirm the folder it will create. → prompts/02-name-the-surface.md

Step 3 — Research the repo, propose stops + lenses

Walk the journey in code, entry to exit. Propose stops (each "thing that happens": page, handler, job, redirect) and lenses (one per dimension you actually saw — ui, database, api, llm, or surface-specific: cache, queue, webhook, …). Cite the file for every lens. Confirm; loop until settled.

Never propose a stop the code lacks. Never propose a lens you haven't seen. → prompts/03-research-the-flow.md

Step 4 — Pick a color per lens