Julian/sar

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.3 KiB

Raw Blame History

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.

1.3 KiB Raw Blame History