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>
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
# What Are Storyboards?
|
||||
|
||||
**Visual documentation of component functionality**
|
||||
|
||||
---
|
||||
|
||||
## Definition
|
||||
|
||||
A **storyboard** is a visual sequence showing:
|
||||
|
||||
- State transitions (empty → loading → active → completed)
|
||||
- User interactions (click, type, swipe)
|
||||
- System responses (updates, animations, feedback)
|
||||
- Time-based changes (countdowns, timers)
|
||||
|
||||
---
|
||||
|
||||
## Format
|
||||
|
||||
**Hand-drawn sketches** (recommended):
|
||||
|
||||
- Quick to create
|
||||
- Easy to iterate
|
||||
- Focus on functionality, not polish
|
||||
|
||||
**Example:** TaskFlow `task-status-states.jpg`
|
||||
|
||||
- 6 frames showing walk states
|
||||
- Numbered sequentially
|
||||
- Annotated with triggers
|
||||
|
||||
---
|
||||
|
||||
## Purpose
|
||||
|
||||
Storyboards answer:
|
||||
|
||||
- "What does this look like in each state?"
|
||||
- "How do users move between states?"
|
||||
- "What triggers each transition?"
|
||||
- "What happens over time?"
|
||||
|
||||
---
|
||||
|
||||
## Why Visual?
|
||||
|
||||
**Text description:**
|
||||
|
||||
```
|
||||
When the user books a walk, the card changes to gray,
|
||||
the leaderboard updates, and the week overview changes.
|
||||
```
|
||||
|
||||
**Storyboard:**
|
||||
|
||||
```
|
||||
Frame 1: WHITE card with "Book" button
|
||||
Frame 2: User taps "Book"
|
||||
Frame 3: GRAY card, leaderboard +1, week circle gray
|
||||
```
|
||||
|
||||
Visual is **faster to understand** and **harder to misinterpret**.
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
- [When to Use Storyboards](01-when-to-use.md)
|
||||
- [Storyboard Types](01-storyboard-types.md)
|
||||
- [Creation Guide](creation-guide.md)
|
||||
Reference in New Issue
Block a user