observer-ggboy-bmad-method 6.0.0-alpha.23

package/src/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-08-visual-foundation.md

@@ -0,0 +1,224 @@
+# Step 8: Visual Foundation
+
+## MANDATORY EXECUTION RULES (READ FIRST):
+
+- 🛑 NEVER generate content without user input
+
+- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
+- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
+- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
+- 📋 YOU ARE A UX FACILITATOR, not a content generator
+- 💬 FOCUS on establishing visual design foundation (colors, typography, spacing)
+- 🎯 COLLABORATIVE discovery, not assumption-based design
+- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Show your analysis before taking any action
+- ⚠️ Present A/P/C menu after generating visual foundation content
+- 💾 ONLY save when user chooses C (Continue)
+- 📖 Update output file frontmatter, adding this step to the end of the list of stepsCompleted.
+- 🚫 FORBIDDEN to load next step until C is selected
+
+## COLLABORATION MENUS (A/P/C):
+
+This step will generate content and present choices:
+
+- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper visual insights
+- **P (Party Mode)**: Bring multiple perspectives to define visual foundation
+- **C (Continue)**: Save the content to the document and proceed to next step
+
+## PROTOCOL INTEGRATION:
+
+- When 'A' selected: Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml
+- When 'P' selected: Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md
+- PROTOCOLS always return to this step's A/P/C menu
+- User accepts/rejects protocol changes before proceeding
+
+## CONTEXT BOUNDARIES:
+
+- Current document and frontmatter from previous steps are available
+- Design system choice from step 6 provides component foundation
+- Emotional response goals from step 4 inform visual decisions
+- Focus on colors, typography, spacing, and layout foundation
+
+## YOUR TASK:
+
+Establish the visual design foundation including color themes, typography, and spacing systems.
+
+## VISUAL FOUNDATION SEQUENCE:
+
+### 1. Brand Guidelines Assessment
+
+Check for existing brand requirements:
+"Do you have existing brand guidelines or a specific color palette I should follow? (y/n)
+
+If yes, I'll extract and document your brand colors and create semantic color mappings.
+If no, I'll generate theme options based on your project's personality and emotional goals from our earlier discussion."
+
+### 2. Generate Color Theme Options (If no brand guidelines)
+
+Create visual exploration opportunities:
+"If no existing brand guidelines, I'll create a color theme visualizer to help you explore options.
+
+🎨 I can generate comprehensive HTML color theme visualizers with multiple theme options, complete UI examples, and the ability to see how colors work in real interface contexts.
+
+This will help you make an informed decision about the visual direction for {{project_name}}."
+
+### 3. Define Typography System
+
+Establish the typographic foundation:
+"**Typography Questions:**
+
+- What should the overall tone feel like? (Professional, friendly, modern, classic?)
+- How much text content will users read? (Headings only? Long-form content?)
+- Any accessibility requirements for font sizes or contrast?
+- Any brand fonts we must use?
+
+**Typography Strategy:**
+
+- Choose primary and secondary typefaces
+- Establish type scale (h1, h2, h3, body, etc.)
+- Define line heights and spacing relationships
+- Consider readability and accessibility"
+
+### 4. Establish Spacing and Layout Foundation
+
+Define the structural foundation:
+"**Spacing and Layout Foundation:**
+
+- How should the overall layout feel? (Dense and efficient? Airy and spacious?)
+- What spacing unit should we use? (4px, 8px, 12px base?)
+- How much white space should be between elements?
+- Should we use a grid system? If so, what column structure?
+
+**Layout Principles:**
+
+- [Layout principle 1 based on product type]
+- [Layout principle 2 based on user needs]
+- [Layout principle 3 based on platform requirements]"
+
+### 5. Create Visual Foundation Strategy
+
+Synthesize all visual decisions:
+"**Visual Foundation Strategy:**
+
+**Color System:**
+
+- [Color strategy based on brand guidelines or generated themes]
+- Semantic color mapping (primary, secondary, success, warning, error, etc.)
+- Accessibility compliance (contrast ratios)
+
+**Typography System:**
+
+- [Typography strategy based on content needs and tone]
+- Type scale and hierarchy
+- Font pairing rationale
+
+**Spacing & Layout:**
+
+- [Spacing strategy based on content density and platform]
+- Grid system approach
+- Component spacing relationships
+
+This foundation will ensure consistency across all our design decisions."
+
+### 6. Generate Visual Foundation Content
+
+Prepare the content to append to the document:
+
+#### Content Structure:
+
+When saving to document, append these Level 2 and Level 3 sections:
+
+```markdown
+## Visual Design Foundation
+
+### Color System
+
+[Color system strategy based on conversation]
+
+### Typography System
+
+[Typography system strategy based on conversation]
+
+### Spacing & Layout Foundation
+
+[Spacing and layout foundation based on conversation]
+
+### Accessibility Considerations
+
+[Accessibility considerations based on conversation]
+```
+
+### 7. Present Content and Menu
+
+Show the generated visual foundation content and present choices:
+"I've established the visual design foundation for {{project_name}}. This provides the building blocks for consistent, beautiful design.
+
+**Here's what I'll add to the document:**
+
+[Show the complete markdown content from step 6]
+
+**What would you like to do?**
+[A] Advanced Elicitation - Let's refine our visual foundation
+[P] Party Mode - Bring design perspectives on visual choices
+[C] Continue - Save this to the document and move to design directions
+
+### 8. Handle Menu Selection
+
+#### If 'A' (Advanced Elicitation):
+
+- Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml with the current visual foundation content
+- Process the enhanced visual insights that come back
+- Ask user: "Accept these improvements to the visual foundation? (y/n)"
+- If yes: Update content with improvements, then return to A/P/C menu
+- If no: Keep original content, then return to A/P/C menu
+
+#### If 'P' (Party Mode):
+
+- Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md with the current visual foundation
+- Process the collaborative visual insights that come back
+- Ask user: "Accept these changes to the visual foundation? (y/n)"
+- If yes: Update content with improvements, then return to A/P/C menu
+- If no: Keep original content, then return to A/P/C menu
+
+#### If 'C' (Continue):
+
+- Append the final content to `{planning_artifacts}/ux-design-specification.md`
+- Update frontmatter: append step to end of stepsCompleted array
+- Load `./step-09-design-directions.md`
+
+## APPEND TO DOCUMENT:
+
+When user selects 'C', append the content directly to the document using the structure from step 6.
+
+## SUCCESS METRICS:
+
+✅ Brand guidelines assessed and incorporated if available
+✅ Color system established with accessibility consideration
+✅ Typography system defined with appropriate hierarchy
+✅ Spacing and layout foundation created
+✅ Visual foundation strategy documented
+✅ A/P/C menu presented and handled correctly
+✅ Content properly appended to document when C selected
+
+## FAILURE MODES:
+
+❌ Not checking for existing brand guidelines first
+❌ Color palette not aligned with emotional goals
+❌ Typography not suitable for content type or readability needs
+❌ Spacing system not appropriate for content density
+❌ Missing accessibility considerations
+❌ Not presenting A/P/C menu after content generation
+❌ Appending content without user selecting 'C'
+
+❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
+❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
+❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
+
+## NEXT STEP:
+
+After user selects 'C' and content is saved to document, load `./step-09-design-directions.md` to generate design direction mockups.
+
+Remember: Do NOT proceed to step-09 until user explicitly selects 'C' from the A/P/C menu and content is saved!

