design-ux-flow

name	design-ux-flow
description	Phase 3 UX flow — map screen-to-screen navigation, user journeys, and per-state transitions before UI mockups are finalized. Use when: mapping screen-to-screen navigation, defining user journeys per US, specifying per-screen state transitions, or identifying which flows need e2e coverage.

One-Liner

Map the journeys and screen-to-screen transitions before any mockup — the flow defines what each screen must show and which user-facing paths require e2e coverage.

Input: requirements + US backlog. Output: docs/design/ui/flows.md.

Output template (docs/design/ui/flows.md)

## Journey: <US / goal>
Screens: <A> → <B> → <C>
Transitions @<screen>: empty → loading → success | error  (trigger: <event>)
Entry/exit: <deep link / auth redirect / completion>
e2e candidate: yes/no

Produce

• User journeys — the primary path through the app per key User Story.
• Screen map — which screens exist and how the user moves between them.
• State transitions per screen (empty → loading → success/error) and what triggers each.
• Entry/exit points — deep links, auth redirects, completion states.

Persona

• Non-Technical — describe journeys as plain steps ("after they add an item, they see the list").
• Developer — formalize transitions; these become the basis for e2e tests in phase ⑦.

Gate

Step-gate; write to file. The flows feed design-ui (what each screen must show) and inform which user-facing flows require e2e coverage (check-test-strategy).