storyboards-guide.md 1.4 KB
Storyboard Integration
Using visual storyboards for complex components
Core Concepts (01-)
What Are Storyboards?
Visual documentation of state transitions and flows
When to Use Storyboards
Complexity indicators that require visual documentation
Storyboard Types
State transitions, interaction flows, multi-component sync
Storage & Organization (02-)
File Structure
Where to store storyboards in the three-tier architecture
Naming Conventions
How to name storyboard files
Creation Guidelines
How to Create Storyboards
Hand-drawn, digital, or annotated screenshots
Annotation Best Practices
Numbering, labels, and visual indicators
Integration
Referencing in Feature Files
How to link storyboards from specifications
Referencing in Component Files
Visual state references
Examples
TaskFlow Task States
6-state walk booking storyboard
Search Flow
Multi-step interaction storyboard
Benefits
Why Storyboards Work
Developer clarity, QA testing, design consistency