# Storyboard Integration

**Using visual storyboards for complex components**

---

## Core Concepts (01-)

### [What Are Storyboards?](01-what-are-storyboards.md)

Visual documentation of state transitions and flows

### [When to Use Storyboards](01-when-to-use.md)

Complexity indicators that require visual documentation

### [Storyboard Types](01-storyboard-types.md)

State transitions, interaction flows, multi-component sync

---

## Storage & Organization (02-)

### [File Structure](02-file-structure.md)

Where to store storyboards in the three-tier architecture

### [Naming Conventions](02-naming-conventions.md)

How to name storyboard files

---

## Creation Guidelines

### [How to Create Storyboards](creation-guide.md)

Hand-drawn, digital, or annotated screenshots

### [Annotation Best Practices](annotation-guide.md)

Numbering, labels, and visual indicators

---

## Integration

### [Referencing in Feature Files](feature-file-integration.md)

How to link storyboards from specifications

### [Referencing in Component Files](component-file-integration.md)

Visual state references

---

## Examples

### [TaskFlow Task States](examples/task-states.md)

6-state walk booking storyboard

### [Search Flow](examples/search-flow.md)

Multi-step interaction storyboard

---

## Benefits

### [Why Storyboards Work](benefits.md)

Developer clarity, QA testing, design consistency