Files
sar/.agents/skills/wds-4-ux-design/data/modular-architecture/00-MODULAR-ARCHITECTURE-GUIDE.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

1.5 KiB

Modular Component Architecture

Navigation hub for the three-tier specification system


Foundation (00-)

Agent-Designer Collaboration

How AI agents optimize designer craft without replacing designer thinking


Core Concepts (01-)

Three-Tier Architecture

Overview of Pages, Components, and Features separation

Content Placement Rules

Decision tree for where to document content

Complexity Detection

How to identify simple vs complex components


Workflows (02-)

Page Specification Workflow

Step-by-step page decomposition from sketch to specs

Complexity Router Workflow

Guided decomposition for complex components

Storyboard Integration

Using visual storyboards for complex components


Examples

Simple Component Example

Button - single file documentation

Complex Component Example

Calendar - three-tier decomposition

Search Bar Example

Search with page-specific content


Quick References (03-)

Decision Tree

One-page flowchart for file placement

Benefits Summary

Why this architecture works