Phase 03 · Scenario Mapping

The Scenario Skill reads the HTML prototype and generates sequence diagrams — one per scenario ID from requirements.md. Each diagram shows which actor calls which API endpoint, in what order, and what edge cases can occur.

What it produces

logos/resources/prd/3-technical-plan/2-scenario-implementation/ containing Markdown files with Mermaid sequence diagrams.

S01-user-registration.md
S02-login.md
S03-password-reset.md

Sample output

sequenceDiagram
  actor User
  participant App
  participant API
  participant DB

  User->>App: Fill registration form
  App->>API: POST /auth/register
  API->>DB: INSERT users
  DB-->>API: user_id
  API-->>App: 201 Created + JWT
  App-->>User: Redirect to dashboard

Why sequence diagrams come before API design

The diagrams force you to think through the full interaction — not just the happy path. Every edge case in a sequence diagram becomes a test case in Phase 06. Every API call in the diagram becomes an endpoint in Phase 04.

Skipping this step leads to APIs designed in isolation that don't match how the UI actually uses them.

Next step

→ Phase 04 · API Design