- 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>
1.4 KiB
1.4 KiB
When to Use Storyboards
Complexity indicators that require visual documentation
Create Storyboards For:
✅ Components with 3+ states
- Example (TaskFlow): Task status (TODO, IN_PROGRESS, BLOCKED, DONE, ARCHIVED)
✅ Time-based transitions
- Example (TaskFlow): Deadline reminders, auto-status updates
✅ Multi-step user flows
- Example (TaskFlow): Creating → Assigning → Completing a task
✅ Complex interactions between components
- Example (TaskFlow): Task completion updates dashboard and team notifications
✅ State machines with branching paths
- Example (TaskFlow): Happy path vs validation error vs timeout
Don't Need Storyboards For:
❌ Simple buttons
- Hover and active states are obvious
❌ Static content sections
- No state changes to document
❌ Single-state components
- Nothing to show in sequence
Examples
Need Storyboard:
- TaskFlow: Task status board (5 states, time-based reminders)
- Future Project: Search with autocomplete (5 states, real-time)
- Future Project: Multi-step form (progress tracking)
- Future Project: Payment flow (multiple steps, error handling)
Don't Need Storyboard:
- Submit button (2-3 states)
- Hero image (static)
- Text paragraph (no states)
- Logo (no interaction)