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

2.4 KiB

Raw Blame History

Storyboard Extension

Use when: Page has multiple sketches (multi-step flows, state changes, transitions)

Base: Start with page-specification.template.md

What Changes

1. Add State Flow Overview (before Page Sections)

After Reference Materials, add:

## State Flow Overview

{Brief description of states}

![Overview](Sketches/{page-number}-{page-name}-Overview.jpg)

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│  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:

# State 2: {State Name} — Differences from State 1

![State 2](Sketches/{page-number}-{page-name}-2-{state-name}.jpg)

> **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

State 1 is baseline — fully documented
States 2+ show only changes — reuse OBJECT IDs
Same IDs across states — booking-detail-header stays the same, just describe what changed
New elements get new IDs — only in the state they first appear

2.4 KiB Raw Blame History