feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
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
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user