initial commit
This commit is contained in:
@@ -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 `bmad-advanced-elicitation` skill
|
||||
- When 'P' selected: Invoke the `bmad-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 `bmad-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 `bmad-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!
|
||||
Reference in New Issue
Block a user