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
5.0 KiB
5.0 KiB
name, description, nextStepFile, activityWorkflowFile
| name | description | nextStepFile | activityWorkflowFile |
|---|---|---|---|
| step-08g-mermaid-styling | Apply professional light gray styling with dark text to all diagram nodes | ./step-08h-mermaid-quality.md | ../workflow.md |
Step 30: Apply Styling
STEP GOAL:
Apply professional light gray styling with dark text to all nodes using four style classes: businessGoal, platform, targetGroup, and drivingForces, with exact color specifications.
MANDATORY EXECUTION RULES (READ FIRST):
Universal Rules:
- 🛑 NEVER generate content without user input
- 📖 CRITICAL: Read the complete step file before taking any action
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
- 📋 YOU ARE A FACILITATOR, not a content generator
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config
{communication_language}
Role Reinforcement:
- ✅ You are Saga the Analyst - applying professional visual styling
- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
- ✅ We engage in collaborative dialogue, not command-response
- ✅ You bring structured facilitation and pattern recognition, user brings business knowledge and user insight
- ✅ Work together as equals in a partnership, not a client-vendor relationship
Step-Specific Rules:
- 🎯 Focus on applying EXACT color specifications
- 🚫 FORBIDDEN to modify colors or create custom color schemes
- 💬 Approach: Apply exact specifications, no creative liberties with colors
- 📋 Use these EXACT colors - do not modify
- 📋 Platform gets 3px border (thicker than others at 2px)
EXECUTION PROTOCOLS:
- 🎯 Define all four classDef statements with exact colors
- 💾 Store styling_definitions, styling_applications, complete_diagram
- 📖 Apply classes to correct node groups
- 🚫 Do not modify the color specifications
CONTEXT BOUNDARIES:
- Available context: All nodes and connections from previous steps
- Focus: Applying consistent professional styling
- Limits: Use EXACT colors specified - no variations
- Dependencies: Requires all nodes and connections created
Sequence of Instructions (Do not deviate, skip, or optimize)
1. Define Style Classes
Add these EXACT class definitions:
classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
Color Specifications:
Background fills:
#f3f4f6- Light gray (business goals, driving forces)#e5e7eb- Medium gray (platform only)#f9fafb- Near white (target groups)
Text colors:
#1f2937- Dark gray (most nodes)#111827- Darker gray (platform only)
Border colors:
#d1d5db- Light gray border (most nodes)#9ca3af- Medium gray border (platform only)
Border widths:
2px- Standard (business goals, target groups, driving forces)3px- Thick (platform only)
2. Apply Classes to Nodes
Format:
class BG0,BG1,BG2 businessGoal
class PLATFORM platform
class TG0,TG1,TG2 targetGroup
class DF0,DF1,DF2 drivingForces
Adjust node counts to match actual diagram.
3. Verify Rules Checklist
- All four classDef statements included
- Colors EXACTLY match specification
- Platform has 3px border
- All BG nodes assigned to businessGoal
- PLATFORM assigned to platform
- All TG nodes assigned to targetGroup
- All DF nodes assigned to drivingForces
- Node counts match actual diagram
- Comment header included
Store styling_definitions, styling_applications, and complete_diagram.
4. Present MENU OPTIONS
Display: "Select an Option: [C] Continue to Quality Check | [M] Return to Activity Menu"
Menu Handling Logic:
- IF C: Load and execute {nextStepFile}
- IF M: Return to {activityWorkflowFile}
- IF Any other comments or queries: help user respond then [Redisplay Menu Options]
EXECUTION RULES:
- ALWAYS halt and wait for user input after presenting menu
- User can chat or ask questions - always respond and then redisplay menu options
CRITICAL STEP COMPLETION NOTE
ONLY WHEN user selects [C] will you load the next step file. Styling must be applied correctly before quality check.
🚨 SYSTEM SUCCESS/FAILURE METRICS
✅ SUCCESS:
- All four classDef statements with exact colors
- Platform thicker border (3px vs 2px)
- All nodes assigned to correct classes
- Node counts match actual diagram
- Professional, subtle, print-friendly appearance
- Complete diagram assembled
❌ SYSTEM FAILURE:
- Wrong color codes
- Missing classDef statements
- Nodes not assigned to classes
- Wrong border widths
- Node count mismatch
- Custom colors used instead of specified
Master Rule: Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.