bmad-method 6.0.0-alpha.2 → 6.0.0-alpha.20

package/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-12-ux-patterns.md

@@ -0,0 +1,236 @@
+# Step 12: UX Consistency Patterns
+
+## 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 consistency patterns for common UX situations
+- 🎯 COLLABORATIVE pattern definition, not assumption-based design
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Show your analysis before taking any action
+- ⚠️ Present A/P/C menu after generating UX patterns content
+- 💾 ONLY save when user chooses C (Continue)
+- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]` before loading next step
+- 🚫 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 pattern insights
+- **P (Party Mode)**: Bring multiple perspectives to define UX patterns
+- **C (Continue)**: Save the content to the document and proceed to next step
+
+## PROTOCOL INTEGRATION:
+
+- When 'A' selected: Execute {project-root}/_bmad/core/tasks/advanced-elicitation.xml
+- When 'P' selected: Execute {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
+- Component strategy from step 11 informs pattern decisions
+- User journeys from step 10 identify common pattern needs
+- Focus on consistency patterns for common UX situations
+
+## YOUR TASK:
+
+Establish UX consistency patterns for common situations like buttons, forms, navigation, and feedback.
+
+## UX PATTERNS SEQUENCE:
+
+### 1. Identify Pattern Categories
+
+Determine which patterns need definition for your product:
+"Let's establish consistency patterns for how {{project_name}} behaves in common situations.
+
+**Pattern Categories to Define:**
+
+- Button hierarchy and actions
+- Feedback patterns (success, error, warning, info)
+- Form patterns and validation
+- Navigation patterns
+- Modal and overlay patterns
+- Empty states and loading states
+- Search and filtering patterns
+
+Which categories are most critical for your product? We can go through each thoroughly or focus on the most important ones."
+
+### 2. Define Critical Patterns First
+
+Focus on patterns most relevant to your product:
+
+**For [Critical Pattern Category]:**
+"**[Pattern Type] Patterns:**
+What should users see/do when they need to [pattern action]?
+
+**Considerations:**
+
+- Visual hierarchy (primary vs. secondary actions)
+- Feedback mechanisms
+- Error recovery
+- Accessibility requirements
+- Mobile vs. desktop considerations
+
+**Examples:**
+
+- [Example 1 for this pattern type]
+- [Example 2 for this pattern type]
+
+How should {{project_name}} handle [pattern type] interactions?"
+
+### 3. Establish Pattern Guidelines
+
+Document specific design decisions:
+
+**Pattern Guidelines Template:**
+
+```markdown
+### [Pattern Type]
+
+**When to Use:** [Clear usage guidelines]
+**Visual Design:** [How it should look]
+**Behavior:** [How it should interact]
+**Accessibility:** [A11y requirements]
+**Mobile Considerations:** [Mobile-specific needs]
+**Variants:** [Different states or styles if applicable]
+```
+
+### 4. Design System Integration
+
+Ensure patterns work with chosen design system:
+"**Integration with [Design System]:**
+
+- How do these patterns complement our design system components?
+- What customizations are needed?
+- How do we maintain consistency while meeting unique needs?
+
+**Custom Pattern Rules:**
+
+- [Custom rule 1]
+- [Custom rule 2]
+- [Custom rule 3]"
+
+### 5. Create Pattern Documentation
+
+Generate comprehensive pattern library:
+
+**Pattern Library Structure:**
+
+- Clear usage guidelines for each pattern
+- Visual examples and specifications
+- Implementation notes for developers
+- Accessibility checklists
+- Mobile-first considerations
+
+### 6. Generate UX Patterns Content
+
+Prepare the content to append to the document:
+
+#### Content Structure:
+
+When saving to document, append these Level 2 and Level 3 sections:
+
+```markdown
+## UX Consistency Patterns
+
+### Button Hierarchy
+
+[Button hierarchy patterns based on conversation]
+
+### Feedback Patterns
+
+[Feedback patterns based on conversation]
+
+### Form Patterns
+
+[Form patterns based on conversation]
+
+### Navigation Patterns
+
+[Navigation patterns based on conversation]
+
+### Additional Patterns
+
+[Additional patterns based on conversation]
+```
+
+### 7. Present Content and Menu
+
+Show the generated UX patterns content and present choices:
+"I've established UX consistency patterns for {{project_name}}. These patterns ensure users have a consistent, predictable experience across all interactions.
+
+**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 UX patterns
+[P] Party Mode - Bring different perspectives on consistency patterns
+[C] Continue - Save this to the document and move to responsive design
+
+### 8. Handle Menu Selection
+
+#### If 'A' (Advanced Elicitation):
+
+- Execute {project-root}/_bmad/core/tasks/advanced-elicitation.xml with the current UX patterns content
+- Process the enhanced pattern insights that come back
+- Ask user: "Accept these improvements to the UX patterns? (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):
+
+- Execute {project-root}/_bmad/core/workflows/party-mode/workflow.md with the current UX patterns
+- Process the collaborative pattern insights that come back
+- Ask user: "Accept these changes to the UX patterns? (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: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]`
+- Load `./step-13-responsive-accessibility.md`
+
+## APPEND TO DOCUMENT:
+
+When user selects 'C', append the content directly to the document using the structure from step 6.
+
+## SUCCESS METRICS:
+
+✅ Critical pattern categories identified and prioritized
+✅ Consistency patterns clearly defined and documented
+✅ Patterns integrated with chosen design system
+✅ Accessibility considerations included for all patterns
+✅ Mobile-first approach incorporated
+✅ A/P/C menu presented and handled correctly
+✅ Content properly appended to document when C selected
+
+## FAILURE MODES:
+
+❌ Not identifying the most critical pattern categories
+❌ Patterns too generic or not actionable
+❌ Missing accessibility considerations
+❌ Patterns not aligned with design system
+❌ Not considering mobile differences
+❌ 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-13-responsive-accessibility.md` to define responsive design and accessibility strategy.
+
+Remember: Do NOT proceed to step-13 until user explicitly selects 'C' from the A/P/C menu and content is saved!

package/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-13-responsive-accessibility.md

@@ -0,0 +1,263 @@
+# Step 13: Responsive Design & Accessibility
+
+## 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 responsive design strategy and accessibility compliance
+- 🎯 COLLABORATIVE strategy definition, not assumption-based design
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Show your analysis before taking any action
+- ⚠️ Present A/P/C menu after generating responsive/accessibility content
+- 💾 ONLY save when user chooses C (Continue)
+- 📖 Update frontmatter `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]` before loading next step
+- 🚫 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 responsive/accessibility insights
+- **P (Party Mode)**: Bring multiple perspectives to define responsive/accessibility strategy
+- **C (Continue)**: Save the content to the document and proceed to final step
+
+## PROTOCOL INTEGRATION:
+
+- When 'A' selected: Execute {project-root}/_bmad/core/tasks/advanced-elicitation.xml
+- When 'P' selected: Execute {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
+- Platform requirements from step 3 inform responsive design
+- Design direction from step 9 influences responsive layout choices
+- Focus on cross-device adaptation and accessibility compliance
+
+## YOUR TASK:
+
+Define responsive design strategy and accessibility requirements for the product.
+
+## RESPONSIVE & ACCESSIBILITY SEQUENCE:
+
+### 1. Define Responsive Strategy
+
+Establish how the design adapts across devices:
+"Let's define how {{project_name}} adapts across different screen sizes and devices.
+
+**Responsive Design Questions:**
+
+**Desktop Strategy:**
+
+- How should we use extra screen real estate?
+- Multi-column layouts, side navigation, or content density?
+- What desktop-specific features can we include?
+
+**Tablet Strategy:**
+
+- Should we use simplified layouts or touch-optimized interfaces?
+- How do gestures and touch interactions work on tablets?
+- What's the optimal information density for tablet screens?
+
+**Mobile Strategy:**
+
+- Bottom navigation or hamburger menu?
+- How do layouts collapse on small screens?
+- What's the most critical information to show mobile-first?"
+
+### 2. Establish Breakpoint Strategy
+
+Define when and how layouts change:
+"**Breakpoint Strategy:**
+We need to define screen size breakpoints where layouts adapt.
+
+**Common Breakpoints:**
+
+- Mobile: 320px - 767px
+- Tablet: 768px - 1023px
+- Desktop: 1024px+
+
+**For {{project_name}}, should we:**
+
+- Use standard breakpoints or custom ones?
+- Focus on mobile-first or desktop-first design?
+- Have specific breakpoints for your key use cases?"
+
+### 3. Design Accessibility Strategy
+
+Define accessibility requirements and compliance level:
+"**Accessibility Strategy:**
+What level of WCAG compliance does {{project_name}} need?
+
+**WCAG Levels:**
+
+- **Level A (Basic)** - Essential accessibility for legal compliance
+- **Level AA (Recommended)** - Industry standard for good UX
+- **Level AAA (Highest)** - Exceptional accessibility (rarely needed)
+
+**Based on your product:**
+
+- [Recommendation based on user base, legal requirements, etc.]
+
+**Key Accessibility Considerations:**
+
+- Color contrast ratios (4.5:1 for normal text)
+- Keyboard navigation support
+- Screen reader compatibility
+- Touch target sizes (minimum 44x44px)
+- Focus indicators and skip links"
+
+### 4. Define Testing Strategy
+
+Plan how to ensure responsive design and accessibility:
+"**Testing Strategy:**
+
+**Responsive Testing:**
+
+- Device testing on actual phones/tablets
+- Browser testing across Chrome, Firefox, Safari, Edge
+- Real device network performance testing
+
+**Accessibility Testing:**
+
+- Automated accessibility testing tools
+- Screen reader testing (VoiceOver, NVDA, JAWS)
+- Keyboard-only navigation testing
+- Color blindness simulation testing
+
+**User Testing:**
+
+- Include users with disabilities in testing
+- Test with diverse assistive technologies
+- Validate with actual target devices"
+
+### 5. Document Implementation Guidelines
+
+Create specific guidelines for developers:
+"**Implementation Guidelines:**
+
+**Responsive Development:**
+
+- Use relative units (rem, %, vw, vh) over fixed pixels
+- Implement mobile-first media queries
+- Test touch targets and gesture areas
+- Optimize images and assets for different devices
+
+**Accessibility Development:**
+
+- Semantic HTML structure
+- ARIA labels and roles
+- Keyboard navigation implementation
+- Focus management and skip links
+- High contrast mode support"
+
+### 6. Generate Responsive & Accessibility Content
+
+Prepare the content to append to the document:
+
+#### Content Structure:
+
+When saving to document, append these Level 2 and Level 3 sections:
+
+```markdown
+## Responsive Design & Accessibility
+
+### Responsive Strategy
+
+[Responsive strategy based on conversation]
+
+### Breakpoint Strategy
+
+[Breakpoint strategy based on conversation]
+
+### Accessibility Strategy
+
+[Accessibility strategy based on conversation]
+
+### Testing Strategy
+
+[Testing strategy based on conversation]
+
+### Implementation Guidelines
+
+[Implementation guidelines based on conversation]
+```
+
+### 7. Present Content and Menu
+
+Show the generated responsive and accessibility content and present choices:
+"I've defined the responsive design and accessibility strategy for {{project_name}}. This ensures your product works beautifully across all devices and is accessible to all users.
+
+**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 responsive/accessibility strategy
+[P] Party Mode - Bring different perspectives on inclusive design
+[C] Continue - Save this to the document and complete the workflow
+
+### 8. Handle Menu Selection
+
+#### If 'A' (Advanced Elicitation):
+
+- Execute {project-root}/_bmad/core/tasks/advanced-elicitation.xml with the current responsive/accessibility content
+- Process the enhanced insights that come back
+- Ask user: "Accept these improvements to the responsive/accessibility strategy? (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):
+
+- Execute {project-root}/_bmad/core/workflows/party-mode/workflow.md with the current responsive/accessibility strategy
+- Process the collaborative insights that come back
+- Ask user: "Accept these changes to the responsive/accessibility strategy? (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: `stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]`
+- Load `./step-14-complete.md`
+
+## APPEND TO DOCUMENT:
+
+When user selects 'C', append the content directly to the document using the structure from step 6.
+
+## SUCCESS METRICS:
+
+✅ Responsive strategy clearly defined for all device types
+✅ Appropriate breakpoint strategy established
+✅ Accessibility requirements determined and documented
+✅ Comprehensive testing strategy planned
+✅ Implementation guidelines provided for development team
+✅ A/P/C menu presented and handled correctly
+✅ Content properly appended to document when C selected
+
+## FAILURE MODES:
+
+❌ Not considering all device types and screen sizes
+❌ Accessibility requirements not properly researched
+❌ Testing strategy not comprehensive enough
+❌ Implementation guidelines too generic or unclear
+❌ Not addressing specific accessibility challenges for your product
+❌ 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-14-complete.md` to finalize the UX design workflow.
+
+Remember: Do NOT proceed to step-14 until user explicitly selects 'C' from the A/P/C menu and content is saved!