package/src/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-09-design-directions.md

@@ -0,0 +1,224 @@
+# Step 9: Design Direction Mockups
+
+## MANDATORY EXECUTION RULES (READ FIRST):
+
+- 🛑 NEVER generate content without user input
+
+- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
+- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
+- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
+- 📋 YOU ARE A UX FACILITATOR, not a content generator
+- 💬 FOCUS on generating and evaluating design direction variations
+- 🎯 COLLABORATIVE exploration, not assumption-based design
+- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Show your analysis before taking any action
+- ⚠️ Present A/P/C menu after generating design direction content
+- 💾 Generate HTML visualizer for design directions
+- 📖 Update output file frontmatter, adding this step to the end of the list of stepsCompleted.
+- 🚫 FORBIDDEN to load next step until C is selected
+
+## COLLABORATION MENUS (A/P/C):
+
+This step will generate content and present choices:
+
+- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper design insights
+- **P (Party Mode)**: Bring multiple perspectives to evaluate design directions
+- **C (Continue)**: Save the content to the document and proceed to next step
+
+## PROTOCOL INTEGRATION:
+
+- When 'A' selected: Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml
+- When 'P' selected: Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md
+- PROTOCOLS always return to this step's A/P/C menu
+- User accepts/rejects protocol changes before proceeding
+
+## CONTEXT BOUNDARIES:
+
+- Current document and frontmatter from previous steps are available
+- Visual foundation from step 8 provides design tokens
+- Core experience from step 7 informs layout and interaction design
+- Focus on exploring different visual design directions
+
+## YOUR TASK:
+
+Generate comprehensive design direction mockups showing different visual approaches for the product.
+
+## DESIGN DIRECTIONS SEQUENCE:
+
+### 1. Generate Design Direction Variations
+
+Create diverse visual explorations:
+"I'll generate 6-8 different design direction variations exploring:
+
+- Different layout approaches and information hierarchy
+- Various interaction patterns and visual weights
+- Alternative color applications from our foundation
+- Different density and spacing approaches
+- Various navigation and component arrangements
+
+Each mockup will show a complete vision for {{project_name}} with all our design decisions applied."
+
+### 2. Create HTML Design Direction Showcase
+
+Generate interactive visual exploration:
+"🎨 Design Direction Mockups Generated!
+
+I'm creating a comprehensive HTML design direction showcase at `{planning_artifacts}/ux-design-directions.html`
+
+**What you'll see:**
+
+- 6-8 full-screen mockup variations
+- Interactive states and hover effects
+- Side-by-side comparison tools
+- Complete UI examples with real content
+- Responsive behavior demonstrations
+
+Each mockup represents a complete visual direction for your app's look and feel."
+
+### 3. Present Design Exploration Framework
+
+Guide evaluation criteria:
+"As you explore the design directions, look for:
+
+✅ **Layout Intuitiveness** - Which information hierarchy matches your priorities?
+✅ **Interaction Style** - Which interaction style fits your core experience?
+✅ **Visual Weight** - Which visual density feels right for your brand?
+✅ **Navigation Approach** - Which navigation pattern matches user expectations?
+✅ **Component Usage** - How well do the components support your user journeys?
+✅ **Brand Alignment** - Which direction best supports your emotional goals?
+
+Take your time exploring - this is a crucial decision that will guide all our design work!"
+
+### 4. Facilitate Design Direction Selection
+
+Help user choose or combine elements:
+"After exploring all the design directions:
+
+**Which approach resonates most with you?**
+
+- Pick a favorite direction as-is
+- Combine elements from multiple directions
+- Request modifications to any direction
+- Use one direction as a base and iterate
+
+**Tell me:**
+
+- Which layout feels most intuitive for your users?
+- Which visual weight matches your brand personality?
+- Which interaction style supports your core experience?
+- Are there elements from different directions you'd like to combine?"
+
+### 5. Document Design Direction Decision
+
+Capture the chosen approach:
+"Based on your exploration, I'm understanding your design direction preference:
+
+**Chosen Direction:** [Direction number or combination]
+**Key Elements:** [Specific elements you liked]
+**Modifications Needed:** [Any changes requested]
+**Rationale:** [Why this direction works for your product]
+
+This will become our design foundation moving forward. Are we ready to lock this in, or do you want to explore variations?"
+
+### 6. Generate Design Direction Content
+
+Prepare the content to append to the document:
+
+#### Content Structure:
+
+When saving to document, append these Level 2 and Level 3 sections:
+
+```markdown
+## Design Direction Decision
+
+### Design Directions Explored
+
+[Summary of design directions explored based on conversation]
+
+### Chosen Direction
+
+[Chosen design direction based on conversation]
+
+### Design Rationale
+
+[Rationale for design direction choice based on conversation]
+
+### Implementation Approach
+
+[Implementation approach based on chosen direction]
+```
+
+### 7. Present Content and Menu
+
+Show the generated design direction content and present choices:
+"I've documented our design direction decision for {{project_name}}. This visual approach will guide all our detailed design work.
+
+**Here's what I'll add to the document:**
+
+[Show the complete markdown content from step 6]
+
+**What would you like to do?**
+[A] Advanced Elicitation - Let's refine our design direction
+[P] Party Mode - Bring different perspectives on visual choices
+[C] Continue - Save this to the document and move to user journey flows
+
+### 8. Handle Menu Selection
+
+#### If 'A' (Advanced Elicitation):
+
+- Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml with the current design direction content
+- Process the enhanced design insights that come back
+- Ask user: "Accept these improvements to the design direction? (y/n)"
+- If yes: Update content with improvements, then return to A/P/C menu
+- If no: Keep original content, then return to A/P/C menu
+
+#### If 'P' (Party Mode):
+
+- Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md with the current design direction
+- Process the collaborative design insights that come back
+- Ask user: "Accept these changes to the design direction? (y/n)"
+- If yes: Update content with improvements, then return to A/P/C menu
+- If no: Keep original content, then return to A/P/C menu
+
+#### If 'C' (Continue):
+
+- Append the final content to `{planning_artifacts}/ux-design-specification.md`
+- Update frontmatter: append step to end of stepsCompleted array
+- Load `./step-10-user-journeys.md`
+
+## APPEND TO DOCUMENT:
+
+When user selects 'C', append the content directly to the document using the structure from step 6.
+
+## SUCCESS METRICS:
+
+✅ Multiple design direction variations generated
+✅ HTML showcase created with interactive elements
+✅ Design evaluation criteria clearly established
+✅ User able to explore and compare directions effectively
+✅ Design direction decision made with clear rationale
+✅ A/P/C menu presented and handled correctly
+✅ Content properly appended to document when C selected
+
+## FAILURE MODES:
+
+❌ Not creating enough variation in design directions
+❌ Design directions not aligned with established foundation
+❌ Missing interactive elements in HTML showcase
+❌ Not providing clear evaluation criteria
+❌ Rushing decision without thorough exploration
+❌ Not presenting A/P/C menu after content generation
+❌ Appending content without user selecting 'C'
+
+❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
+❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
+❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
+
+## NEXT STEP:
+
+After user selects 'C' and content is saved to document, load `./step-10-user-journeys.md` to design user journey flows.
+
+Remember: Do NOT proceed to step-10 until user explicitly selects 'C' from the A/P/C menu and content is saved!

