npm - @ngocsangairvds/vsaf - Versions diffs - 3.2.16 → 4.0.1 - Mend

@ngocsangairvds/vsaf 3.2.16 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2337) hide show

package/tools/skills/bmad-create-ux-design/steps/step-06-design-system.md DELETED Viewed

@@ -1,253 +0,0 @@
-# Step 6: Design System Choice
-## 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 choosing appropriate design system approach
-- 🎯 COLLABORATIVE decision-making, not recommendation-only
-- ✅ 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 design system decision 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 design system insights
-- **P (Party Mode)**: Bring multiple perspectives to evaluate design system options
-- **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
-- Platform requirements from step 3 inform design system choice
-- Inspiration patterns from step 5 guide design system selection
-- Focus on choosing foundation for consistent design
-## YOUR TASK:
-Choose appropriate design system approach based on project requirements and constraints.
-## DESIGN SYSTEM CHOICE SEQUENCE:
-### 1. Present Design System Options
-Educate about design system approaches:
-"For {{project_name}}, we need to choose a design system foundation. Think of design systems like LEGO blocks for UI - they provide proven components and patterns, ensuring consistency and speeding development.
-**Design System Approaches:**
-**1. Custom Design System**
-- Complete visual uniqueness
-- Full control over every component
-- Higher initial investment
-- Perfect for established brands with unique needs
-**2. Established System (Material Design, Ant Design, etc.)**
-- Fast development with proven patterns
-- Great defaults and accessibility built-in
-- Less visual differentiation
-- Ideal for startups or internal tools
-**3. Themeable System (MUI, Chakra UI, Tailwind UI)**
-- Customizable with strong foundation
-- Brand flexibility with proven components
-- Moderate learning curve
-- Good balance of speed and uniqueness
-Which direction feels right for your project?"
-### 2. Analyze Project Requirements
-Guide decision based on project context:
-"**Let's consider your specific needs:**
-**Based on our previous conversations:**
-- Platform: [platform from step 3]
-- Timeline: [inferred from user conversation]
-- Team Size: [inferred from user conversation]
-- Brand Requirements: [inferred from user conversation]
-- Technical Constraints: [inferred from user conversation]
-**Decision Factors:**
-- Need for speed vs. need for uniqueness
-- Brand guidelines or existing visual identity
-- Team's design expertise
-- Long-term maintenance considerations
-- Integration requirements with existing systems"
-### 3. Explore Specific Design System Options
-Dive deeper into relevant options:
-"**Recommended Options Based on Your Needs:**
-**For [Your Platform Type]:**
-- [Option 1] - [Key benefit] - [Best for scenario]
-- [Option 2] - [Key benefit] - [Best for scenario]
-- [Option 3] - [Key benefit] - [Best for scenario]
-**Considerations:**
-- Component library size and quality
-- Documentation and community support
-- Customization capabilities
-- Accessibility compliance
-- Performance characteristics
-- Learning curve for your team"
-### 4. Facilitate Decision Process
-Help user make informed choice:
-"**Decision Framework:**
-1. What's most important: Speed, uniqueness, or balance?
-2. How much design expertise does your team have?
-3. Are there existing brand guidelines to follow?
-4. What's your timeline and budget?
-5. Long-term maintenance needs?
-Let's evaluate options based on your answers to these questions."
-### 5. Finalize Design System Choice
-Confirm and document the decision:
-"Based on our analysis, I recommend [Design System Choice] for {{project_name}}.
-**Rationale:**
-- [Reason 1 based on project needs]
-- [Reason 2 based on constraints]
-- [Reason 3 based on team considerations]
-**Next Steps:**
-- We'll customize this system to match your brand and needs
-- Define component strategy for custom components needed
-- Establish design tokens and patterns
-Does this design system choice feel right to you?"
-### 6. Generate Design System 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 System Foundation
-### 1.1 Design System Choice
-[Design system choice based on conversation]
-### Rationale for Selection
-[Rationale for design system selection based on conversation]
-### Implementation Approach
-[Implementation approach based on chosen system]
-### Customization Strategy
-[Customization strategy based on project needs]
-```
-### 7. Present Content and Menu
-Show the generated design system content and present choices:
-"I've documented our design system choice for {{project_name}}. This foundation will ensure consistency and speed up development.
-**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 system decision
-[P] Party Mode - Bring technical perspectives on design systems
-[C] Continue - Save this to the document and move to defining experience
-### 8. Handle Menu Selection
-#### If 'A' (Advanced Elicitation):
-- Invoke the `bmad-advanced-elicitation` skill with the current design system content
-- Process the enhanced design system insights that come back
-- Ask user: "Accept these improvements to the design system decision? (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 design system choice
-- Process the collaborative design system insights that come back
-- Ask user: "Accept these changes to the design system decision? (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-07-defining-experience.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 options clearly presented and explained
-✅ Decision framework applied to project requirements
-✅ Specific design system chosen with clear rationale
-✅ Implementation approach planned
-✅ Customization strategy defined
-✅ A/P/C menu presented and handled correctly
-✅ Content properly appended to document when C selected
-## FAILURE MODES:
-❌ Not explaining design system concepts clearly
-❌ Rushing to recommendation without understanding requirements
-❌ Not considering technical constraints or team capabilities
-❌ Choosing design system without clear rationale
-❌ Not planning implementation approach
-❌ 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-07-defining-experience.md` to define the core user interaction.
-Remember: Do NOT proceed to step-07 until user explicitly selects 'C' from the A/P/C menu and content is saved!

