julian
17c08e6392
- 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>
95 lines
2.4 KiB
Markdown
95 lines
2.4 KiB
Markdown
# Storyboard Extension
|
|
|
|
**Use when:** Page has multiple sketches (multi-step flows, state changes, transitions)
|
|
|
|
**Base:** Start with [page-specification.template.md](page-specification.template.md)
|
|
|
|
---
|
|
|
|
## What Changes
|
|
|
|
### 1. Add State Flow Overview (before Page Sections)
|
|
|
|
After Reference Materials, add:
|
|
|
|
```markdown
|
|
## State Flow Overview
|
|
|
|
{Brief description of states}
|
|
|
|
|
|
|
|
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
|
|
│ STATE 1 │───▶│ STATE 2 │───▶│ STATE 3 │
|
|
└─────────────┘ └─────────────┘ └─────────────┘
|
|
|
|
| State | Name | Visual | Entry | Actions |
|
|
|-------|------|--------|-------|---------|
|
|
| **1** | {name} | {color/icon} | {trigger} | {actions} |
|
|
| **2** | {name} | {color/icon} | {trigger} | {actions} |
|
|
```
|
|
|
|
---
|
|
|
|
### 2. State 1 = Normal Page Specification
|
|
|
|
Document State 1 using the standard page spec structure:
|
|
- Page Sections
|
|
- Objects with OBJECT IDs
|
|
- Groups with nested objects
|
|
|
|
This is the **baseline** that other states reference.
|
|
|
|
---
|
|
|
|
### 3. States 2+ = Differences Only
|
|
|
|
After State 1, add for each additional state:
|
|
|
|
```markdown
|
|
# State 2: {State Name} — Differences from State 1
|
|
|
|
|
|
|
|
> **The Story:** {User experience narrative}
|
|
|
|
| Property | Value |
|
|
|----------|-------|
|
|
| Purpose | {what this state does} |
|
|
| Entry | {trigger from previous state} |
|
|
| Previous | State 1 |
|
|
| Next | State 3 / {options} |
|
|
|
|
### Changes from State 1
|
|
|
|
| OBJECT ID | Change | Details |
|
|
|-----------|--------|---------|
|
|
| `{existing-id}` | Modified | {what changed} |
|
|
| `{existing-id}` | Hidden | {why hidden} |
|
|
| `{new-id}` | Added | {new element} |
|
|
|
|
### State 2 Elements
|
|
|
|
{Only document NEW objects not in State 1}
|
|
|
|
#### {New Object}
|
|
|
|
**OBJECT ID:** `{page-name}-{new-object}`
|
|
|
|
| Property | Value |
|
|
|----------|-------|
|
|
| Component | [{Component}]({path}) |
|
|
| Translation Key | `{key}` |
|
|
| SE | "{text}" |
|
|
| EN | "{text}" |
|
|
```
|
|
|
|
---
|
|
|
|
## Key Principles
|
|
|
|
1. **State 1 is baseline** — fully documented
|
|
2. **States 2+ show only changes** — reuse OBJECT IDs
|
|
3. **Same IDs across states** — `booking-detail-header` stays the same, just describe what changed
|
|
4. **New elements get new IDs** — only in the state they first appear
|