Files
sar/.claude/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

72 lines
1.5 KiB
Markdown

# Modular Component Architecture
**Navigation hub for the three-tier specification system**
---
## Foundation (00-)
### [Agent-Designer Collaboration](00-foundation/agent-designer-collaboration.md)
How AI agents optimize designer craft without replacing designer thinking
---
## Core Concepts (01-)
### [Three-Tier Architecture](01-core-concepts/three-tier-overview.md)
Overview of Pages, Components, and Features separation
### [Content Placement Rules](01-core-concepts/content-placement-rules.md)
Decision tree for where to document content
### [Complexity Detection](01-core-concepts/complexity-detection.md)
How to identify simple vs complex components
---
## Workflows (02-)
### [Page Specification Workflow](02-workflows/page-specification-workflow.md)
Step-by-step page decomposition from sketch to specs
### [Complexity Router Workflow](02-workflows/complexity-router-workflow.md)
Guided decomposition for complex components
### [Storyboard Integration](02-workflows/storyboards/storyboards-guide.md)
Using visual storyboards for complex components
---
## Examples
### [Simple Component Example](examples/simple-button.md)
Button - single file documentation
### [Complex Component Example](examples/complex-calendar.md)
Calendar - three-tier decomposition
### [Search Bar Example](examples/search-bar.md)
Search with page-specific content
---
## Quick References (03-)
### [Decision Tree](03-quick-refs/decision-tree.md)
One-page flowchart for file placement
### [Benefits Summary](03-quick-refs/benefits.md)
Why this architecture works