- 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>
2.2 KiB
Benefits of Three-Tier Architecture
Why this approach works
1. Prevents Overwhelming Specs
Before:
- 800-line monolithic file
- Everything mixed together
- Hard to find anything
After:
- 3 focused files (100-200 lines each)
- Clear separation
- Easy to navigate
2. Clean Handoffs
Visual Designer receives:
Components/folder only- Clear visual specifications
- Creates Figma components
Developer receives:
Features/folder only- Clear business logic
- Implements functionality
You maintain:
Pages/folder- Design system integrity
- Page-specific content
3. Nothing Gets Missed
Problem: Prototype missing leaderboard, week view wrong
Cause: Monolithic spec, developer overwhelmed
Solution:
- Component file lists ALL visual elements
- Feature file lists ALL interactions
- Storyboard shows ALL states
- Nothing gets missed
4. Easy to Update
Change request: "Add countdown timers"
Before (Code):
- Regenerate code
- Previous features break
- 2+ hours fixing
After (Spec):
- Update Feature file (15 minutes)
- Regenerate with full context
- Everything works
5. Reusability
Same component, different pages:
Pages/02-calendar-page.md ──┐
Pages/05-dashboard.md ──────┼→ Components/calendar-widget.component.md
Pages/08-mobile-view.md ────┘ ↓
Features/calendar-logic.feature.md
Update Component or Feature once, all pages benefit.
6. Team Collaboration
UX Designers → Focus on Components/ (Figma specs)
Developers → Focus on Features/ (logic implementation)
Content Writers → Focus on Pages/ (translations)
Product Managers → Focus on Features/ (business rules)
Everyone works in parallel, no conflicts.
7. Design System Integrity
Page files reference components:
**Component:** button-primary.component.md
Ensures consistency across pages.
Easy to update design system globally.
ROI
Time saved per feature: 2 hours
Over 10 features: 20 hours
Over product lifecycle: 100+ hours
Quality improvement:
- Zero missing features
- Consistent design
- Maintainable codebase