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
2.8 KiB
2.8 KiB
Complexity Router Workflow
Step-by-step guided decomposition
Overview
When a complex component is detected, the agent guides you through 3 steps:
- WHERE - Page context
- HOW - Visual design
- WHAT - Functional logic
Step 1: Page Context (WHERE)
Agent asks:
- Which page(s) does this appear on?
- Where on the page?
- How big is it?
- Same component on multiple pages, or page-specific?
- Does CONTENT change based on page context?
- Does DATA source change based on page context?
You answer, agent captures:
- Pages list
- Position
- Size
- Reusability
- Content varies: YES/NO
- Data source varies: YES/NO
Result: Page file specification
Step 2: Visual Design (HOW)
Agent asks:
- How many visual states?
- Do you have a storyboard showing states?
- For each state:
- What does it look like?
- What triggers this state?
- Can it transition to other states?
You answer, agent captures:
- State count
- State definitions
- Storyboard reference (if exists)
- Visual specifications
Result: Component file specification
Step 3: Functional Logic (WHAT)
Agent asks:
- What can users DO with this?
- What happens when they interact?
- Are there business rules?
- Does it need data from an API?
- Does it update other components?
You answer, agent captures:
- User actions
- System responses
- Business rules
- API endpoints
- Component sync
Result: Feature file specification
Example Dialogue
See: Coaching Dialogue Example
Output: Three Files
1. Page File
Pages/02-calendar-page.md
**Component:** walk-slot-card.component.md
**Feature:** walk-booking-logic.feature.md
**Position:** Main content, full-width
**Page-Specific Content:**
- Header: "Familjen Svensson: Vecka 40"
- Data: GET /api/families/:currentFamilyId/walks
2. Component File
Components/walk-slot-card.component.md
**Visual Specifications:**
- 6 states (WHITE, GRAY, ORANGE, BLUE, GREEN, RED)
- Typography, colors, spacing
- Storyboard: Features/Storyboards/walk-states.jpg
3. Feature File
Features/walk-booking-logic.feature.md
**User Interactions:**
- Book walk → GRAY state
- Start walk → BLUE state
**Business Rules:**
- One active walk per dog
- Can't book if slot taken
**API Endpoints:**
- POST /api/walks
- PUT /api/walks/:id/start
Benefits
- ✅ Clean handoffs (designer, developer, AI)
- ✅ Nothing gets missed (all features documented)
- ✅ Easy to maintain (update specs, not code)
- ✅ Design system integrity (consistent patterns)
Next Steps
- Examples - See real decompositions
- Storyboards - Visual documentation