# 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