Files
sar/.agents/skills/wds-4-ux-design/data/modular-architecture/03-quick-refs/decision-tree.md
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.1 KiB

Content Placement Decision Tree

One-page flowchart for file placement


The Decision Tree

┌─────────────────────────────────────────────────┐
│  Does CONTENT vary by page context?             │
│  (text, images, data source)                    │
└────────────┬────────────────────────────────────┘
             │
      ┌──────┴──────┐
      │             │
     YES            NO
      │             │
      ▼             ▼
┌─────────────┐  ┌──────────────┐
│ Page File   │  │ Feature File │
│             │  │              │
│ Document:   │  │ Document:    │
│ - Headings  │  │ - Generic    │
│ - Text      │  │   content    │
│ - Images    │  │ - Default    │
│ - Data API  │  │   config     │
│ - Scope     │  │              │
└─────────────┘  └──────────────┘

Examples

Page File (Content Varies):

  • Hero heading: "Welcome" (Home) vs "About" (About)
  • Search placeholder: "Search products..." vs "Search help..."
  • Calendar header: "Familjen Svensson: Vecka 40" (user's family)
  • Data API: /api/families/:currentFamilyId/walks (user-specific)

Feature File (Content Same Everywhere):

  • Button text: "Submit" (always the same)
  • Error message: "Invalid email" (generic validation)
  • Tooltip: "Click to expand" (generic interaction)
  • Data API: /api/products (same for all users)

Visual Design?

Is this VISUAL design (colors, spacing, states)?
│
└─ YES → Component File
         (Colors, typography, layout, states)

Quick Rule

  • Page File = WHERE + WHAT (page-specific)
  • Component File = HOW IT LOOKS (visual design)
  • Feature File = WHAT IT DOES (functionality + generic content)