Files
julian 17c08e6392 chore: initial monorepo scaffold + WDS Phase 1+2 artifacts
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24)
- apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004)
- apps/web: React 19 + Vite 8 (ESM)
- libs/shared/api-interface: Zod contract base
- Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit
- WDS artifacts:
  - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs)
  - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact)
- Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md
- AGENTS.md + README.md como entrada para devs/agentes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 14:34:20 +00:00

1.6 KiB

Storyboard File Structure

Where to store storyboards in the three-tier architecture


Storage Location

project-root/
├─ Pages/
│  └─ 02-calendar-page.md
│
├─ Components/
│  └─ walk-slot-card.component.md
│
├─ Features/
│  ├─ walk-booking-logic.feature.md
│  └─ Storyboards/                    ← Store here
│     ├─ walk-state-transitions.jpg
│     ├─ booking-flow.jpg
│     └─ calendar-sync-flow.jpg
│
└─ Sketches/                          ← Page sketches
   └─ 02-calendar-page-sketch.jpg

Why Features/Storyboards/?

Storyboards document functionality, not visual design:

  • State transitions (functional)
  • User interactions (functional)
  • Business logic flows (functional)

Therefore, they belong with Features, not Components.


Reference Pattern

From Feature File:

Features/walk-booking-logic.feature.md

## Visual Storyboard

![Walk State Transitions](Storyboards/walk-state-transitions.jpg)

From Component File:

Components/walk-slot-card.component.md

## Visual States

See storyboard for state transitions:
→ Features/Storyboards/walk-state-transitions.jpg

Separation from Page Sketches

Page Sketches (Sketches/ folder):

  • Show page layout
  • Static view of entire page
  • Used during initial design

Storyboards (Features/Storyboards/ folder):

  • Show component behavior
  • Sequential frames showing changes
  • Used during specification

Next Steps