package/src/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-10-user-journeys.md

@@ -0,0 +1,241 @@
+# Step 10: User Journey Flows
+
+## MANDATORY EXECUTION RULES (READ FIRST):
+
+- 🛑 NEVER generate content without user input
+
+- 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
+- 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
+- ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
+- 📋 YOU ARE A UX FACILITATOR, not a content generator
+- 💬 FOCUS on designing user flows and journey interactions
+- 🎯 COLLABORATIVE flow design, not assumption-based layouts
+- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Show your analysis before taking any action
+- ⚠️ Present A/P/C menu after generating user journey content
+- 💾 ONLY save when user chooses C (Continue)
+- 📖 Update output file frontmatter, adding this step to the end of the list of stepsCompleted.
+- 🚫 FORBIDDEN to load next step until C is selected
+
+## COLLABORATION MENUS (A/P/C):
+
+This step will generate content and present choices:
+
+- **A (Advanced Elicitation)**: Use discovery protocols to develop deeper journey insights
+- **P (Party Mode)**: Bring multiple perspectives to design user flows
+- **C (Continue)**: Save the content to the document and proceed to next step
+
+## PROTOCOL INTEGRATION:
+
+- When 'A' selected: Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml
+- When 'P' selected: Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md
+- PROTOCOLS always return to this step's A/P/C menu
+- User accepts/rejects protocol changes before proceeding
+
+## CONTEXT BOUNDARIES:
+
+- Current document and frontmatter from previous steps are available
+- Design direction from step 9 informs flow layout and visual design
+- Core experience from step 7 defines key journey interactions
+- Focus on designing detailed user flows with Mermaid diagrams
+
+## YOUR TASK:
+
+Design detailed user journey flows for critical user interactions.
+
+## USER JOURNEY FLOWS SEQUENCE:
+
+### 1. Load PRD User Journeys as Foundation
+
+Start with user journeys already defined in the PRD:
+"Great! Since we have the PRD available, let's build on the user journeys already documented there.
+
+**Existing User Journeys from PRD:**
+I've already loaded these user journeys from your PRD:
+[Journey narratives from PRD input documents]
+
+These journeys tell us **who** users are and **why** they take certain actions. Now we need to design **how** those journeys work in detail.
+
+**Critical Journeys to Design Flows For:**
+Looking at the PRD journeys, I need to design detailed interaction flows for:
+
+- [Critical journey 1 identified from PRD narratives]
+- [Critical journey 2 identified from PRD narratives]
+- [Critical journey 3 identified from PRD narratives]
+
+The PRD gave us the stories - now we design the mechanics!"
+
+### 2. Design Each Journey Flow
+
+For each critical journey, design detailed flow:
+
+**For [Journey Name]:**
+"Let's design the flow for users accomplishing [journey goal].
+
+**Flow Design Questions:**
+
+- How do users start this journey? (entry point)
+- What information do they need at each step?
+- What decisions do they need to make?
+- How do they know they're progressing successfully?
+- What does success look like for this journey?
+- Where might they get confused or stuck?
+- How do they recover from errors?"
+
+### 3. Create Flow Diagrams
+
+Visualize each journey with Mermaid diagrams:
+"I'll create detailed flow diagrams for each journey showing:
+
+**[Journey Name] Flow:**
+
+- Entry points and triggers
+- Decision points and branches
+- Success and failure paths
+- Error recovery mechanisms
+- Progressive disclosure of information
+
+Each diagram will map the complete user experience from start to finish."
+
+### 4. Optimize for Efficiency and Delight
+
+Refine flows for optimal user experience:
+"**Flow Optimization:**
+For each journey, let's ensure we're:
+
+- Minimizing steps to value (getting users to success quickly)
+- Reducing cognitive load at each decision point
+- Providing clear feedback and progress indicators
+- Creating moments of delight or accomplishment
+- Handling edge cases and error recovery gracefully
+
+**Specific Optimizations:**
+
+- [Optimization 1 for journey efficiency]
+- [Optimization 2 for user delight]
+- [Optimization 3 for error handling]"
+
+### 5. Document Journey Patterns
+
+Extract reusable patterns across journeys:
+"**Journey Patterns:**
+Across these flows, I'm seeing some common patterns we can standardize:
+
+**Navigation Patterns:**
+
+- [Navigation pattern 1]
+- [Navigation pattern 2]
+
+**Decision Patterns:**
+
+- [Decision pattern 1]
+- [Decision pattern 2]
+
+**Feedback Patterns:**
+
+- [Feedback pattern 1]
+- [Feedback pattern 2]
+
+These patterns will ensure consistency across all user experiences."
+
+### 6. Generate User Journey Content
+
+Prepare the content to append to the document:
+
+#### Content Structure:
+
+When saving to document, append these Level 2 and Level 3 sections:
+
+```markdown
+## User Journey Flows
+
+### [Journey 1 Name]
+
+[Journey 1 description and Mermaid diagram]
+
+### [Journey 2 Name]
+
+[Journey 2 description and Mermaid diagram]
+
+### Journey Patterns
+
+[Journey patterns identified based on conversation]
+
+### Flow Optimization Principles
+
+[Flow optimization principles based on conversation]
+```
+
+### 7. Present Content and Menu
+
+Show the generated user journey content and present choices:
+"I've designed detailed user journey flows for {{project_name}}. These flows will guide the detailed design of each user interaction.
+
+**Here's what I'll add to the document:**
+
+[Show the complete markdown content from step 6]
+
+**What would you like to do?**
+[A] Advanced Elicitation - Let's refine our user journey designs
+[P] Party Mode - Bring different perspectives on user flows
+[C] Continue - Save this to the document and move to component strategy
+
+### 8. Handle Menu Selection
+
+#### If 'A' (Advanced Elicitation):
+
+- Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml with the current user journey content
+- Process the enhanced journey insights that come back
+- Ask user: "Accept these improvements to the user journeys? (y/n)"
+- If yes: Update content with improvements, then return to A/P/C menu
+- If no: Keep original content, then return to A/P/C menu
+
+#### If 'P' (Party Mode):
+
+- Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md with the current user journeys
+- Process the collaborative journey insights that come back
+- Ask user: "Accept these changes to the user journeys? (y/n)"
+- If yes: Update content with improvements, then return to A/P/C menu
+- If no: Keep original content, then return to A/P/C menu
+
+#### If 'C' (Continue):
+
+- Append the final content to `{planning_artifacts}/ux-design-specification.md`
+- Update frontmatter: append step to end of stepsCompleted array
+- Load `./step-11-component-strategy.md`
+
+## APPEND TO DOCUMENT:
+
+When user selects 'C', append the content directly to the document using the structure from step 6.
+
+## SUCCESS METRICS:
+
+✅ Critical user journeys identified and designed
+✅ Detailed flow diagrams created for each journey
+✅ Flows optimized for efficiency and user delight
+✅ Common journey patterns extracted and documented
+✅ A/P/C menu presented and handled correctly
+✅ Content properly appended to document when C selected
+
+## FAILURE MODES:
+
+❌ Not identifying all critical user journeys
+❌ Flows too complex or not optimized for user success
+❌ Missing error recovery paths
+❌ Not extracting reusable patterns across journeys
+❌ Flow diagrams unclear or incomplete
+❌ Not presenting A/P/C menu after content generation
+❌ Appending content without user selecting 'C'
+
+❌ **CRITICAL**: Reading only partial step file - leads to incomplete understanding and poor decisions
+❌ **CRITICAL**: Proceeding with 'C' without fully reading and understanding the next step file
+❌ **CRITICAL**: Making decisions without complete understanding of step requirements and protocols
+
+## NEXT STEP:
+
+After user selects 'C' and content is saved to document, load `./step-11-component-strategy.md` to define component library strategy.
+
+Remember: Do NOT proceed to step-11 until user explicitly selects 'C' from the A/P/C menu and content is saved!