@hanzlaa/rcode 3.6.16 → 4.1.0

package/rcode/skills/actions/2-plan/rcode-create-ux-design/steps/step-10-user-journeys.md

@@ -0,0 +1,242 @@
+# 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}`
+- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_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: Invoke the `rcode-advanced-elicitation` skill
+- When 'P' selected: Invoke the `rcode-party-mode` skill
+- 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):
+
+- Invoke the `rcode-advanced-elicitation` skill 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):
+
+- Invoke the `rcode-party-mode` skill 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!

package/rcode/skills/actions/2-plan/rcode-create-ux-design/steps/step-11-component-strategy.md

@@ -0,0 +1,249 @@
+# Step 11: Component Strategy
+
+## 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 defining component library strategy and custom components
+- 🎯 COLLABORATIVE component planning, not assumption-based design
+- ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config `{communication_language}`
+- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_language}`
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Show your analysis before taking any action
+- ⚠️ Present A/P/C menu after generating component strategy 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 component insights
+- **P (Party Mode)**: Bring multiple perspectives to define component strategy
+- **C (Continue)**: Save the content to the document and proceed to next step
+
+## PROTOCOL INTEGRATION:
+
+- When 'A' selected: Invoke the `rcode-advanced-elicitation` skill
+- When 'P' selected: Invoke the `rcode-party-mode` skill
+- 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 determines available components
+- User journeys from step 10 identify component needs
+- Focus on defining custom components and implementation strategy
+
+## YOUR TASK:
+
+Define component library strategy and design custom components not covered by the design system.
+
+## COMPONENT STRATEGY SEQUENCE:
+
+### 1. Analyze Design System Coverage
+
+Review what components are available vs. needed:
+"Based on our chosen design system [design system from step 6], let's identify what components are already available and what we need to create custom.
+
+**Available from Design System:**
+[List of components available in chosen design system]
+
+**Components Needed for {{project_name}}:**
+Looking at our user journeys and design direction, we need:
+
+- [Component need 1 from journey analysis]
+- [Component need 2 from design requirements]
+- [Component need 3 from core experience]
+
+**Gap Analysis:**
+
+- [Gap 1 - needed but not available]
+- [Gap 2 - needed but not available]"
+
+### 2. Design Custom Components
+
+For each custom component needed, design thoroughly:
+
+**For each custom component:**
+"**[Component Name] Design:**
+
+**Purpose:** What does this component do for users?
+**Content:** What information or data does it display?
+**Actions:** What can users do with this component?
+**States:** What different states does it have? (default, hover, active, disabled, error, etc.)
+**Variants:** Are there different sizes or styles needed?
+**Accessibility:** What ARIA labels and keyboard support needed?
+
+Let's walk through each custom component systematically."
+
+### 3. Document Component Specifications
+
+Create detailed specifications for each component:
+
+**Component Specification Template:**
+
+```markdown
+### [Component Name]
+
+**Purpose:** [Clear purpose statement]
+**Usage:** [When and how to use]
+**Anatomy:** [Visual breakdown of parts]
+**States:** [All possible states with descriptions]
+**Variants:** [Different sizes/styles if applicable]
+**Accessibility:** [ARIA labels, keyboard navigation]
+**Content Guidelines:** [What content works best]
+**Interaction Behavior:** [How users interact]
+```
+
+### 4. Define Component Strategy
+
+Establish overall component library approach:
+"**Component Strategy:**
+
+**Foundation Components:** (from design system)
+
+- [Foundation component 1]
+- [Foundation component 2]
+
+**Custom Components:** (designed in this step)
+
+- [Custom component 1 with rationale]
+- [Custom component 2 with rationale]
+
+**Implementation Approach:**
+
+- Build custom components using design system tokens
+- Ensure consistency with established patterns
+- Follow accessibility best practices
+- Create reusable patterns for common use cases"
+
+### 5. Plan Implementation Roadmap
+
+Define how and when to build components:
+"**Implementation Roadmap:**
+
+**Phase 1 - Core Components:**
+
+- [Component 1] - needed for [critical flow]
+- [Component 2] - needed for [critical flow]
+
+**Phase 2 - Supporting Components:**
+
+- [Component 3] - enhances [user experience]
+- [Component 4] - supports [design pattern]
+
+**Phase 3 - Enhancement Components:**
+
+- [Component 5] - optimizes [user journey]
+- [Component 6] - adds [special feature]
+
+This roadmap helps prioritize development based on user journey criticality."
+
+### 6. Generate Component Strategy Content
+
+Prepare the content to append to the document:
+
+#### Content Structure:
+
+When saving to document, append these Level 2 and Level 3 sections:
+
+```markdown
+## Component Strategy
+
+### Design System Components
+
+[Analysis of available design system components based on conversation]
+
+### Custom Components
+
+[Custom component specifications based on conversation]
+
+### Component Implementation Strategy
+
+[Component implementation strategy based on conversation]
+
+### Implementation Roadmap
+
+[Implementation roadmap based on conversation]
+```
+
+### 7. Present Content and Menu
+
+Show the generated component strategy content and present choices:
+"I've defined the component strategy for {{project_name}}. This balances using proven design system components with custom components for your unique needs.
+
+**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 component strategy
+[P] Party Mode - Bring technical perspectives on component design
+[C] Continue - Save this to the document and move to UX patterns
+
+### 8. Handle Menu Selection
+
+#### If 'A' (Advanced Elicitation):
+
+- Invoke the `rcode-advanced-elicitation` skill with the current component strategy content
+- Process the enhanced component insights that come back
+- Ask user: "Accept these improvements to the component 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):
+
+- Invoke the `rcode-party-mode` skill with the current component strategy
+- Process the collaborative component insights that come back
+- Ask user: "Accept these changes to the component 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-12-ux-patterns.md`
+
+## APPEND TO DOCUMENT:
+
+When user selects 'C', append the content directly to the document using the structure from step 6.
+
+## SUCCESS METRICS:
+
+✅ Design system coverage properly analyzed
+✅ All custom components thoroughly specified
+✅ Component strategy clearly defined
+✅ Implementation roadmap prioritized by user need
+✅ Accessibility considered for all components
+✅ A/P/C menu presented and handled correctly
+✅ Content properly appended to document when C selected
+
+## FAILURE MODES:
+
+❌ Not analyzing design system coverage properly
+❌ Custom components not thoroughly specified
+❌ Missing accessibility considerations
+❌ Component strategy not aligned with user journeys
+❌ Implementation roadmap not prioritized effectively
+❌ 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-12-ux-patterns.md` to define UX consistency patterns.
+
+Remember: Do NOT proceed to step-12 until user explicitly selects 'C' from the A/P/C menu and content is saved!