@pennyfarthing/core 9.2.0 → 9.3.0

package/pennyfarthing-dist/workflows/ux-design/steps/step-12-ux-patterns.md

@@ -1,243 +0,0 @@
-# Step 12: UX Consistency Patterns
-
-<purpose>Establish UX consistency patterns for common situations like buttons, forms, navigation, and feedback through collaborative definition of pattern categories and design guidelines.</purpose>
-
-<instructions>Identify critical pattern categories (button hierarchy, feedback, forms, navigation, modals, empty states, search). Define patterns for critical categories with considerations (hierarchy, feedback, error recovery, accessibility, mobile). Establish pattern guidelines with when to use, visual design, behavior, accessibility, mobile considerations, and variants. Ensure design system integration. Generate pattern documentation with clear usage guidelines and visual examples. Generate UX patterns content with button hierarchy, feedback patterns, form patterns, navigation patterns, and additional patterns sections. Present A/P/C menu. Save when C selected.</instructions>
-
-<output>UX consistency patterns content appended to specification including pattern guidelines for all critical categories with accessibility and mobile considerations, with user confirmation and frontmatter updated.</output>
-
-## 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
-- ✅ 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 UX patterns 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 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/workflows/advanced-elicitation/workflow.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/workflows/advanced-elicitation/workflow.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: append step to end of stepsCompleted array
-- 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/pennyfarthing-dist/workflows/ux-design/steps/step-13-responsive-accessibility.md

@@ -1,270 +0,0 @@
-# Step 13: Responsive Design & Accessibility
-
-<purpose>Define responsive design strategy and accessibility requirements ensuring the product works beautifully across all devices and is accessible to all users.</purpose>
-
-<instructions>Define responsive strategy for desktop (layout, features), tablet (gestures, density), and mobile (navigation, collapse, priority). Establish breakpoint strategy (standard vs custom, mobile-first vs desktop-first). Design accessibility strategy (WCAG level A/AA/AAA, color contrast, keyboard navigation, screen reader, touch targets). Define testing strategy (responsive testing, accessibility testing, user testing). Document implementation guidelines (responsive development, accessibility development). Generate responsive and accessibility content with strategy, breakpoint strategy, accessibility strategy, testing strategy, and implementation guidelines sections. Present A/P/C menu. Save when C selected.</instructions>
-
-<output>Responsive and accessibility content appended to specification including comprehensive testing strategy and implementation guidelines for responsive design and accessibility compliance, with user confirmation and frontmatter updated.</output>
-
-## 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
-- ✅ 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 responsive/accessibility 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 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/workflows/advanced-elicitation/workflow.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/workflows/advanced-elicitation/workflow.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: append step to end of stepsCompleted array
-- 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!