package/tools/skills/bmad-create-ux-design/steps/step-07-defining-experience.md DELETED Viewed

@@ -1,255 +0,0 @@
-# Step 7: Defining Core Experience
-## 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 the core interaction that defines the product
-- 🎯 COLLABORATIVE discovery, 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 defining experience 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 experience insights
-- **P (Party Mode)**: Bring multiple perspectives to define optimal core experience
-- **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
-- Core experience from step 3 provides foundation
-- Design system choice from step 6 informs implementation
-- Focus on the defining interaction that makes the product special
-## YOUR TASK:
-Define the core interaction that, if nailed, makes everything else follow in the user experience.
-## DEFINING EXPERIENCE SEQUENCE:
-### 1. Identify the Defining Experience
-Focus on the core interaction:
-"Every successful product has a defining experience - the core interaction that, if we nail it, everything else follows.
-**Think about these famous examples:**
-- Tinder: "Swipe to match with people"
-- Snapchat: "Share photos that disappear"
-- Instagram: "Share perfect moments with filters"
-- Spotify: "Discover and play any song instantly"
-**For {{project_name}}:**
-What's the core action that users will describe to their friends?
-What's the interaction that makes users feel successful?
-If we get ONE thing perfectly right, what should it be?"
-### 2. Explore the User's Mental Model
-Understand how users think about the core task:
-"**User Mental Model Questions:**
-- How do users currently solve this problem?
-- What mental model do they bring to this task?
-- What's their expectation for how this should work?
-- Where are they likely to get confused or frustrated?
-**Current Solutions:**
-- What do users love/hate about existing approaches?
-- What shortcuts or workarounds do they use?
-- What makes existing solutions feel magical or terrible?"
-### 3. Define Success Criteria for Core Experience
-Establish what makes the core interaction successful:
-"**Core Experience Success Criteria:**
-- What makes users say 'this just works'?
-- When do they feel smart or accomplished?
-- What feedback tells them they're doing it right?
-- How fast should it feel?
-- What should happen automatically?
-**Success Indicators:**
-- [Success indicator 1]
-- [Success indicator 2]
-- [Success indicator 3]"
-### 4. Identify Novel vs. Established Patterns
-Determine if we need to innovate or can use proven patterns:
-"**Pattern Analysis:**
-Looking at your core experience, does this:
-- Use established UX patterns that users already understand?
-- Require novel interaction design that needs user education?
-- Combine familiar patterns in innovative ways?
-**If Novel:**
-- What makes this different from existing approaches?
-- How will we teach users this new pattern?
-- What familiar metaphors can we use?
-**If Established:**
-- Which proven patterns should we adopt?
-- How can we innovate within familiar patterns?
-- What's our unique twist on established interactions?"
-### 5. Define Experience Mechanics
-Break down the core interaction into details:
-"**Core Experience Mechanics:**
-Let's design the step-by-step flow for [defining experience]:
-**1. Initiation:**
-- How does the user start this action?
-- What triggers or invites them to begin?
-**2. Interaction:**
-- What does the user actually do?
-- What controls or inputs do they use?
-- How does the system respond?
-**3. Feedback:**
-- What tells users they're succeeding?
-- How do they know when it's working?
-- What happens if they make a mistake?
-**4. Completion:**
-- How do users know they're done?
-- What's the successful outcome?
-- What's next?"
-### 6. Generate Defining Experience Content
-Prepare the content to append to the document:
-#### Content Structure:
-When saving to document, append these Level 2 and Level 3 sections:
-```markdown
-## 2. Core User Experience
-### 2.1 Defining Experience
-[Defining experience description based on conversation]
-### 2.2 User Mental Model
-[User mental model analysis based on conversation]
-### 2.3 Success Criteria
-[Success criteria for core experience based on conversation]
-### 2.4 Novel UX Patterns
-[Novel UX patterns analysis based on conversation]
-### 2.5 Experience Mechanics
-[Detailed mechanics for core experience based on conversation]
-```
-### 7. Present Content and Menu
-Show the generated defining experience content and present choices:
-"I've defined the core experience for {{project_name}} - the interaction that will make users love this product.
-**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 the core experience definition
-[P] Party Mode - Bring different perspectives on the defining interaction
-[C] Continue - Save this to the document and move to visual foundation
-### 8. Handle Menu Selection
-#### If 'A' (Advanced Elicitation):
-- Invoke the `bmad-advanced-elicitation` skill with the current defining experience content
-- Process the enhanced experience insights that come back
-- Ask user: "Accept these improvements to the defining experience? (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 defining experience
-- Process the collaborative experience insights that come back
-- Ask user: "Accept these changes to the defining experience? (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-08-visual-foundation.md`
-## APPEND TO DOCUMENT:
-When user selects 'C', append the content directly to the document using the structure from step 6.
-## SUCCESS METRICS:
-✅ Defining experience clearly articulated
-✅ User mental model thoroughly analyzed
-✅ Success criteria established for core interaction
-✅ Novel vs. established patterns properly evaluated
-✅ Experience mechanics designed in detail
-✅ A/P/C menu presented and handled correctly
-✅ Content properly appended to document when C selected
-## FAILURE MODES:
-❌ Not identifying the true core interaction
-❌ Missing user's mental model and expectations
-❌ Not establishing clear success criteria
-❌ Not properly evaluating novel vs. established patterns
-❌ Experience mechanics too vague 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-08-visual-foundation.md` to establish visual design foundation.
-Remember: Do NOT proceed to step-08 until user explicitly selects 'C' from the A/P/C menu and content is saved!