bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
1.4 KiB
1.4 KiB
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