journey-mappinglisted

# Journey Mapping — the full UI/UX flow Map the end-to-end journey across frontend AND backend: screens, states, user decisions, and the backend calls/events behind each step. This is the bridge between *what* (PRD) and *how* (stack, modules, build). Run at the frontier model for quality (the `ui-ux-designer` agent). ## Fits in the pipeline - **Stage 2** (`/journey`). Input: the approved PRD. Output: an approved journey the architect uses for Stage 3 (stack) and Stage 4 (modules). Owned by `ui-ux-designer`. ## The auto-switch rule (Mermaid vs interactive canvas) Pick the representation by complexity — don't make the user ask: - **Simple journey → Mermaid diagram.** Few screens, mostly linear, limited branching. Render a Mermaid `flowchart` inline. Fast, diffable, version-controllable. - **Complex journey → interactive local canvas.** Many nodes, heavy branching, parallel flows, multiple personas, or a graph that's unreadable as static text. Switch to the drag-and-drop canvas so the user can rearrange steps, add comments, connect nodes, and insert sections. **Heuristic for "complex":** roughly > 12–15 nodes, OR > 3 branch points, OR multiple personas with crossing paths, OR the user is iterating heavily on layout. When in doubt, start in Mermaid and offer to promote to the canvas — state the switch and why. ## Readability rules — a journey is a human approval gate, not a data dump The Stage-2 gate is a **person** (often non-technical) approving the flow in ~5 min