From 94f2572b0b6c25d1c826b77e44b675c61f246d17 Mon Sep 17 00:00:00 2001 From: Brian Madison Date: Thu, 23 Oct 2025 23:20:48 -0500 Subject: [PATCH] validation tasks added --- src/modules/bmm/agents/architect.agent.yaml | 6 + src/modules/bmm/agents/pm.agent.yaml | 10 +- src/modules/bmm/agents/ux-designer.agent.yaml | 6 +- .../bmm/workflows/2-plan-workflows/README.md | 7 +- .../create-ux-design/checklist.md | 48 +- .../create-ux-design/color-psychology.yaml | 337 --------- .../create-ux-design/instructions.md | 372 +++++++--- .../create-ux-design/layout-patterns.yaml | 419 ----------- .../create-ux-design/ux-pattern-catalog.yaml | 482 ------------ .../2-plan-workflows/ux-spec/checklist.md | 152 ---- .../ux-spec/instructions-ux.md | 405 ----------- .../ux-spec/ux-spec-template.md | 162 ----- .../2-plan-workflows/ux-spec/workflow.yaml | 37 - .../3-solutioning/architecture/checklist.md | 301 ++++---- .../architecture/decision-catalog.yaml | 687 +++--------------- .../paths/brownfield-level-2.yaml | 4 +- .../paths/brownfield-level-3.yaml | 6 +- .../paths/brownfield-level-4.yaml | 6 +- .../paths/greenfield-level-2.yaml | 4 +- .../paths/greenfield-level-3.yaml | 4 +- .../paths/greenfield-level-4.yaml | 6 +- .../workflow-status/project-levels.yaml | 2 +- .../workflow-status-template.md | 15 - 23 files changed, 601 insertions(+), 2877 deletions(-) delete mode 100644 src/modules/bmm/workflows/2-plan-workflows/create-ux-design/color-psychology.yaml delete mode 100644 src/modules/bmm/workflows/2-plan-workflows/create-ux-design/layout-patterns.yaml delete mode 100644 src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-pattern-catalog.yaml delete mode 100644 src/modules/bmm/workflows/2-plan-workflows/ux-spec/checklist.md delete mode 100644 src/modules/bmm/workflows/2-plan-workflows/ux-spec/instructions-ux.md delete mode 100644 src/modules/bmm/workflows/2-plan-workflows/ux-spec/ux-spec-template.md delete mode 100644 src/modules/bmm/workflows/2-plan-workflows/ux-spec/workflow.yaml diff --git a/src/modules/bmm/agents/architect.agent.yaml b/src/modules/bmm/agents/architect.agent.yaml index 02f2e4e0..4f872820 100644 --- a/src/modules/bmm/agents/architect.agent.yaml +++ b/src/modules/bmm/agents/architect.agent.yaml @@ -30,6 +30,12 @@ agent: workflow: "{project-root}/bmad/bmm/workflows/3-solutioning/architecture/workflow.yaml" description: Produce a Scale Adaptive Architecture + - trigger: validate-architecture + validate-workflow: "{project-root}/bmad/bmm/workflows/3-solutioning/architecture/workflow.yaml" + checklist: "{project-root}/bmad/bmm/workflows/3-solutioning/architecture/checklist.md" + document: "{output_folder}/architecture.md" + description: Validate Architecture Document + - trigger: solutioning-gate-check workflow: "{project-root}/bmad/bmm/workflows/3-solutioning/solutioning-gate-check/workflow.yaml" description: Validate solutioning complete, ready for Phase 4 (Level 2-4 only) diff --git a/src/modules/bmm/agents/pm.agent.yaml b/src/modules/bmm/agents/pm.agent.yaml index 00327c75..aaff7060 100644 --- a/src/modules/bmm/agents/pm.agent.yaml +++ b/src/modules/bmm/agents/pm.agent.yaml @@ -39,10 +39,12 @@ agent: workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/tech-spec/workflow.yaml" description: Create Tech Spec for Level 0-1 (sometimes Level 2) projects + - trigger: validate-tech-spec + validate-workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/tech-spec/workflow.yaml" + checklist: "{project-root}/bmad/bmm/workflows/2-plan-workflows/tech-spec/checklist.md" + document: "{output_folder}/tech-spec.md" + description: Validate Technical Specification Document + - trigger: correct-course workflow: "{project-root}/bmad/bmm/workflows/4-implementation/correct-course/workflow.yaml" description: Course Correction Analysis - - - trigger: validate - exec: "{project-root}/bmad/core/tasks/validate-workflow.xml" - description: Validate any document against its workflow checklist diff --git a/src/modules/bmm/agents/ux-designer.agent.yaml b/src/modules/bmm/agents/ux-designer.agent.yaml index bf8cfedc..c0d5c4ea 100644 --- a/src/modules/bmm/agents/ux-designer.agent.yaml +++ b/src/modules/bmm/agents/ux-designer.agent.yaml @@ -27,11 +27,7 @@ agent: description: Conduct Design Thinking Workshop to Define the User Specification - trigger: validate-design - workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/validate-ux-design/workflow.yaml" + validate-workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/create-ux-design/workflow.yaml" checklist: "{project-root}/bmad/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md" document: "{output_folder}/ux-spec.md" description: Validate UX Specification and Design Artifacts - - - trigger: ux-spec - workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/ux-spec/workflow.yaml" - description: Create UX/UI Specification and AI Frontend Prompts diff --git a/src/modules/bmm/workflows/2-plan-workflows/README.md b/src/modules/bmm/workflows/2-plan-workflows/README.md index 7f8aec86..7a20e960 100644 --- a/src/modules/bmm/workflows/2-plan-workflows/README.md +++ b/src/modules/bmm/workflows/2-plan-workflows/README.md @@ -97,9 +97,10 @@ The workflow adapts automatically based on project assessment, but key configura │ ├── instructions-narrative.md # Narrative design instructions │ ├── narrative-template.md # Narrative planning template │ └── workflow.yaml -└── ux/ - ├── instructions-ux.md # UX specification instructions - ├── ux-spec-template.md # UX specification template +└── create-ux-design/ + ├── instructions.md # UX design instructions + ├── ux-design-template.md # UX design template + ├── checklist.md # UX design validation checklist └── workflow.yaml ``` diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md index f307ed5e..3a5c67a9 100644 --- a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md @@ -205,7 +205,49 @@ --- -## 14. Decision Rationale +## 14. Cross-Workflow Alignment (Epics File Update) + +**As UX design progresses, you discover implementation details that affect the story breakdown** + +### Stories Discovered During UX Design + +- [ ] **Review epics.md file** for alignment with UX design +- [ ] **New stories identified** during UX design that weren't in epics.md: + - [ ] Custom component build stories (if significant) + - [ ] UX pattern implementation stories + - [ ] Animation/transition stories + - [ ] Responsive adaptation stories + - [ ] Accessibility implementation stories + - [ ] Edge case handling stories discovered during journey design + - [ ] Onboarding/empty state stories + - [ ] Error state handling stories + +### Story Complexity Adjustments + +- [ ] **Existing stories complexity reassessed** based on UX design: + - [ ] Stories that are now more complex (UX revealed additional requirements) + - [ ] Stories that are simpler (design system handles more than expected) + - [ ] Stories that should be split (UX design shows multiple components/flows) + - [ ] Stories that can be combined (UX design shows they're tightly coupled) + +### Epic Alignment + +- [ ] **Epic scope still accurate** after UX design +- [ ] **New epic needed** for discovered work (if significant) +- [ ] **Epic ordering might change** based on UX dependencies + +### Action Items for Epics File Update + +- [ ] **List of new stories to add** to epics.md documented +- [ ] **Complexity adjustments noted** for existing stories +- [ ] **Update epics.md** OR flag for architecture review first +- [ ] **Rationale documented** for why new stories/changes are needed + +**Note:** If significant story changes are identified, consider running architecture workflow BEFORE updating epics.md, since architecture decisions might reveal additional adjustments needed. + +--- + +## 15. Decision Rationale **Unlike template-driven workflows, this workflow should document WHY** @@ -219,7 +261,7 @@ --- -## 15. Implementation Readiness +## 16. Implementation Readiness - [ ] **Designers can create high-fidelity mockups** from this spec - [ ] **Developers can implement** with clear UX guidance @@ -231,7 +273,7 @@ --- -## 16. Critical Failures (Auto-Fail) +## 17. Critical Failures (Auto-Fail) - [ ] ❌ **No visual collaboration** (color themes or design mockups not generated) - [ ] ❌ **User not involved in decisions** (auto-generated without collaboration) diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/color-psychology.yaml b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/color-psychology.yaml deleted file mode 100644 index d596f7a4..00000000 --- a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/color-psychology.yaml +++ /dev/null @@ -1,337 +0,0 @@ -# Color Psychology - Guide for color theme generation -# Maps emotional goals, industries, and brand personalities to color strategies - -emotional_impacts: - trust_and_security: - primary_colors: ["Blue", "Navy", "Deep Blue"] - supporting_colors: ["Gray", "White", "Silver"] - avoid: ["Bright Red", "Neon colors", "Purple"] - industries: ["Finance", "Banking", "Insurance", "Healthcare", "Legal"] - personality: "Professional, Reliable, Stable, Trustworthy" - examples: ["PayPal", "Chase Bank", "Facebook", "LinkedIn"] - - energy_and_excitement: - primary_colors: ["Red", "Orange", "Bright Yellow"] - supporting_colors: ["Black", "White", "Dark Gray"] - avoid: ["Muted tones", "Pastels", "Brown"] - industries: ["Sports", "Entertainment", "Food & Beverage", "Events"] - personality: "Bold, Dynamic, Passionate, Energetic" - examples: ["Coca-Cola", "Netflix", "McDonald's", "Spotify"] - - creativity_and_innovation: - primary_colors: ["Purple", "Magenta", "Electric Blue", "Vibrant Green"] - supporting_colors: ["White", "Black", "Gradients"] - avoid: ["Corporate Blue", "Dull Gray", "Brown"] - industries: ["Tech Startups", "Design", "Creative", "Gaming"] - personality: "Innovative, Creative, Forward-thinking, Unique" - examples: ["Twitch", "Adobe Creative Cloud", "Discord", "Figma"] - - calm_and_wellness: - primary_colors: ["Soft Blue", "Green", "Teal", "Mint"] - supporting_colors: ["White", "Cream", "Light Gray", "Natural tones"] - avoid: ["Harsh Red", "Neon", "Dark/Heavy colors"] - industries: ["Healthcare", "Wellness", "Meditation", "Spa", "Fitness"] - personality: "Peaceful, Healthy, Natural, Balanced" - examples: ["Calm", "Headspace", "Fitbit", "Whole Foods"] - - luxury_and_sophistication: - primary_colors: ["Black", "Gold", "Deep Purple", "Burgundy"] - supporting_colors: ["White", "Cream", "Silver", "Dark Gray"] - avoid: ["Bright primary colors", "Pastels", "Neon"] - industries: ["Luxury Brands", "High-end Retail", "Premium Services"] - personality: "Elegant, Exclusive, Premium, Refined" - examples: ["Chanel", "Rolex", "Lexus", "Apple (premium products)"] - - friendly_and_approachable: - primary_colors: ["Warm Orange", "Coral", "Sunny Yellow", "Sky Blue"] - supporting_colors: ["White", "Cream", "Light Gray"] - avoid: ["Dark/Heavy colors", "Corporate Blue", "Black"] - industries: ["Education", "Community", "Social", "Consumer Apps"] - personality: "Friendly, Warm, Welcoming, Accessible" - examples: ["Mailchimp", "Airbnb", "Duolingo", "Slack"] - - minimal_and_modern: - primary_colors: ["Black", "White", "One accent color"] - supporting_colors: ["Light Gray", "Dark Gray", "Neutral tones"] - avoid: ["Multiple bright colors", "Gradients", "Heavy decoration"] - industries: ["Tech", "Design", "Fashion", "Architecture"] - personality: "Clean, Modern, Focused, Simple" - examples: ["Apple", "Stripe", "Medium", "Notion"] - - playful_and_fun: - primary_colors: ["Bright Pink", "Purple", "Turquoise", "Lime Green"] - supporting_colors: ["White", "Pastels", "Gradients"] - avoid: ["Corporate colors", "Muted tones", "All dark"] - industries: ["Kids", "Gaming", "Entertainment", "Creative Tools"] - personality: "Playful, Fun, Youthful, Energetic" - examples: ["Spotify (brand refresh)", "TikTok", "Snapchat", "Nintendo"] - - natural_and_organic: - primary_colors: ["Earth Green", "Brown", "Terracotta", "Sage"] - supporting_colors: ["Cream", "Beige", "Natural wood tones"] - avoid: ["Neon", "Artificial colors", "Harsh blacks"] - industries: ["Organic", "Sustainability", "Outdoor", "Food"] - personality: "Natural, Authentic, Earthy, Sustainable" - examples: ["Patagonia", "Whole Foods", "The Honest Company", "Allbirds"] - -color_meanings: - blue: - emotions: ["Trust", "Calm", "Professional", "Reliable", "Security"] - variations: - light_blue: "Calm, peaceful, open" - navy: "Professional, authoritative, corporate" - bright_blue: "Energy, tech, modern" - teal: "Sophisticated, unique, creative" - usage: "Most popular brand color, especially tech and finance" - caution: "Overused, can feel cold or corporate" - - red: - emotions: ["Passion", "Energy", "Urgency", "Love", "Danger"] - variations: - bright_red: "Excitement, urgency, action" - dark_red: "Sophistication, luxury" - coral: "Friendly, warm, modern" - usage: "CTAs, warnings, important actions" - caution: "Can be aggressive, use sparingly" - - green: - emotions: ["Growth", "Nature", "Health", "Wealth", "Harmony"] - variations: - bright_green: "Energy, growth, fresh" - forest_green: "Stable, wealthy, traditional" - mint: "Fresh, modern, calm" - lime: "Playful, energetic, youthful" - usage: "Sustainability, health, finance (money)" - caution: "Can feel too natural or environmental" - - yellow: - emotions: ["Happiness", "Optimism", "Warmth", "Caution"] - variations: - bright_yellow: "Happy, energetic, attention-grabbing" - gold: "Luxury, premium, celebration" - mustard: "Warm, retro, sophisticated" - usage: "Accents, highlights, warnings" - caution: "Hard to read on white, can be overwhelming" - - purple: - emotions: ["Creativity", "Luxury", "Wisdom", "Spirituality"] - variations: - bright_purple: "Creative, fun, modern" - deep_purple: "Luxury, sophistication" - lavender: "Calm, gentle, feminine" - usage: "Creative brands, beauty, luxury" - caution: "Can feel too feminine or spiritual for some brands" - - orange: - emotions: ["Energy", "Enthusiasm", "Creativity", "Fun"] - variations: - bright_orange: "Energy, playful, attention" - burnt_orange: "Warm, autumn, natural" - coral: "Friendly, modern, approachable" - usage: "CTAs, playful brands, food" - caution: "Can be overwhelming, use as accent" - - pink: - emotions: ["Playfulness", "Romance", "Youthfulness", "Compassion"] - variations: - hot_pink: "Bold, modern, energetic" - soft_pink: "Gentle, romantic, calming" - neon_pink: "Edgy, youthful, attention-grabbing" - usage: "Beauty, fashion, modern brands breaking gender norms" - caution: "Traditionally gendered, modern usage is more diverse" - - black: - emotions: ["Sophistication", "Luxury", "Power", "Modern"] - usage: "Luxury brands, text, backgrounds, minimalist designs" - best_with: ["White", "Gold", "Silver", "One bright accent"] - caution: "Can feel heavy or dark if overused" - - white: - emotions: ["Purity", "Simplicity", "Clean", "Modern"] - usage: "Backgrounds, spacing, minimalist designs" - best_with: "Any color as accent" - caution: "Needs color for visual interest" - - gray: - emotions: ["Neutral", "Professional", "Sophisticated", "Modern"] - variations: - light_gray: "Subtle, backgrounds, dividers" - charcoal: "Professional, modern, readable" - usage: "Neutral backgrounds, text, shadows" - caution: "Can feel boring or corporate if sole color" - -semantic_colors: - success: - recommended: ["Green", "Teal", "Blue-Green"] - meaning: "Completion, correct, positive action" - usage: "Success messages, confirmations, completed states" - - error: - recommended: ["Red", "Crimson", "Dark Red"] - meaning: "Failure, incorrect, warning" - usage: "Error messages, validation failures, destructive actions" - - warning: - recommended: ["Orange", "Amber", "Yellow"] - meaning: "Caution, attention needed, important" - usage: "Warnings, important notices, confirmations needed" - - info: - recommended: ["Blue", "Light Blue", "Purple"] - meaning: "Information, neutral notification" - usage: "Info messages, tips, neutral notifications" - -color_palette_structures: - monochromatic: - description: "Shades and tints of single color" - good_for: "Minimalist, cohesive, simple" - example: "Various blues from light to dark" - difficulty: "Easy" - - analogous: - description: "Colors next to each other on color wheel" - good_for: "Harmonious, natural, cohesive" - example: "Blue, blue-green, green" - difficulty: "Easy" - - complementary: - description: "Colors opposite on color wheel" - good_for: "High contrast, vibrant, attention-grabbing" - example: "Blue and orange" - difficulty: "Moderate (can be jarring)" - - triadic: - description: "Three colors evenly spaced on wheel" - good_for: "Vibrant, balanced, playful" - example: "Red, yellow, blue" - difficulty: "Moderate" - - split_complementary: - description: "Base color + two adjacent to complement" - good_for: "Balanced, sophisticated, interesting" - example: "Blue, red-orange, yellow-orange" - difficulty: "Moderate" - - 60_30_10_rule: - description: "60% dominant, 30% secondary, 10% accent" - good_for: "Balanced, professional, not overwhelming" - application: - dominant_60: "Background, main surfaces" - secondary_30: "Cards, secondary surfaces, navigation" - accent_10: "CTAs, highlights, important elements" - -industry_color_trends: - tech: - trending: ["Blue (trust)", "Purple (innovation)", "Gradients", "Dark mode"] - examples: ["Facebook Blue", "Stripe Purple", "GitHub Dark"] - - finance: - traditional: ["Blue", "Green (money)", "Navy", "Gold"] - modern: ["Bright Blue", "Teal", "Black with accent"] - - healthcare: - traditional: ["Blue (trust)", "Green (health)", "White (clean)"] - modern: ["Teal", "Soft Blue", "Mint", "Warm accents"] - - ecommerce: - trending: ["Bold colors", "Black & White with accent", "Trust colors"] - cta_colors: ["Orange", "Red", "Bright Green", "for 'Buy' buttons"] - - saas: - trending: ["Blue (trust)", "Purple (innovation)", "Modern Gradients"] - avoid: ["Dull gray", "Brown", "Too many colors"] - - education: - traditional: ["Red", "Blue", "Green", "Yellow (primary colors)"] - modern: ["Friendly Blue", "Warm Orange", "Playful Purple"] - - food_beverage: - appetite: ["Red (stimulates)", "Orange", "Yellow", "Brown (natural)"] - healthy: ["Green", "Earth tones", "Natural colors"] - -theme_generation_strategies: - by_brand_personality: - professional: - primary: "Navy Blue or Charcoal" - secondary: "Light Gray" - accent: "Subtle Blue or Green" - style: "Minimal, clean, trustworthy" - - playful: - primary: "Bright Purple or Turquoise" - secondary: "White" - accent: "Pink or Yellow" - style: "Gradients, rounded, fun" - - luxury: - primary: "Black" - secondary: "White or Cream" - accent: "Gold or Deep Purple" - style: "Sophisticated, minimal, high-end" - - friendly: - primary: "Warm Orange or Coral" - secondary: "Cream or Light Blue" - accent: "Sunny Yellow or Teal" - style: "Warm, approachable, welcoming" - - by_target_audience: - gen_z: - style: "Bold, gradients, high contrast, playful" - colors: ["Bright Purple", "Neon Green", "Hot Pink", "Electric Blue"] - - millennials: - style: "Modern, subtle gradients, sophisticated" - colors: ["Teal", "Coral", "Muted Purple", "Navy"] - - business_professionals: - style: "Clean, professional, trustworthy" - colors: ["Navy", "Charcoal", "Subtle Blue", "Gray"] - - children: - style: "Bright, primary colors, playful" - colors: ["Primary Red", "Bright Yellow", "Sky Blue", "Grass Green"] - -accessibility_considerations: - contrast_ratios: - wcag_aa_normal: "4.5:1 minimum for normal text" - wcag_aa_large: "3:1 minimum for large text (18pt+ or 14pt+ bold)" - wcag_aaa_normal: "7:1 minimum for normal text (enhanced)" - - color_blindness: - types: - - "Deuteranopia (red-green, most common)" - - "Protanopia (red-green)" - - "Tritanopia (blue-yellow, rare)" - - "Achromatopsia (total color blindness, very rare)" - - safe_combinations: - - "Blue and Orange (safe for all types)" - - "Blue and Yellow (safe for red-green)" - - "Purple and Yellow (safe for most)" - - avoid: - - "Red and Green alone (confusing for red-green colorblind)" - - "Blue and Purple alone (hard to distinguish)" - - "Relying only on color (always pair with icon/text)" - - testing_tools: - - "Stark (Figma plugin)" - - "Color Oracle (simulator)" - - "WebAIM Contrast Checker" - - "Coblis Color Blindness Simulator" - -dark_mode_considerations: - benefits: ["Reduced eye strain", "Battery savings (OLED)", "Modern aesthetic", "User preference"] - - color_adjustments: - primary: "Often brighter/more saturated in dark mode" - backgrounds: "True black (#000) vs dark gray (#1a1a1a)" - text: "Not pure white (use #e0e0e0 for less harsh)" - shadows: "Use lighter shadows or colored glows" - - common_issues: - - "Pure black can cause smearing on OLED" - - "Colors appear more vibrant on dark backgrounds" - - "Need different contrast ratios" - - "Shadows don't work (use borders/elevation instead)" diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md index d0e78348..122a2051 100644 --- a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md @@ -37,7 +37,7 @@ For integrated use, run `workflow-init` first for better context. - + A UX designer must understand the WHY before designing the HOW Attempt to load context documents using fuzzy matching: - PRD: {prd_file} - Product Brief: {brief_file} - Brainstorming: {brainstorm_file} @@ -53,6 +53,14 @@ For integrated use, run `workflow-init` first for better context. - Brand personality hints - Competitive landscape references + + I've loaded your project documentation. Let me confirm what I'm seeing: + +**Project:** {{project_summary_from_docs}} +**Target Users:** {{user_summary_from_docs}} + + Does this match your understanding? Any corrections or additions? + @@ -63,17 +71,11 @@ For integrated use, run `workflow-init` first for better context. **Who is this for?** Describe your ideal user. - - I've loaded your project documentation. Let me confirm what I'm seeing: +project_and_users_confirmed + -**Project:** {{project_summary_from_docs}} -**Target Users:** {{user_summary_from_docs}} - -Does this match your understanding? - - Sounds good? Any corrections? - - + + Now we discover the ONE thing that defines this experience Now let's dig into the experience itself. @@ -86,6 +88,12 @@ Does this match your understanding? **Platform:** Where will users experience this? (Web, mobile app, desktop, multiple platforms) +core_experience_and_platform + + + + Emotion drives behavior - this shapes everything + This is crucial - **what should users FEEL when using this?** Not what they'll do, but what emotion or state they should experience: @@ -100,43 +108,45 @@ Not what they'll do, but what emotion or state they should experience: Really think about the emotional response you want. What feeling would make them tell a friend about this? +desired_emotional_response + + + + Learn from what users already love + **Inspiration time!** Name 2-3 apps your users already love and USE regularly. -For each one, tell me: - -- What do they do well from a UX perspective? -- What makes the experience compelling? - Feel free to share: - App names (I'll look them up to see current UX) - Screenshots (if you have examples of what you like) -- Links to products or demos +- Links to products or demos - For each app mentioned: - {{app_name}} current interface UX design 2025 - Analyze what makes that app's UX effective - Note patterns and principles that could apply to this project - +For each one, what do they do well from a UX perspective? What makes the experience compelling? - If screenshots provided: - Analyze screenshots for UX patterns, visual style, interaction patterns - Note what user finds compelling about these examples - +For each app mentioned: +{{app_name}} current interface UX design 2025 +Analyze what makes that app's UX effective +Note patterns and principles that could apply to this project + - Analyze project for UX complexity indicators: - - Number of distinct user roles or personas - - Number of primary user journeys - - Interaction complexity (simple CRUD vs rich interactions) - - Platform requirements (single vs multi-platform) - - Real-time collaboration needs - - Content creation vs consumption - - Novel interaction patterns - +If screenshots provided: +Analyze screenshots for UX patterns, visual style, interaction patterns +Note what user finds compelling about these examples + - Based on {user_skill_level}, set facilitation approach: +inspiration_analysis + + + + Now analyze complexity and set the right facilitation approach + +Analyze project for UX complexity indicators: - Number of distinct user roles or personas - Number of primary user journeys - Interaction complexity (simple CRUD vs rich interactions) - Platform requirements (single vs multi-platform) - Real-time collaboration needs - Content creation vs consumption - Novel interaction patterns + + +Based on {user_skill_level}, set facilitation approach: Set mode: UX_EXPERT @@ -161,11 +171,10 @@ Feel free to share: - Focus on "why this matters for users" - Protect from overwhelming choices + - Synthesize and reflect understanding back to {user_name}: - -"Here's what I'm understanding about {{project_name}}: +Here's what I'm understanding about {{project_name}}: **Vision:** {{project_vision_summary}} **Users:** {{user_summary}} @@ -176,10 +185,7 @@ Feel free to share: **UX Complexity:** {{complexity_assessment}} -This helps me understand both what we're building and the experience we're aiming for. It will guide every design decision we make together." - - -Does this capture your vision? Anything I'm missing or misunderstanding? +This helps me understand both what we're building and the experience we're aiming for. Let's start designing! Load UX design template: {template} Initialize output document at {default_output_file} @@ -277,9 +283,8 @@ Or tell me: design_system_decision - - Every great app has a defining experience - identify and design it - Some projects need INVENTED UX patterns, not just standard solutions + + Every great app has a defining experience - identify it first Based on PRD/brief analysis, identify the core user experience: - What is the primary action users will repeat? - What makes this app unique vs. competitors? - What should be delightfully easy? @@ -319,62 +324,96 @@ When someone describes your app to a friend, what would they say? +defining_experience + + + + Skip this step if standard patterns apply. Run only if novel pattern detected. + - Engage in collaborative UX pattern design: - "The {{pattern_name}} interaction is novel - no established pattern exists yet! + The **{{pattern_name}}** interaction is novel - no established pattern exists yet! - Core UX challenge: {{challenge_description}} +Core UX challenge: {{challenge_description}} - This is exciting - we get to invent the user experience together. Let's design this interaction by thinking through: +This is exciting - we get to invent the user experience together. Let's design this interaction systematically. - 1. **User Goal:** What does the user want to accomplish? - 2. **Trigger:** How should they initiate this action? (button, gesture, voice, drag, etc.) - 3. **Feedback:** What should they see/feel happening? - 4. **Success:** How do they know it succeeded? - 5. **Errors:** What if something goes wrong? How do they recover? + Let's think through the core mechanics of this {{pattern_name}} interaction: - Walk me through your mental model for this interaction - the ideal experience from the user's perspective." - +1. **User Goal:** What does the user want to accomplish? +2. **Trigger:** How should they initiate this action? (button, gesture, voice, drag, etc.) +3. **Feedback:** What should they see/feel happening? +4. **Success:** How do they know it succeeded? +5. **Errors:** What if something goes wrong? How do they recover? - Use advanced elicitation for UX innovation: - "Let's explore this interaction more deeply. +Walk me through your mental model for this interaction - the ideal experience from the user's perspective. - - What apps have SIMILAR (not identical) patterns we could learn from? - - What's the absolute fastest this action could complete? - - What's the most delightful way to give feedback? - - Should this work on mobile differently than desktop? - - What would make someone show this to a friend?" - - - Document the novel UX pattern: - Pattern Name: {{pattern_name}} - User Goal: {{what_user_accomplishes}} - Trigger: {{how_initiated}} - Interaction Flow: - 1. {{step_1}} - 2. {{step_2}} - 3. {{step_3}} - Visual Feedback: {{what_user_sees}} - States: {{default_loading_success_error}} - Platform Considerations: {{desktop_vs_mobile_vs_tablet}} - Accessibility: {{keyboard_screen_reader_support}} - Inspiration: {{similar_patterns_from_other_apps}} - + novel_pattern_mechanics -Define the core experience principles: - Speed: How fast should key actions feel? - Guidance: How much hand-holding do users need? - Flexibility: How much control vs. simplicity? - Feedback: Subtle or celebratory? + + Skip to Step 3d - standard patterns apply + + + + + Skip if not designing novel pattern + + + Let's explore the {{pattern_name}} interaction more deeply to make it exceptional: + +- **Similar Patterns:** What apps have SIMILAR (not identical) patterns we could learn from? +- **Speed:** What's the absolute fastest this action could complete? +- **Delight:** What's the most delightful way to give feedback? +- **Platform:** Should this work on mobile differently than desktop? +- **Shareability:** What would make someone show this to a friend? + + Document the novel UX pattern: + Pattern Name: {{pattern_name}} + User Goal: {{what_user_accomplishes}} + Trigger: {{how_initiated}} + Interaction Flow: + 1. {{step_1}} + 2. {{step_2}} + 3. {{step_3}} + Visual Feedback: {{what_user_sees}} + States: {{default_loading_success_error}} + Platform Considerations: {{desktop_vs_mobile_vs_tablet}} + Accessibility: {{keyboard_screen_reader_support}} + Inspiration: {{similar_patterns_from_other_apps}} + + + novel_pattern_details + + + + + Skip to Step 3d - standard patterns apply + + + + + Establish the guiding principles for the entire experience + +Based on the defining experience and any novel patterns, define the core experience principles: - Speed: How fast should key actions feel? - Guidance: How much hand-holding do users need? - Flexibility: How much control vs. simplicity? - Feedback: Subtle or celebratory? -core_experience -novel_ux_patterns +Core experience principles established: + +**Speed:** {{speed_principle}} +**Guidance:** {{guidance_principle}} +**Flexibility:** {{flexibility_principle}} +**Feedback:** {{feedback_principle}} + +These principles will guide every UX decision from here forward. + +core_experience_principles Visual design isn't decoration - it communicates brand and guides attention SHOW options, don't just describe them - generate HTML visualizations - -Load color psychology data: {color_psychology} + Use color psychology principles: blue=trust, red=energy, green=growth/calm, purple=creativity, etc. Do you have existing brand guidelines or a specific color palette in mind? (y/n) @@ -512,6 +551,7 @@ What speaks to you? This is the game-changer - SHOW actual design directions, don't just discuss them Users make better decisions when they SEE options, not imagine them + Consider platform norms: desktop apps often use sidebar nav, mobile apps use bottom nav or tabs Based on PRD and core experience, identify 2-3 key screens to mock up: @@ -529,7 +569,7 @@ What speaks to you? -Generate 6-8 different design direction variations: +Generate 6-8 different design direction variations exploring different UX approaches: Vary these dimensions: @@ -839,8 +879,7 @@ Component: {{custom_component_name}} These are implementation patterns for UX - ensure consistency across the app Like the architecture workflow's implementation patterns, but for user experience - -Load UX pattern catalog: {ux_pattern_catalog} + These decisions prevent "it works differently on every page" confusion Based on chosen components and journeys, identify UX consistency decisions needed: @@ -905,17 +944,38 @@ Component: {{custom_component_name}} -For each pattern category, facilitate decision: +I've identified {{pattern_count}} UX pattern categories that need consistent decisions across your app. Let's make these decisions together to ensure users get a consistent experience. - For each pattern, present options and recommendation: - "Let's decide how {{pattern_category}} works throughout your app. +These patterns determine how {{project_name}} behaves in common situations - like how buttons work, how forms validate, how modals behave, etc. - If we don't decide now, it might work differently on different screens and confuse users. +For each pattern category below, I'll present options and a recommendation. Tell me your preferences or ask questions. - **Options:** {{option_a}} vs {{option_b}} vs {{option_c_if_applicable}} +**Pattern Categories to Decide:** - **My Recommendation:** {{choice}} for {{reason}}" - +- Button hierarchy (primary, secondary, destructive) +- Feedback patterns (success, error, loading) +- Form patterns (labels, validation, help text) +- Modal patterns (size, dismiss, focus) +- Navigation patterns (active state, back button) +- Empty state patterns +- Confirmation patterns (delete, unsaved changes) +- Notification patterns +- Search patterns +- Date/time patterns + +For each one, do you want to: + +1. Go through each pattern category one by one (thorough) +2. Focus only on the most critical patterns for your app (focused) +3. Let me recommend defaults and you override where needed (efficient) + +Based on user choice, facilitate pattern decisions with appropriate depth: - If thorough: Present all categories with options and reasoning - If focused: Identify 3-5 critical patterns based on app type - If efficient: Recommend smart defaults, ask for overrides + + For each pattern decision, document: + - Pattern category + - Chosen approach + - Rationale (why this choice for this app) + - Example scenarios where it applies @@ -1064,6 +1124,128 @@ Based on your deployment intent: {{recommendation}} +🎨 **One more thing!** Want to see your design come to life? + +I can generate interactive HTML mockups using all your design choices: + +**1. Key Screens Showcase** - 6-8 panels showing your app's main screens (home, core action, settings, etc.) with your chosen: + +- Color theme and typography +- Design direction and layout +- Component styles +- Navigation patterns + +**2. User Journey Visualization** - Step-by-step HTML mockup of one of your critical user journeys with: + +- Each screen in the flow +- Interactive transitions +- Success states and feedback +- All your design decisions applied + +**3. Something else** - Tell me what you want to see! + +**4. Skip for now** - I'll just finalize the documentation + +What would you like? + + + Generate comprehensive multi-panel HTML showcase: + + Create: {final_app_showcase_html} + + Include 6-8 screens representing: + - Landing/Home screen + - Main dashboard or feed + - Core action screen (primary user task) + - Profile or settings + - Create/Edit screen + - Results or success state + - Modal/dialog examples + - Empty states + + Apply ALL design decisions: + - {{chosen_color_theme}} with exact colors + - {{chosen_design_direction}} layout and hierarchy + - {{design_system}} components styled per decisions + - {{typography_system}} applied consistently + - {{spacing_system}} and responsive breakpoints + - {{ux_patterns}} for consistency + - {{accessibility_requirements}} + + Make it interactive: + - Hover states on buttons + - Tab switching where applicable + - Modal overlays + - Form validation states + - Navigation highlighting + + Output as single HTML file with inline CSS and minimal JavaScript + + + ✨ **Created: {final_app_showcase_html}** + +Open this file in your browser to see {{project_name}} come to life with all your design choices applied! You can: + +- Navigate between screens +- See hover and interactive states +- Experience your chosen design direction +- Share with stakeholders for feedback + +This showcases exactly what developers will build. + + + + Which user journey would you like to visualize? + +{{list_of_designed_journeys}} + +Pick one, or tell me which flow you want to see! + + Generate step-by-step journey HTML: + + Create: {journey_visualization_html} + + For {{selected_journey}}: + - Show each step as a full screen + - Include navigation between steps (prev/next buttons) + - Apply all design decisions consistently + - Show state changes and feedback + - Include success/error scenarios + - Annotate design decisions on hover + + Make it feel like a real user flow through the app + + + ✨ **Created: {journey_visualization_html}** + +Walk through the {{selected_journey}} flow step-by-step in your browser! This shows the exact experience users will have, with all your UX decisions applied. + + + + Tell me what you'd like to visualize! I can generate HTML mockups for: +- Specific screens or features +- Interactive components +- Responsive breakpoint comparisons +- Accessibility features in action +- Animation and transition concepts +- Whatever you envision! + +What should I create? + + Generate custom HTML visualization based on user request: + - Parse what they want to see + - Apply all relevant design decisions + - Create interactive HTML mockup + - Make it visually compelling and functional + + + ✨ **Created: {{custom_visualization_file}}** + +{{description_of_what_was_created}} + +Open in browser to explore! + + **✅ UX Design Specification Complete!** **Core Deliverables:** diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/layout-patterns.yaml b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/layout-patterns.yaml deleted file mode 100644 index bc2f8981..00000000 --- a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/layout-patterns.yaml +++ /dev/null @@ -1,419 +0,0 @@ -# Layout Patterns - Guide for design direction generation -# Maps project types and content to layout strategies - -navigation_patterns: - sidebar_navigation: - description: "Vertical navigation panel on left or right" - best_for: ["Desktop apps", "Dashboards", "Admin panels", "Content-heavy sites"] - not_ideal_for: ["Simple sites", "Mobile-only", "Few sections (<5)"] - - variants: - always_visible: - description: "Sidebar always shown on desktop" - width: "200-280px" - good_for: "Frequent navigation, many sections" - - collapsible: - description: "Can collapse to icons only" - collapsed_width: "60-80px" - expanded_width: "200-280px" - good_for: "Space efficiency, user control" - - mini_sidebar: - description: "Icons only, expands on hover" - collapsed_width: "60-80px" - good_for: "Maximum content space, familiar users" - - mobile_strategy: "Hamburger menu or bottom nav" - examples: ["Notion", "Slack", "VS Code", "Gmail"] - - top_navigation: - description: "Horizontal navigation bar at top" - best_for: ["Marketing sites", "Simple apps", "Few sections", "Mobile-friendly"] - not_ideal_for: ["Many menu items (>7)", "Deep hierarchies"] - - variants: - horizontal_menu: - description: "Simple horizontal list" - max_items: "5-7" - good_for: "Simple sites, clear hierarchy" - - mega_menu: - description: "Dropdown panels with rich content" - good_for: "Complex sites, many subsections, ecommerce" - - sticky_header: - description: "Nav stays at top when scrolling" - good_for: "Easy access, wayfinding" - considerations: "Takes screen space, can annoy users" - - mobile_strategy: "Hamburger menu" - examples: ["Apple", "Stripe", "Most marketing sites"] - - tab_navigation: - description: "Horizontal tabs for section switching" - best_for: ["Related content", "Settings", "Multi-view pages"] - not_ideal_for: ["Unrelated sections", "Too many tabs (>7)"] - max_tabs: "5-7 recommended" - placement: ["Below header", "Page level", "Within cards"] - examples: ["Settings pages", "Product details", "Profile pages"] - - bottom_navigation: - description: "Navigation bar at bottom (mobile)" - best_for: ["Mobile apps", "3-5 primary sections", "Quick switching"] - not_ideal_for: ["Desktop", "Many sections", "Deep hierarchies"] - ideal_items: "3-5 (4 is optimal)" - each_item: "Icon + short label" - examples: ["Instagram", "Twitter app", "Most mobile apps"] - - floating_action_button: - description: "Primary action button floating over content" - best_for: ["Mobile apps", "Single primary action", "Content-first"] - placement: "Bottom-right (usually)" - examples: ["Gmail (compose)", "Google Maps (directions)", "Notes (new note)"] - -content_organization: - card_based: - description: "Content in distinct card containers" - best_for: ["Scannable content", "Mixed content types", "Visual hierarchy"] - not_ideal_for: ["Dense data", "Text-heavy content"] - - variants: - grid: - description: "Equal-sized cards in grid" - good_for: "Products, gallery, uniform items" - examples: ["Pinterest", "Airbnb listings", "YouTube videos"] - - masonry: - description: "Variable-height cards in columns" - good_for: "Mixed content heights, visual interest" - examples: ["Pinterest", "Unsplash", "Dribbble"] - - horizontal_scroll: - description: "Cards in horizontal row" - good_for: "Categories, featured items, mobile" - examples: ["Netflix rows", "App Store Today"] - - styling: - elevated: "Drop shadows, floating appearance" - bordered: "Subtle borders, flat appearance" - - spacing: - tight: "8-12px gaps (dense, lots of content)" - medium: "16-24px gaps (balanced)" - spacious: "32-48px gaps (premium, breathing room)" - - list_based: - description: "Linear list of items" - best_for: ["Scannable data", "Chronological content", "Dense information"] - not_ideal_for: ["Visual content", "Products", "Gallery"] - - variants: - simple_list: - description: "Text-only list" - good_for: "Simple data, settings, menus" - - rich_list: - description: "Items with images, meta, actions" - good_for: "Email, messages, activity feeds" - examples: ["Gmail inbox", "Twitter feed", "LinkedIn feed"] - - grouped_list: - description: "Lists with section headers" - good_for: "Categorized content, settings" - - interaction: - clickable_rows: "Entire row is clickable" - action_buttons: "Explicit action buttons in row" - swipe_actions: "Swipe to reveal actions (mobile)" - - table_based: - description: "Data in rows and columns" - best_for: ["Structured data", "Comparisons", "Admin panels", "Analytics"] - not_ideal_for: ["Mobile", "Varied content", "Storytelling"] - - mobile_strategy: - horizontal_scroll: "Scroll table horizontally" - hide_columns: "Show only essential columns" - card_view: "Convert each row to card" - - features: - - "Sortable columns" - - "Filterable data" - - "Pagination or infinite scroll" - - "Row selection" - - "Inline editing" - - examples: ["Admin dashboards", "Analytics", "Data management"] - - dashboard_layout: - description: "Widget-based information display" - best_for: ["Data visualization", "Monitoring", "Analytics", "Admin"] - - patterns: - fixed_grid: - description: "Predefined widget positions" - good_for: "Consistent layout, simple dashboards" - - customizable_grid: - description: "Users can rearrange widgets" - good_for: "Power users, personalization" - examples: ["Google Analytics", "Jira dashboards"] - - responsive_grid: - description: "Widgets reflow based on screen size" - good_for: "Mobile support, adaptive layouts" - - feed_based: - description: "Continuous stream of content" - best_for: ["Social media", "News", "Activity", "Discovery"] - - loading: - infinite_scroll: "Load more as user scrolls" - load_more_button: "Explicit action to load more" - pagination: "Page numbers for browsing" - - examples: ["Facebook", "Twitter", "Instagram", "LinkedIn"] - -layout_density: - spacious: - description: "Lots of white space, breathing room" - spacing: "32-64px between sections" - card_padding: "24-32px" - best_for: ["Premium brands", "Focus", "Minimal content"] - examples: ["Apple", "Stripe landing", "Premium portfolios"] - feeling: "Premium, focused, calm, elegant" - - balanced: - description: "Moderate spacing, comfortable reading" - spacing: "16-32px between sections" - card_padding: "16-24px" - best_for: ["Most applications", "General content"] - examples: ["Medium", "Notion", "Most SaaS apps"] - feeling: "Professional, balanced, clear" - - dense: - description: "Compact layout, maximum information" - spacing: "8-16px between sections" - card_padding: "12-16px" - best_for: ["Data-heavy", "Power users", "Admin panels"] - examples: ["Gmail", "Google Analytics", "IDE interfaces"] - feeling: "Efficient, information-rich, powerful" - -content_hierarchy: - hero_first: - description: "Large hero section, then supporting content" - best_for: ["Marketing sites", "Landing pages", "Product pages"] - hero_height: "60-100vh" - examples: ["Stripe", "Apple product pages", "SaaS landing pages"] - - content_first: - description: "Jump straight to content, minimal header" - best_for: ["Blogs", "News", "Content platforms", "Reading"] - examples: ["Medium", "News sites", "Wikipedia"] - - balanced_hierarchy: - description: "Clear but not overwhelming hero" - best_for: ["General applications", "Balanced focus"] - hero_height: "40-60vh" - -visual_weight: - minimal: - description: "Flat, no shadows, subtle borders" - characteristics: - - "No or minimal shadows" - - "Flat colors" - - "Thin or no borders" - - "Lots of white space" - best_for: ["Modern brands", "Focus", "Clarity"] - examples: ["Apple", "Google (recent)", "Superhuman"] - - subtle_depth: - description: "Light shadows, gentle elevation" - characteristics: - - "Subtle drop shadows" - - "Light borders" - - "Layered appearance" - - "Comfortable spacing" - best_for: ["Most applications", "Professional look"] - examples: ["Notion", "Airtable", "Linear"] - - material_depth: - description: "Distinct shadows, clear elevation" - characteristics: - - "Defined shadows" - - "Clear layering" - - "Elevation system" - - "Floating elements" - best_for: ["Tactile feel", "Clarity", "Guidance"] - examples: ["Material Design apps", "Gmail", "Google Drive"] - - rich_visual: - description: "Gradients, textures, visual interest" - characteristics: - - "Gradients" - - "Background patterns" - - "Visual flourishes" - - "Rich shadows" - best_for: ["Consumer brands", "Engagement", "Delight"] - examples: ["Stripe (gradients)", "Instagram", "Spotify"] - -column_layouts: - single_column: - description: "One content column, centered" - max_width: "600-800px" - best_for: ["Reading", "Focus", "Mobile-first", "Forms"] - examples: ["Medium articles", "Substack", "Simple apps"] - - two_column: - description: "Main content + sidebar" - ratios: - main_sidebar: "2:1 or 3:1 (main content wider)" - equal: "1:1 (rare, only for equal importance)" - best_for: ["Blogs with sidebar", "Docs with nav", "Dashboard with filters"] - mobile_strategy: "Stack vertically" - - three_column: - description: "Left nav + main content + right sidebar" - typical_use: "Left nav, center content, right metadata/ads" - best_for: ["Complex apps", "Social media", "News sites"] - mobile_strategy: "Collapse to single column with hamburger" - examples: ["Twitter", "Reddit", "Facebook"] - - multi_column_grid: - description: "2, 3, 4, or more columns" - columns: - two: "Tablets, small screens" - three: "Desktop standard" - four_plus: "Large screens, galleries" - best_for: ["Products", "Gallery", "Cards", "Uniform content"] - responsive: - mobile: "1 column" - tablet: "2 columns" - desktop: "3-4 columns" - large_desktop: "4-6 columns" - -modal_and_overlay_patterns: - center_modal: - sizes: ["Small (400-500px)", "Medium (600-800px)", "Large (900-1200px)"] - best_for: ["Forms", "Confirmations", "Detailed content"] - - drawer_side_panel: - position: "Right (common) or left" - width: "320-600px" - best_for: ["Filters", "Settings", "Details", "Navigation"] - examples: ["E-commerce filters", "Gmail compose", "Slack channel details"] - - fullscreen_modal: - description: "Takes entire viewport" - best_for: ["Mobile primarily", "Complex forms", "Immersive content"] - mobile: "Often default on mobile" - - popover: - description: "Small overlay near trigger element" - best_for: ["Tooltips", "Quick actions", "Contextual menus"] - size: "Small (200-400px)" - -responsive_strategies: - mobile_first: - approach: "Design for mobile, enhance for desktop" - best_for: ["Consumer apps", "High mobile traffic", "Content-first"] - breakpoints: - - "Mobile: 320-767px (base design)" - - "Tablet: 768-1023px (add space, possibly columns)" - - "Desktop: 1024px+ (full layout, sidebars)" - - desktop_first: - approach: "Design for desktop, adapt for mobile" - best_for: ["B2B apps", "Desktop-heavy usage", "Complex interfaces"] - consideration: "Risk of poor mobile experience" - - adaptive_layout: - approach: "Different layouts for different screens, not just scaling" - examples: - - "Desktop: Sidebar nav | Mobile: Bottom nav" - - "Desktop: 3 columns | Tablet: 2 columns | Mobile: 1 column" - - "Desktop: Table | Mobile: Card list" - -design_direction_variations: - # These combine multiple patterns to create distinct design approaches - - dense_dashboard: - description: "Information-rich, efficient, power user focused" - patterns: - navigation: "Mini sidebar or always-visible sidebar" - content: "Dashboard layout with widgets" - density: "Dense" - visual_weight: "Minimal or subtle depth" - hierarchy: "Balanced, not hero-heavy" - best_for: ["Analytics", "Admin panels", "Data tools", "Power users"] - - spacious_explorer: - description: "Generous spacing, discovery-oriented, visual" - patterns: - navigation: "Top nav or hidden sidebar" - content: "Card-based grid or masonry" - density: "Spacious" - visual_weight: "Rich visual or subtle depth" - hierarchy: "Hero-first or balanced" - best_for: ["Content platforms", "Discovery", "Visual products", "Inspiration"] - - focused_creator: - description: "Minimal distractions, content creation focus" - patterns: - navigation: "Minimal top bar or hidden" - content: "Single column or two-column with tools" - density: "Spacious to balanced" - visual_weight: "Minimal" - hierarchy: "Content-first" - best_for: ["Writing tools", "Editors", "Creative apps", "Focus work"] - - social_feed: - description: "Engagement-focused, endless content, familiar" - patterns: - navigation: "Top bar + bottom nav (mobile)" - content: "Feed-based with rich cards" - density: "Balanced" - visual_weight: "Subtle depth to rich" - hierarchy: "Content-first" - best_for: ["Social media", "Content feeds", "Community platforms"] - - enterprise_portal: - description: "Professional, data-heavy, multi-section" - patterns: - navigation: "Sidebar (always visible or collapsible)" - content: "Dashboard or table-based" - density: "Dense to balanced" - visual_weight: "Minimal to subtle" - hierarchy: "Balanced" - best_for: ["B2B SaaS", "Admin tools", "Enterprise apps"] - - marketing_showcase: - description: "Visual storytelling, conversion-focused, impressive" - patterns: - navigation: "Top nav (sticky or hero)" - content: "Hero-first with sections" - density: "Spacious" - visual_weight: "Rich visual" - hierarchy: "Hero-first" - best_for: ["Landing pages", "Marketing sites", "Product showcases"] - - minimal_focus: - description: "Distraction-free, content-centric, elegant" - patterns: - navigation: "Minimal or hidden" - content: "Single column, centered" - density: "Spacious" - visual_weight: "Minimal" - hierarchy: "Content-first" - best_for: ["Reading", "Focus apps", "Premium brands", "Portfolios"] - - playful_interactive: - description: "Fun, engaging, delightful, consumer-friendly" - patterns: - navigation: "Creative (could be any, with personality)" - content: "Card-based or custom layouts" - density: "Balanced to spacious" - visual_weight: "Rich visual" - hierarchy: "Hero or balanced" - best_for: ["Consumer apps", "Gaming", "Entertainment", "Kids"] diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-pattern-catalog.yaml b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-pattern-catalog.yaml deleted file mode 100644 index 7013a693..00000000 --- a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-pattern-catalog.yaml +++ /dev/null @@ -1,482 +0,0 @@ -# UX Pattern Catalog - Knowledge base for UX design decisions -# This enables intelligent, composable UX patterns instead of rigid templates - -# ⚠️ CRITICAL: Use WebSearch to verify current design system versions during workflow execution - -design_systems: - web: - material_ui: - name: "Material UI" - current_version: "5.15" - platform: "Web (React)" - good_for: ["Enterprise apps", "Data-heavy interfaces", "Google ecosystem", "Accessibility"] - not_ideal_for: ["Unique brand identity", "Minimal designs", "Non-React"] - components: "300+" - accessibility: "WCAG 2.1 AA compliant" - theming: "Extensive theming system" - documentation: "Excellent" - learning_curve: "Moderate" - bundle_size: "Large (can be optimized)" - beginner_friendly: true - - shadcn_ui: - name: "shadcn/ui" - current_version: "Latest" - platform: "Web (React + Tailwind)" - good_for: ["Modern apps", "Full customization", "Tailwind users", "Copy-paste approach"] - not_ideal_for: ["Non-Tailwind projects", "Quick prototyping", "Beginners"] - components: "50+ (growing)" - accessibility: "WCAG 2.1 AA via Radix primitives" - theming: "Full Tailwind theming" - documentation: "Good" - learning_curve: "Easy if familiar with Tailwind" - bundle_size: "Minimal (tree-shakeable)" - beginner_friendly: false - - chakra_ui: - name: "Chakra UI" - current_version: "2.8" - platform: "Web (React)" - good_for: ["Accessible apps", "Rapid development", "Dark mode", "Component composition"] - not_ideal_for: ["Complex customization", "Non-React"] - components: "50+" - accessibility: "WCAG 2.1 AA compliant (accessibility-first)" - theming: "Powerful theming system" - documentation: "Excellent" - learning_curve: "Easy" - bundle_size: "Moderate" - beginner_friendly: true - - ant_design: - name: "Ant Design" - current_version: "5.12" - platform: "Web (React)" - good_for: ["Enterprise", "Admin panels", "Data tables", "Chinese market"] - not_ideal_for: ["Consumer apps", "Minimal designs", "Non-React"] - components: "60+" - accessibility: "Good (improving)" - theming: "Less design tokens" - documentation: "Excellent" - learning_curve: "Easy" - bundle_size: "Large" - beginner_friendly: true - - radix_ui: - name: "Radix UI" - current_version: "1.0+" - platform: "Web (React)" - good_for: ["Full control", "Unstyled primitives", "Custom design systems"] - not_ideal_for: ["Quick prototyping", "Pre-styled needs", "Beginners"] - components: "25+ primitives" - accessibility: "WCAG 2.1 AA compliant (accessibility-first)" - theming: "Bring your own styles" - documentation: "Excellent" - learning_curve: "Moderate to Hard" - bundle_size: "Minimal" - beginner_friendly: false - - tailwind_ui: - name: "Tailwind UI" - platform: "Web (Any framework + Tailwind)" - good_for: ["Tailwind users", "Marketing sites", "High-quality examples"] - not_ideal_for: ["Non-Tailwind", "Free tier"] - components: "500+ examples (paid)" - accessibility: "Good" - theming: "Tailwind theming" - documentation: "Excellent" - learning_curve: "Easy if familiar with Tailwind" - bundle_size: "Minimal" - beginner_friendly: true - - headless_ui: - name: "Headless UI" - current_version: "1.7" - platform: "Web (React, Vue)" - good_for: ["Unstyled primitives", "Full control", "Tailwind users"] - not_ideal_for: ["Pre-styled needs", "Quick prototyping"] - components: "13 primitives" - accessibility: "WCAG 2.1 AA compliant" - theming: "Bring your own styles" - documentation: "Good" - learning_curve: "Moderate" - bundle_size: "Minimal" - beginner_friendly: false - - mobile: - ios_hig: - name: "iOS Human Interface Guidelines" - platform: "iOS" - good_for: ["iOS apps", "Native feel", "Apple ecosystem"] - not_ideal_for: ["Cross-platform", "Custom branding"] - components: "Native UIKit components" - accessibility: "Built-in VoiceOver support" - documentation: "Excellent (Apple HIG)" - learning_curve: "Moderate" - beginner_friendly: true - - material_design: - name: "Material Design (Mobile)" - platform: "Android" - good_for: ["Android apps", "Google ecosystem", "Accessibility"] - not_ideal_for: ["iOS", "Custom branding"] - components: "Material Components for Android" - accessibility: "Built-in TalkBack support" - documentation: "Excellent" - learning_curve: "Moderate" - beginner_friendly: true - - react_native_paper: - name: "React Native Paper" - platform: "React Native (iOS & Android)" - good_for: ["Cross-platform", "Material Design", "Quick development"] - not_ideal_for: ["Native platform guidelines", "Highly custom designs"] - components: "30+" - accessibility: "Good" - documentation: "Good" - learning_curve: "Easy" - beginner_friendly: true - -button_hierarchy_patterns: - standard: - name: "Standard Button Hierarchy" - primary: - description: "Most important action on screen" - style: "Filled with primary color, high contrast" - usage: "One per screen (save, submit, next, create)" - example: "Submit Form, Create Account, Save Changes" - - secondary: - description: "Alternative or supporting action" - style: "Outlined or subtle fill with secondary color" - usage: "Secondary actions, cancel alternatives" - example: "Cancel, Go Back, Learn More" - - tertiary: - description: "Least prominent action" - style: "Text-only button, minimal styling" - usage: "Low-priority actions, links" - example: "Skip, Dismiss, View Details" - - destructive: - description: "Dangerous or irreversible action" - style: "Red or error color, often requires confirmation" - usage: "Delete, remove, clear data" - example: "Delete Account, Remove Item, Clear All" - -feedback_patterns: - toast_notification: - name: "Toast Notification" - good_for: ["Non-blocking feedback", "Success confirmations", "Quick info"] - not_ideal_for: ["Critical errors", "Required user action", "Detailed messages"] - placement: ["Top-right", "Bottom-center", "Top-center"] - duration: "2-5 seconds (auto-dismiss)" - actions: "Optional undo or action button" - - inline_message: - name: "Inline Message" - good_for: ["Form validation", "Contextual errors", "Field-specific feedback"] - not_ideal_for: ["Global messages", "Unrelated to visible content"] - placement: "Adjacent to related element" - duration: "Persistent until fixed or dismissed" - actions: "Minimal (usually just dismiss or fix)" - - modal_alert: - name: "Modal Alert/Dialog" - good_for: ["Critical errors", "Blocking actions", "Required confirmations"] - not_ideal_for: ["Non-critical info", "Frequent messages", "Quick feedback"] - placement: "Center overlay" - duration: "Requires user dismissal" - actions: "Clear action buttons (OK, Cancel, etc.)" - - banner: - name: "Banner Notification" - good_for: ["System-wide messages", "Important updates", "Persistent alerts"] - not_ideal_for: ["Transient feedback", "Frequent changes"] - placement: "Top of page/screen" - duration: "Persistent until dismissed" - actions: "Optional actions or dismiss" - -form_patterns: - labels: - above_input: - name: "Labels Above Input" - good_for: ["Clarity", "Mobile-friendly", "Accessibility"] - not_ideal_for: ["Horizontal space constraints"] - style: "Label above, left-aligned" - - floating_label: - name: "Floating/Inline Label" - good_for: ["Space efficiency", "Modern aesthetic", "Material Design"] - not_ideal_for: ["Accessibility (can be confusing)", "Complex forms"] - style: "Label inside input, floats on focus" - - side_by_side: - name: "Side-by-Side Label" - good_for: ["Dense forms", "Desktop layouts", "Admin panels"] - not_ideal_for: ["Mobile", "Long labels", "Accessibility"] - style: "Label to left of input, aligned" - - validation: - on_blur: - name: "Validate on Blur" - description: "Check field when user leaves it" - good_for: "Immediate feedback without being disruptive" - timing: "After user finishes typing and moves away" - - on_change: - name: "Validate on Change" - description: "Real-time validation as user types" - good_for: "Password strength, character limits, format checking" - timing: "As user types (debounced)" - - on_submit: - name: "Validate on Submit" - description: "Check all fields when form submitted" - good_for: "Simple forms, avoiding interruption" - timing: "When user clicks submit" - - progressive: - name: "Progressive Validation" - description: "Validate completed fields immediately, others on submit" - good_for: "Balance between guidance and interruption" - timing: "Hybrid approach" - -modal_patterns: - sizes: - small: - width: "400-500px" - usage: "Confirmations, simple alerts, single-field inputs" - - medium: - width: "600-800px" - usage: "Forms, detailed content, most common use case" - - large: - width: "900-1200px" - usage: "Complex forms, content preview, rich media" - - fullscreen: - width: "100% viewport" - usage: "Mobile primarily, immersive experiences" - - dismiss_behavior: - click_outside: - description: "Click backdrop to close" - good_for: "Non-critical modals, user-initiated" - not_ideal_for: "Unsaved changes, critical confirmations" - - escape_key: - description: "Press ESC to close" - good_for: "All modals (accessibility)" - implementation: "Always include for keyboard users" - - explicit_close: - description: "Must click X or Cancel button" - good_for: "Critical modals, unsaved changes, confirmations" - not_ideal_for: "Frequent, non-blocking interactions" - -navigation_patterns: - sidebar: - name: "Sidebar Navigation" - good_for: ["Desktop apps", "Many sections", "Persistent navigation"] - not_ideal_for: ["Simple sites", "Few sections", "Mobile-only"] - variants: - - "Always visible (desktop)" - - "Collapsible (hamburger on mobile)" - - "Mini sidebar (icons only, expands on hover)" - - top_nav: - name: "Top Navigation Bar" - good_for: ["Marketing sites", "Few sections", "Mobile-friendly"] - not_ideal_for: ["Many menu items", "Deep hierarchies"] - variants: - - "Horizontal menu" - - "Mega menu (dropdown panels)" - - "Hamburger menu (mobile)" - - tabs: - name: "Tab Navigation" - good_for: ["Related content sections", "Switching views", "Settings"] - not_ideal_for: ["Unrelated sections", "Too many tabs (>7)"] - variants: - - "Horizontal tabs" - - "Vertical tabs" - - "Pill tabs" - - bottom_nav: - name: "Bottom Navigation (Mobile)" - good_for: ["Mobile apps", "3-5 primary sections", "Quick switching"] - not_ideal_for: ["Desktop", "Many sections", "Deep hierarchies"] - best_practices: "3-5 items, icon + label, highlight active" - -empty_state_patterns: - first_use: - description: "User's first time, no content yet" - components: - - "Illustration or icon" - - "Welcoming message" - - "Clear call-to-action (create first item)" - - "Optional: Tutorial or guide link" - - no_results: - description: "Search or filter returned nothing" - components: - - "Clear message (No results found for 'X')" - - "Suggestions (check spelling, try different keywords)" - - "Alternative action (clear filters, browse all)" - - cleared_content: - description: "User deleted/cleared content" - components: - - "Acknowledgment (Content cleared)" - - "Undo option (if possible)" - - "Action to create new content" - -confirmation_patterns: - no_confirmation: - description: "No confirmation dialog, immediate action with undo" - good_for: "Low-risk actions, undo available" - example: "Archive email (with undo toast)" - - simple_confirmation: - description: "Single confirmation dialog" - good_for: "Moderate-risk actions" - example: "Delete item? [Cancel] [Delete]" - - typed_confirmation: - description: "User must type specific text to confirm" - good_for: "High-risk, irreversible actions" - example: "Type 'DELETE' to confirm account deletion" - - multi_step_confirmation: - description: "Multiple confirmations or checkboxes" - good_for: "Critical, irreversible, high-impact actions" - example: "Delete account: check consequences, type confirmation, verify email" - -loading_patterns: - spinner: - name: "Spinner/Circular Progress" - good_for: ["Unknown duration", "Small areas", "Button states"] - usage: "Indeterminate progress" - - progress_bar: - name: "Linear Progress Bar" - good_for: ["Known duration", "File uploads", "Multi-step processes"] - usage: "Determinate progress (0-100%)" - - skeleton_screen: - name: "Skeleton/Placeholder" - good_for: ["Content loading", "Better perceived performance", "Layout stability"] - usage: "Show content structure while loading" - - optimistic_ui: - name: "Optimistic Update" - good_for: ["Instant feedback", "High success rate actions", "Smooth UX"] - usage: "Show result immediately, rollback if fails" - -responsive_breakpoints: - mobile_first: - sm: "640px (small phones)" - md: "768px (tablets portrait)" - lg: "1024px (tablets landscape, small desktops)" - xl: "1280px (desktops)" - xxl: "1536px (large desktops)" - - common_devices: - mobile: "320px - 767px" - tablet: "768px - 1023px" - desktop: "1024px+" - -interaction_patterns: - drag_and_drop: - good_for: ["Reordering lists", "File uploads", "Visual organization"] - not_ideal_for: ["Mobile (touch conflicts)", "Accessibility (needs fallback)"] - accessibility: "Must provide keyboard alternative" - - swipe_gestures: - good_for: ["Mobile navigation", "Quick actions (swipe to delete)", "Cards"] - not_ideal_for: ["Desktop", "Ambiguous actions"] - best_practices: "Visual feedback, undo option" - - infinite_scroll: - good_for: ["Social feeds", "Discovery", "Engagement"] - not_ideal_for: ["Finding specific items", "Footer access", "Performance"] - best_practices: "Load more button as fallback, preserve scroll position" - - pagination: - good_for: ["Data tables", "Search results", "Performance", "Findability"] - not_ideal_for: ["Social feeds", "Real-time content"] - variants: ["Numbered pages", "Previous/Next", "Load More button"] - -animation_guidelines: - duration: - micro: "50-100ms (button hover, checkbox toggle)" - small: "150-250ms (dropdown open, tooltip appear)" - medium: "250-400ms (modal open, drawer slide)" - large: "400-600ms (page transitions, complex animations)" - - easing: - ease_out: "Decelerates (entering animations)" - ease_in: "Accelerates (exiting animations)" - ease_in_out: "Both (moving between states)" - linear: "Constant speed (loading spinners)" - - principles: - - "Animations should feel natural, not robotic" - - "Use for feedback, transitions, and delight" - - "Don't slow down user tasks" - - "Respect prefers-reduced-motion" - - "60fps (under 16ms per frame)" - -accessibility_patterns: - keyboard_navigation: - tab_order: "Logical, top-to-bottom, left-to-right" - skip_links: "Skip to main content" - focus_trapping: "Modal keeps focus inside" - escape_key: "Close modals, cancel actions" - - screen_readers: - landmarks: "header, nav, main, aside, footer" - headings: "h1-h6 hierarchy (don't skip levels)" - aria_labels: "Descriptive labels for icon buttons" - live_regions: "Announce dynamic content changes" - - color_contrast: - wcag_aa: - normal_text: "4.5:1 contrast ratio" - large_text: "3:1 contrast ratio (18pt+ or 14pt+ bold)" - ui_components: "3:1 contrast ratio" - - wcag_aaa: - normal_text: "7:1 contrast ratio" - large_text: "4.5:1 contrast ratio" - -# Novel UX Pattern Examples (for inspiration) -novel_patterns_inspiration: - - pattern: "Swipe to match" - origin: "Tinder" - innovation: "Gamified decision-making through gesture" - - - pattern: "Stories (ephemeral content)" - origin: "Snapchat, then Instagram" - innovation: "Time-limited content creates urgency and authenticity" - - - pattern: "Infinite canvas" - origin: "Figma, Miro" - innovation: "Spatial organization without page boundaries" - - - pattern: "Real-time collaborative cursors" - origin: "Figma, Google Docs" - innovation: "See others' activity in real-time" - - - pattern: "Pull to refresh" - origin: "Tweetie (Twitter client)" - innovation: "Natural gesture for content updates" - - - pattern: "Card-based swiping" - origin: "Tinder, then widely adopted" - innovation: "Binary decisions through kinetic interaction" - - - pattern: "Algorithmic feed" - origin: "Facebook, TikTok" - innovation: "Personalized infinite content discovery" diff --git a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/checklist.md b/src/modules/bmm/workflows/2-plan-workflows/ux-spec/checklist.md deleted file mode 100644 index c52ce85e..00000000 --- a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/checklist.md +++ /dev/null @@ -1,152 +0,0 @@ -# UX/UI Specification Workflow Validation Checklist - -**Purpose**: Validate UX workflow outputs are complete, actionable, and ready for development. - -**Scope**: Can run standalone or integrated with PRD/GDD workflows - -**Expected Outputs**: ux-specification.md, optional ai-frontend-prompt.md - ---- - -## 1. Output File Exists - -- [ ] ux-specification.md created in output folder -- [ ] Requirements source identified (PRD, GDD, or gathered requirements) -- [ ] No unfilled {{template_variables}} - ---- - -## 2. UX Foundation - -### User Personas - -- [ ] **At least one primary persona** defined with goals and pain points -- [ ] Personas have sufficient detail to inform design decisions -- [ ] If PRD/GDD exists, personas align with target audience - -### Design Principles - -- [ ] **3-5 core design principles** established -- [ ] Principles are actionable (guide real design decisions) -- [ ] Principles fit project goals and users - ---- - -## 3. Information Architecture - -### Site/App Structure - -- [ ] **Complete site map** showing all major sections/screens -- [ ] Hierarchical relationships clear -- [ ] Navigation paths evident -- [ ] Structure makes sense for users - -### Navigation - -- [ ] Primary navigation defined -- [ ] Mobile navigation strategy clear (if multi-platform) -- [ ] Navigation approach logical - ---- - -## 4. User Flows - -- [ ] **At least 2-3 critical user flows** documented -- [ ] Flows show complete start-to-finish paths -- [ ] Decision points and error states considered -- [ ] Flows include Mermaid diagrams or clear descriptions -- [ ] If PRD exists, flows align with user journeys - ---- - -## 5. Component Library and Visual Design - -### Component Approach - -- [ ] **Design system strategy** defined (existing system, custom, or hybrid) -- [ ] If using existing, which one specified -- [ ] Core components identified -- [ ] Component states documented (default, hover, active, disabled, error) - -### Visual Foundation - -- [ ] **Color palette** defined with semantic meanings -- [ ] **Typography** specified (fonts, type scale, usage) -- [ ] **Spacing system** documented -- [ ] Design choices support usability - ---- - -## 6. Responsive and Accessibility - -### Responsive Design - -- [ ] **Breakpoints defined** for target devices -- [ ] Adaptation patterns explained (how layouts change) -- [ ] Mobile strategy clear (if multi-platform) - -### Accessibility - -- [ ] **Compliance target** specified (WCAG level) -- [ ] Key accessibility requirements documented -- [ ] Keyboard navigation, screen readers, contrast considered - ---- - -## 7. Implementation Readiness - -- [ ] **Next steps** clearly defined -- [ ] Design handoff requirements clear -- [ ] Developers can implement from this spec -- [ ] Sufficient detail for front-end development - ---- - -## 8. Integration with Requirements - -**If PRD/GDD exists:** - -- [ ] UX covers all user-facing features from requirements -- [ ] User flows align with documented user journeys -- [ ] Platform matches PRD/GDD platforms -- [ ] No contradictions with requirements - ---- - -## 9. AI Frontend Prompt (If Generated) - -**If ai-frontend-prompt.md was created:** - -- [ ] File exists in output folder -- [ ] Contains complete UX context (colors, typography, components, flows) -- [ ] Formatted for AI tools (v0, Lovable, etc.) -- [ ] Includes appropriate warnings about reviewing generated code - ---- - -## 10. Critical Failures (Auto-Fail) - -- [ ] ❌ **No user personas** (target users not defined) -- [ ] ❌ **No user flows** (critical paths not documented) -- [ ] ❌ **No information architecture** (site structure missing) -- [ ] ❌ **No component approach** (design system not defined) -- [ ] ❌ **No visual foundation** (colors/typography missing) -- [ ] ❌ **No responsive strategy** (adaptation not addressed for multi-platform) -- [ ] ❌ **Contradicts requirements** (UX fights PRD/GDD if they exist) - ---- - -## Validation Notes - -**Document any findings:** - -- UX quality: [Production-ready / Good foundation / Needs refinement / Incomplete] -- Strengths: -- Issues to address: -- Recommended actions: - -**Ready for development?** [Yes / Needs design phase / No - explain] - ---- - -_Adapt based on whether this is standalone or integrated, and platform requirements._ diff --git a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/instructions-ux.md b/src/modules/bmm/workflows/2-plan-workflows/ux-spec/instructions-ux.md deleted file mode 100644 index 10bf8a73..00000000 --- a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/instructions-ux.md +++ /dev/null @@ -1,405 +0,0 @@ -# UX/UI Specification Workflow Instructions - - - -The workflow execution engine is governed by: {project_root}/bmad/core/tasks/workflow.xml -You MUST have already loaded and processed: {installed_path}/workflow.yaml -Communicate all responses in {communication_language} and language MUST be tailored to {user_skill_level} -Generate all documents in {document_output_language} -This workflow creates comprehensive UX/UI specifications - can run standalone or as part of plan-project -Uses ux-spec-template.md for structured output generation -Can optionally generate AI Frontend Prompts for tools like Vercel v0, Lovable.ai - -DOCUMENT OUTPUT: Professional, precise, actionable UX specs. Use tables/lists over prose. User skill level ({user_skill_level}) affects conversation style ONLY, not document content. - - - - - mode: init-check - - - - Store {{status_file_path}} for later updates - Set tracking_mode = true - - - - Set tracking_mode = false - Note: Running without workflow tracking. Run `workflow-init` to enable progress tracking. - - - - - -Determine workflow mode (standalone or integrated) - - - Do you have an existing PRD or requirements document? (y/n) - -If yes: Provide the path to the PRD -If no: We'll gather basic requirements to create the UX spec - - - - - Let's gather essential information: - -1. **Project Description**: What are you building? -2. **Target Users**: Who will use this? -3. **Core Features**: What are the main capabilities? (3-5 key features) -4. **Platform**: Web, mobile, desktop, or multi-platform? -5. **Existing Brand/Design**: Any existing style guide or brand to follow? - - - - - Load the following documents if available: - -- PRD.md (primary source for requirements and user journeys) -- epics.md (helps understand feature grouping) -- tech-spec.md (understand technical constraints) -- architecture.md (if Level 3-4 project) -- bmm-workflow-status.md (understand project level and scope) - - - -Analyze project for UX complexity: - -- Number of user-facing features -- Types of users/personas mentioned -- Interaction complexity -- Platform requirements (web, mobile, desktop) - -Load ux-spec-template from workflow.yaml - -project_context - - - - - -Let's establish the UX foundation. Based on the PRD: - -**1. Target User Personas** (extract from PRD or define): - -- Primary persona(s) -- Secondary persona(s) -- Their goals and pain points - -**2. Key Usability Goals:** -What does success look like for users? - -- Ease of learning? -- Efficiency for power users? -- Error prevention? -- Accessibility requirements? - -**3. Core Design Principles** (3-5 principles): -What will guide all design decisions? - - -user_personas -usability_goals -design_principles - -{project-root}/bmad/core/tasks/adv-elicit.xml - - - - - -Based on functional requirements from PRD, create site/app structure - -**Create comprehensive site map showing:** - -- All major sections/screens -- Hierarchical relationships -- Navigation paths - -site_map - -**Define navigation structure:** - -- Primary navigation items -- Secondary navigation approach -- Mobile navigation strategy -- Breadcrumb structure - -navigation_structure - -{project-root}/bmad/core/tasks/adv-elicit.xml - - - - - -Extract key user journeys from PRD -For each critical user task, create detailed flow - - - -**Flow: {{journey_name}}** - -Define: - -- User goal -- Entry points -- Step-by-step flow with decision points -- Success criteria -- Error states and edge cases - -Create Mermaid diagram showing complete flow. - -user*flow*{{journey_number}} - - - -{project-root}/bmad/core/tasks/adv-elicit.xml - - - - - -Component Library Strategy: - -**1. Design System Approach:** - -- [ ] Use existing system (Material UI, Ant Design, etc.) -- [ ] Create custom component library -- [ ] Hybrid approach - -**2. If using existing, which one?** - -**3. Core Components Needed** (based on PRD features): -We'll need to define states and variants for key components. - - -For primary components, define: - -- Component purpose -- Variants needed -- States (default, hover, active, disabled, error) -- Usage guidelines - -design_system_approach -core_components - - - - - -Visual Design Foundation: - -**1. Brand Guidelines:** -Do you have existing brand guidelines to follow? (y/n) - -**2. If yes, provide link or key elements.** - -**3. If no, let's define basics:** - -- Primary brand personality (professional, playful, minimal, bold) -- Industry conventions to follow or break - - -Define color palette with semantic meanings - -color_palette - -Define typography system - -font_families -type_scale - -Define spacing and layout grid - -spacing_layout - -{project-root}/bmad/core/tasks/adv-elicit.xml - - - - - -**Responsive Design:** - -Define breakpoints based on target devices from PRD - -breakpoints - -Define adaptation patterns for different screen sizes - -adaptation_patterns - -**Accessibility Requirements:** - -Based on deployment intent from PRD, define compliance level - -compliance_target -accessibility_requirements - - - - - -Would you like to define animation and micro-interactions? (y/n) - -This is recommended for: - -- Consumer-facing applications -- Projects emphasizing user delight -- Complex state transitions - - - - -Define motion principles -motion_principles - -Define key animations and transitions -key_animations - - - - - - -Design File Strategy: - -**1. Will you be creating high-fidelity designs?** - -- Yes, in Figma -- Yes, in Sketch -- Yes, in Adobe XD -- No, development from spec -- Other (describe) - -**2. For key screens, should we:** - -- Reference design file locations -- Create low-fi wireframe descriptions -- Skip visual representations - - -design_files - - - - screen*layout*{{screen_number}} - - - - - - - -## UX Specification Complete - -Generate specific next steps based on project level and outputs - -immediate_actions - -**Design Handoff Checklist:** - -- [ ] All user flows documented -- [ ] Component inventory complete -- [ ] Accessibility requirements defined -- [ ] Responsive strategy clear -- [ ] Brand guidelines incorporated -- [ ] Performance goals established - - - - [ ] Ready for detailed visual design - - [ ] Frontend architecture can proceed - - [ ] Story generation can include UX details - - - - - [ ] Development can proceed with spec - - [ ] Component implementation order defined - - [ ] MVP scope clear - - - -design_handoff_checklist - -**✅ UX Specification Complete, {user_name}!** - -UX Specification saved to {{ux_spec_file}} - -**Additional Output Options:** - -1. Generate AI Frontend Prompt (for Vercel v0, Lovable.ai, etc.) -2. Review UX specification -3. Create/update visual designs in design tool -4. Return to planning workflow (if not standalone) -5. Exit - -Would you like to generate an AI Frontend Prompt? (y/n): - - - Generate AI Frontend Prompt - - - - - - -Prepare context for AI Frontend Prompt generation - -What type of AI frontend generation are you targeting? - -1. **Full application** - Complete multi-page application -2. **Single page** - One complete page/screen -3. **Component set** - Specific components or sections -4. **Design system** - Component library setup - -Select option (1-4): - -Gather UX spec details for prompt generation: - -- Design system approach -- Color palette and typography -- Key components and their states -- User flows to implement -- Responsive requirements - -{project-root}/bmad/bmm/tasks/ai-fe-prompt.md - -Save AI Frontend Prompt to {{ai_frontend_prompt_file}} - -AI Frontend Prompt saved to {{ai_frontend_prompt_file}} - -This prompt is optimized for: - -- Vercel v0 -- Lovable.ai -- Other AI frontend generation tools - -**Remember**: AI-generated code requires careful review and testing! - -Next actions: - -1. Copy prompt to AI tool -2. Return to UX specification -3. Exit workflow - -Select option (1-3): - - - - - - - - mode: update - action: complete_workflow - workflow_name: ux - - - - ✅ Status updated! Next: {{next_workflow}} - - - - - diff --git a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/ux-spec-template.md b/src/modules/bmm/workflows/2-plan-workflows/ux-spec/ux-spec-template.md deleted file mode 100644 index 40ba161d..00000000 --- a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/ux-spec-template.md +++ /dev/null @@ -1,162 +0,0 @@ -# {{project_name}} UX/UI Specification - -_Generated on {{date}} by {{user_name}}_ - -## Executive Summary - -{{project_context}} - ---- - -## 1. UX Goals and Principles - -### 1.1 Target User Personas - -{{user_personas}} - -### 1.2 Usability Goals - -{{usability_goals}} - -### 1.3 Design Principles - -{{design_principles}} - ---- - -## 2. Information Architecture - -### 2.1 Site Map - -{{site_map}} - -### 2.2 Navigation Structure - -{{navigation_structure}} - ---- - -## 3. User Flows - -{{user_flow_1}} - -{{user_flow_2}} - -{{user_flow_3}} - -{{user_flow_4}} - -{{user_flow_5}} - ---- - -## 4. Component Library and Design System - -### 4.1 Design System Approach - -{{design_system_approach}} - -### 4.2 Core Components - -{{core_components}} - ---- - -## 5. Visual Design Foundation - -### 5.1 Color Palette - -{{color_palette}} - -### 5.2 Typography - -**Font Families:** -{{font_families}} - -**Type Scale:** -{{type_scale}} - -### 5.3 Spacing and Layout - -{{spacing_layout}} - ---- - -## 6. Responsive Design - -### 6.1 Breakpoints - -{{breakpoints}} - -### 6.2 Adaptation Patterns - -{{adaptation_patterns}} - ---- - -## 7. Accessibility - -### 7.1 Compliance Target - -{{compliance_target}} - -### 7.2 Key Requirements - -{{accessibility_requirements}} - ---- - -## 8. Interaction and Motion - -### 8.1 Motion Principles - -{{motion_principles}} - -### 8.2 Key Animations - -{{key_animations}} - ---- - -## 9. Design Files and Wireframes - -### 9.1 Design Files - -{{design_files}} - -### 9.2 Key Screen Layouts - -{{screen_layout_1}} - -{{screen_layout_2}} - -{{screen_layout_3}} - ---- - -## 10. Next Steps - -### 10.1 Immediate Actions - -{{immediate_actions}} - -### 10.2 Design Handoff Checklist - -{{design_handoff_checklist}} - ---- - -## Appendix - -### Related Documents - -- PRD: `{{prd}}` -- Epics: `{{epics}}` -- Tech Spec: `{{tech_spec}}` -- Architecture: `{{architecture}}` - -### Version History - -| Date | Version | Changes | Author | -| -------- | ------- | --------------------- | ------------- | -| {{date}} | 1.0 | Initial specification | {{user_name}} | diff --git a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/workflow.yaml b/src/modules/bmm/workflows/2-plan-workflows/ux-spec/workflow.yaml deleted file mode 100644 index 743896c9..00000000 --- a/src/modules/bmm/workflows/2-plan-workflows/ux-spec/workflow.yaml +++ /dev/null @@ -1,37 +0,0 @@ -# UX/UI Specification Workflow -name: ux-spec -description: "UX/UI specification workflow for defining user experience and interface design. Creates comprehensive UX documentation including wireframes, user flows, component specifications, and design system guidelines." -author: "BMad" - -# Critical variables from config -config_source: "{project-root}/bmad/bmm/config.yaml" -output_folder: "{config_source}:output_folder" -user_name: "{config_source}:user_name" -communication_language: "{config_source}:communication_language" -document_output_language: "{config_source}:document_output_language" -user_skill_level: "{config_source}:user_skill_level" -date: system-generated - -# Workflow components -installed_path: "{project-root}/bmad/bmm/workflows/2-plan-workflows/ux-spec" -instructions: "{installed_path}/instructions-ux.md" -template: "{installed_path}/ux-spec-template.md" - -# Output configuration -default_output_file: "{output_folder}/ux-specification.md" -ai_frontend_prompt_file: "{output_folder}/ai-frontend-prompt.md" - -# Recommended input documents -recommended_inputs: - - prd: "{output_folder}/PRD.md" - - product_brief: "{output_folder}/product-brief.md" - - gdd: "{output_folder}/GDD.md" - -web_bundle: - name: "ux-spec" - description: "UX/UI specification workflow for defining user experience and interface design. Creates comprehensive UX documentation including wireframes, user flows, component specifications, and design system guidelines." - author: "BMad" - instructions: "bmad/bmm/workflows/2-plan-workflows/ux-spec/instructions-ux.md" - web_bundle_files: - - "bmad/bmm/workflows/2-plan-workflows/ux-spec/instructions-ux.md" - - "bmad/bmm/workflows/2-plan-workflows/ux-spec/ux-spec-template.md" diff --git a/src/modules/bmm/workflows/3-solutioning/architecture/checklist.md b/src/modules/bmm/workflows/3-solutioning/architecture/checklist.md index 2002e03c..fe1de530 100644 --- a/src/modules/bmm/workflows/3-solutioning/architecture/checklist.md +++ b/src/modules/bmm/workflows/3-solutioning/architecture/checklist.md @@ -1,49 +1,67 @@ -# Decision Architecture Validation Checklist +# Architecture Document Validation Checklist -## Critical Requirements (MUST PASS) +**Purpose**: Validate the architecture document itself is complete, implementable, and provides clear guidance for AI agents. -### Decision Completeness +**Note**: This checklist validates the ARCHITECTURE DOCUMENT only. For cross-workflow validation (PRD → Architecture → Stories alignment), use the solutioning-gate-check workflow. -- [ ] Every functional requirement from PRD has architectural support -- [ ] Every non-functional requirement from PRD is addressed -- [ ] All critical decision categories have been resolved +--- + +## 1. Decision Completeness + +### All Decisions Made + +- [ ] Every critical decision category has been resolved +- [ ] All important decision categories addressed - [ ] No placeholder text like "TBD", "[choose]", or "{TODO}" remains +- [ ] Optional decisions either resolved or explicitly deferred with rationale -### Version Specificity +### Decision Coverage + +- [ ] Data persistence approach decided +- [ ] API pattern chosen +- [ ] Authentication/authorization strategy defined +- [ ] Deployment target selected +- [ ] All functional requirements have architectural support + +--- + +## 2. Version Specificity + +### Technology Versions - [ ] Every technology choice includes a specific version number - [ ] Version numbers are current (verified via WebSearch, not hardcoded) - [ ] Compatible versions selected (e.g., Node.js version supports chosen packages) - [ ] Verification dates noted for version checks -### Starter Template Integration (if applicable) +### Version Verification Process +- [ ] WebSearch used during workflow to verify current versions +- [ ] No hardcoded versions from decision catalog trusted without verification +- [ ] LTS vs. latest versions considered and documented +- [ ] Breaking changes between versions noted if relevant + +--- + +## 3. Starter Template Integration (if applicable) + +### Template Selection + +- [ ] Starter template chosen (or "from scratch" decision documented) - [ ] Project initialization command documented with exact flags -- [ ] Starter-provided decisions marked as "PROVIDED BY STARTER" -- [ ] First implementation story references starter initialization - [ ] Starter template version is current and specified +- [ ] Command search term provided for verification -### Epic Coverage +### Starter-Provided Decisions -- [ ] Every epic from PRD is explicitly mapped to architectural components -- [ ] Decision summary table shows which epics each decision affects -- [ ] No orphan epics without architectural support -- [ ] Novel patterns mapped to affected epics +- [ ] Decisions provided by starter marked as "PROVIDED BY STARTER" +- [ ] List of what starter provides is complete +- [ ] Remaining decisions (not covered by starter) clearly identified +- [ ] No duplicate decisions that starter already makes -### Document Structure +--- -- [ ] Executive summary is present and concise (2-3 sentences maximum) -- [ ] Project initialization section present (if using starter template) -- [ ] Decision summary table has ALL required columns: - - Category - - Decision - - Version - - Affects Epics - - Rationale -- [ ] Project structure section shows complete source tree -- [ ] Source tree reflects actual technology decisions (not generic) - -## Novel Pattern Design (if applicable) +## 4. Novel Pattern Design (if applicable) ### Pattern Detection @@ -51,16 +69,25 @@ - [ ] Patterns that don't have standard solutions documented - [ ] Multi-epic workflows requiring custom design captured -### Pattern Documentation +### Pattern Documentation Quality - [ ] Pattern name and purpose clearly defined - [ ] Component interactions specified - [ ] Data flow documented (with sequence diagrams if complex) - [ ] Implementation guide provided for agents -- [ ] Affected epics listed - [ ] Edge cases and failure modes considered +- [ ] States and transitions clearly defined -## Implementation Patterns +### Pattern Implementability + +- [ ] Pattern is implementable by AI agents with provided guidance +- [ ] No ambiguous decisions that could be interpreted differently +- [ ] Clear boundaries between components +- [ ] Explicit integration points with standard patterns + +--- + +## 5. Implementation Patterns ### Pattern Categories Coverage @@ -78,10 +105,13 @@ - [ ] Conventions are unambiguous (agents can't interpret differently) - [ ] Patterns cover all technologies in the stack - [ ] No gaps where agents would have to guess +- [ ] Implementation patterns don't conflict with each other -## Consistency Validation +--- -### Technology Compatibility +## 6. Technology Compatibility + +### Stack Coherence - [ ] Database choice compatible with ORM choice - [ ] Frontend framework compatible with deployment target @@ -89,31 +119,65 @@ - [ ] All API patterns consistent (not mixing REST and GraphQL for same data) - [ ] Starter template compatible with additional choices -### Pattern Consistency +### Integration Compatibility -- [ ] Single source of truth for each data type -- [ ] Consistent error handling approach across components -- [ ] Uniform authentication/authorization pattern -- [ ] Implementation patterns don't conflict with each other +- [ ] Third-party services compatible with chosen stack +- [ ] Real-time solutions (if any) work with deployment target +- [ ] File storage solution integrates with framework +- [ ] Background job system compatible with infrastructure -### AI Agent Clarity +--- + +## 7. Document Structure + +### Required Sections Present + +- [ ] Executive summary exists (2-3 sentences maximum) +- [ ] Project initialization section (if using starter template) +- [ ] Decision summary table with ALL required columns: + - Category + - Decision + - Version + - Rationale +- [ ] Project structure section shows complete source tree +- [ ] Implementation patterns section comprehensive +- [ ] Novel patterns section (if applicable) + +### Document Quality + +- [ ] Source tree reflects actual technology decisions (not generic) +- [ ] Technical language used consistently +- [ ] Tables used instead of prose where appropriate +- [ ] No unnecessary explanations or justifications +- [ ] Focused on WHAT and HOW, not WHY (rationale is brief) + +--- + +## 8. AI Agent Clarity + +### Clear Guidance for Agents - [ ] No ambiguous decisions that agents could interpret differently - [ ] Clear boundaries between components/modules - [ ] Explicit file organization patterns - [ ] Defined patterns for common operations (CRUD, auth checks, etc.) - [ ] Novel patterns have clear implementation guidance +- [ ] Document provides clear constraints for agents +- [ ] No conflicting guidance present -## Quality Checks +### Implementation Readiness -### Documentation Quality +- [ ] Sufficient detail for agents to implement without guessing +- [ ] File paths and naming conventions explicit +- [ ] Integration points clearly defined +- [ ] Error handling patterns specified +- [ ] Testing patterns documented -- [ ] Technical language used consistently -- [ ] Tables used instead of prose where appropriate -- [ ] No unnecessary explanations or justifications -- [ ] Focused on WHAT and HOW, not WHY (rationale is brief) +--- -### Practical Implementation +## 9. Practical Considerations + +### Technology Viability - [ ] Chosen stack has good documentation and community support - [ ] Development environment can be set up with specified versions @@ -121,118 +185,21 @@ - [ ] Deployment target supports all chosen technologies - [ ] Starter template (if used) is stable and well-maintained -### Scalability Considerations +### Scalability -- [ ] Architecture can handle expected user load from PRD +- [ ] Architecture can handle expected user load - [ ] Data model supports expected growth - [ ] Caching strategy defined if performance is critical - [ ] Background job processing defined if async work needed - [ ] Novel patterns scalable for production use -## Completeness by Section +--- -### Executive Summary - -- [ ] States what is being built in one sentence -- [ ] Identifies primary architectural pattern -- [ ] Notes any unique or critical decisions - -### Project Initialization (if using starter) - -- [ ] Exact command with all flags documented -- [ ] Lists what the starter provides -- [ ] Notes what decisions remain to be made - -### Decision Summary Table - -- [ ] Contains all major technology decisions -- [ ] Each row has complete information -- [ ] Versions are specific and current -- [ ] Rationales are brief but clear -- [ ] Epic mapping is specific (epic IDs, not descriptions) -- [ ] Starter-provided decisions marked appropriately - -### Project Structure - -- [ ] Shows actual directory structure -- [ ] Follows conventions of chosen framework/starter -- [ ] Maps epics to directories -- [ ] Includes configuration files -- [ ] Reflects starter template structure (if applicable) - -### Novel Pattern Designs (if present) - -- [ ] Each pattern fully documented -- [ ] Component interactions clear -- [ ] Implementation guidance specific -- [ ] Integration with standard patterns defined - -### Implementation Patterns - -- [ ] All 7 pattern categories addressed -- [ ] Examples provided for each pattern -- [ ] No ambiguity in conventions -- [ ] Covers all potential agent decision points - -### Integration Points - -- [ ] External service integrations documented -- [ ] API contracts or patterns defined -- [ ] Authentication flow specified -- [ ] Data flow between components clear -- [ ] Novel patterns integrated properly - -### Consistency Rules - -- [ ] Naming conventions specified with examples -- [ ] Code organization patterns defined -- [ ] Error handling approach documented -- [ ] Logging strategy defined -- [ ] All implementation patterns included - -## Final Validation - -### Ready for Implementation - -- [ ] An AI agent could start implementing any epic with this document -- [ ] First story can initialize project (if using starter) -- [ ] No critical decisions left undefined -- [ ] No conflicting guidance present -- [ ] Document provides clear constraints for agents -- [ ] Novel patterns implementable by agents - -### PRD Alignment - -- [ ] All must-have features architecturally supported -- [ ] Performance requirements achievable with chosen stack -- [ ] Security requirements addressed -- [ ] Compliance requirements (if any) met by architecture -- [ ] Novel concepts from PRD have architectural solutions - -### UX Specification Alignment (if applicable) - -- [ ] UI component library supports required interaction patterns -- [ ] Animation/transition requirements achievable with chosen stack -- [ ] Accessibility standards (WCAG level) met by component choices -- [ ] Responsive design approach supports all specified breakpoints -- [ ] Real-time update requirements addressed in architecture -- [ ] Offline capability architecture defined (if required) -- [ ] Performance targets from UX spec achievable -- [ ] Platform-specific UI requirements supported - -### Risk Mitigation - -- [ ] Single points of failure identified and addressed -- [ ] Backup and recovery approach defined (if critical) -- [ ] Monitoring and observability approach included -- [ ] Rollback strategy considered for deployments -- [ ] Novel patterns don't introduce unmanageable risks - -## Common Issues to Check +## 10. Common Issues to Check ### Beginner Protection -- [ ] Not overengineered for the actual requirements +- [ ] Not overengineered for actual requirements - [ ] Standard patterns used where possible (starter templates leveraged) - [ ] Complex technologies justified by specific needs - [ ] Maintenance complexity appropriate for team size @@ -245,17 +212,33 @@ - [ ] Future migration paths not blocked - [ ] Novel patterns follow architectural principles -### Document Usability +--- -- [ ] Can be consumed by AI agents without human interpretation -- [ ] Provides sufficient detail for consistent implementation -- [ ] Free from internal contradictions -- [ ] Complete enough to prevent agent "creativity" in critical areas -- [ ] Implementation patterns leave no room for conflicting interpretations +## Validation Summary -## Version Verification +### Document Quality Score -- [ ] All versions verified to be current (not relying on potentially outdated catalogs) -- [ ] WebSearch used to verify versions during workflow execution -- [ ] No hardcoded versions from knowledge bases trusted without verification -- [ ] Starter template version checked for latest +- Architecture Completeness: [Complete / Mostly Complete / Partial / Incomplete] +- Version Specificity: [All Verified / Most Verified / Some Missing / Many Missing] +- Pattern Clarity: [Crystal Clear / Clear / Somewhat Ambiguous / Ambiguous] +- AI Agent Readiness: [Ready / Mostly Ready / Needs Work / Not Ready] + +### Critical Issues Found + +- [ ] Issue 1: **\*\***\_\_\_**\*\*** +- [ ] Issue 2: **\*\***\_\_\_**\*\*** +- [ ] Issue 3: **\*\***\_\_\_**\*\*** + +### Recommended Actions Before Implementation + +1. *** +2. *** +3. *** + +--- + +**Next Step**: Run the **solutioning-gate-check** workflow to validate alignment between PRD, Architecture, and Stories before beginning implementation. + +--- + +_This checklist validates architecture document quality only. Use solutioning-gate-check for comprehensive readiness validation._ diff --git a/src/modules/bmm/workflows/3-solutioning/architecture/decision-catalog.yaml b/src/modules/bmm/workflows/3-solutioning/architecture/decision-catalog.yaml index a44b0149..fe0b9c03 100644 --- a/src/modules/bmm/workflows/3-solutioning/architecture/decision-catalog.yaml +++ b/src/modules/bmm/workflows/3-solutioning/architecture/decision-catalog.yaml @@ -1,19 +1,8 @@ -# Decision Catalog - Knowledge base for architectural decisions -# This replaces rigid project-type templates with intelligent, composable decisions - -# ⚠️ CRITICAL WARNING ABOUT VERSIONS ⚠️ -# ===================================== -# Version numbers in this file are EXAMPLES ONLY and will become outdated! -# The workflow MUST use WebSearch to verify current versions during execution. +# Decision Catalog - Composability knowledge for architectural decisions +# This provides RELATIONSHIPS and WORKFLOW LOGIC, not generic tech knowledge # -# During facilitation, the AI should: -# 1. Use this file for patterns and relationships -# 2. Search for "{{technology}} latest stable version 2024" (or current year) -# 3. Present the current version found, not the version in this file -# 4. Document the verified current version in the architecture -# -# Versions listed here are for understanding compatibility relationships only. -# NEVER trust these version numbers - ALWAYS verify current versions! +# ⚠️ CRITICAL: All version/feature info MUST be verified via WebSearch during workflow +# This file only provides: triggers, relationships (pairs_with), and opinionated stacks decision_categories: data_persistence: @@ -22,57 +11,15 @@ decision_categories: affects: "most epics" options: postgresql: - name: "PostgreSQL" - current_version: "15.4" - lts_version: "14.9" - good_for: ["relational data", "complex queries", "ACID compliance", "JSON support"] - not_ideal_for: ["massive scale writes", "unstructured data"] - pairs_with: - - "Prisma ORM 5.6" - - "TypeORM 0.3" - - "Drizzle 0.29" - - "node-postgres 8.11" - beginner_friendly: true - + pairs_with: ["Prisma ORM", "TypeORM", "Drizzle", "node-postgres"] mongodb: - name: "MongoDB" - current_version: "7.0" - lts_version: "6.0" - good_for: ["document storage", "flexible schema", "horizontal scaling", "real-time"] - not_ideal_for: ["complex relationships", "transactions", "strong consistency"] - pairs_with: - - "Mongoose 8.0" - - "Prisma 5.6" - - "MongoDB driver 6.3" - beginner_friendly: true - + pairs_with: ["Mongoose", "Prisma", "MongoDB driver"] redis: - name: "Redis" - current_version: "7.2" - good_for: ["caching", "sessions", "pub/sub", "real-time", "leaderboards"] - not_ideal_for: ["primary data store", "complex queries"] - pairs_with: - - "ioredis 5.3" - - "node-redis 4.6" - beginner_friendly: false - + pairs_with: ["ioredis", "node-redis"] supabase: - name: "Supabase" - current_version: "2.39" - good_for: ["PostgreSQL with batteries", "real-time", "auth included", "rapid development"] - not_ideal_for: ["custom infrastructure", "specific compliance needs"] - pairs_with: - - "@supabase/supabase-js 2.39" - beginner_friendly: true - + pairs_with: ["@supabase/supabase-js"] firebase: - name: "Firebase Firestore" - current_version: "10.7" - good_for: ["real-time sync", "offline-first", "serverless", "rapid prototyping"] - not_ideal_for: ["complex queries", "data migrations", "cost at scale"] - pairs_with: - - "firebase-admin 12.0" - beginner_friendly: true + pairs_with: ["firebase-admin"] api_pattern: triggers: ["API", "client communication", "frontend backend", "service communication"] @@ -80,48 +27,13 @@ decision_categories: affects: "all client-facing epics" options: rest: - name: "REST API" - specification: "OpenAPI 3.0" - good_for: ["standard CRUD", "caching", "simple patterns", "wide support"] - not_ideal_for: ["complex queries", "real-time updates", "over/under fetching"] - pairs_with: - - "Express 4.18" - - "Fastify 4.25" - - "NestJS 10.3" - - "Hono 3.12" - beginner_friendly: true - + pairs_with: ["Express", "Fastify", "NestJS", "Hono"] graphql: - name: "GraphQL" - specification: "GraphQL" - current_version: "16.8" - good_for: ["flexible queries", "type safety", "avoiding over-fetching", "aggregation"] - not_ideal_for: ["simple CRUD", "file uploads", "caching complexity"] - pairs_with: - - "Apollo Server 4.10" - - "GraphQL Yoga 5.1" - - "Mercurius 14.0" - beginner_friendly: false - + pairs_with: ["Apollo Server", "GraphQL Yoga", "Mercurius"] trpc: - name: "tRPC" - current_version: "10.45" - good_for: ["type safety", "TypeScript projects", "full-stack type sharing"] - not_ideal_for: ["non-TypeScript clients", "public APIs"] - pairs_with: - - "Next.js 14" - - "React Query 5.17" - beginner_friendly: false - + pairs_with: ["Next.js", "React Query"] grpc: - name: "gRPC" - current_version: "1.60" - good_for: ["microservices", "binary protocol", "streaming", "performance"] - not_ideal_for: ["browser clients", "debugging", "REST ecosystem"] - pairs_with: - - "@grpc/grpc-js 1.9" - - "protobufjs 7.2" - beginner_friendly: false + pairs_with: ["@grpc/grpc-js", "protobufjs"] authentication: triggers: ["auth", "login", "user management", "security", "identity"] @@ -129,200 +41,59 @@ decision_categories: affects: "security and user epics" options: nextauth: - name: "NextAuth.js" - current_version: "4.24" - good_for: ["Next.js projects", "OAuth providers", "database sessions", "JWT"] - not_ideal_for: ["non-Next.js", "complex RBAC", "native mobile"] - pairs_with: - - "Next.js 14" - - "Prisma 5.6" - beginner_friendly: true - + pairs_with: ["Next.js", "Prisma"] auth0: - name: "Auth0" - good_for: ["enterprise", "compliance", "multi-tenant", "social login"] - not_ideal_for: ["cost sensitive", "custom requirements"] - pairs_with: - - "@auth0/nextjs-auth0 3.5" - - "auth0 4.2" - beginner_friendly: true - + pairs_with: ["@auth0/nextjs-auth0"] clerk: - name: "Clerk" - current_version: "4.29" - good_for: ["modern stack", "user management UI", "React/Next.js"] - not_ideal_for: ["custom UI requirements", "legacy systems"] - pairs_with: - - "@clerk/nextjs 4.29" - beginner_friendly: true + pairs_with: ["@clerk/nextjs"] + supabase_auth: + pairs_with: ["@supabase/supabase-js"] + firebase_auth: + pairs_with: ["firebase-admin"] - supertokens: - name: "SuperTokens" - current_version: "16.6" - good_for: ["open source", "self-hosted", "customizable"] - not_ideal_for: ["quick setup", "managed service"] - pairs_with: - - "supertokens-node 16.6" - beginner_friendly: false - - frontend_framework: - triggers: ["UI", "frontend", "client", "web app", "user interface"] - importance: "critical" - affects: "all UI epics" + real_time: + triggers: ["real-time", "websocket", "live updates", "chat", "collaboration"] + importance: "medium" + affects: "real-time features" options: - nextjs: - name: "Next.js" - current_version: "14.0" - good_for: ["full-stack", "SSR/SSG", "React ecosystem", "SEO"] - not_ideal_for: ["pure SPA", "non-React", "simple sites"] - pairs_with: - - "React 18.2" - - "TypeScript 5.3" - - "Tailwind CSS 3.4" - beginner_friendly: true - - react_spa: - name: "React SPA" - current_version: "18.2" - good_for: ["complex interactions", "existing APIs", "flexibility"] - not_ideal_for: ["SEO critical", "initial load time"] - pairs_with: - - "Vite 5.0" - - "React Router 6.21" - - "TypeScript 5.3" - beginner_friendly: true - - vue: - name: "Vue.js" - current_version: "3.4" - good_for: ["progressive enhancement", "simple mental model", "template syntax"] - not_ideal_for: ["React ecosystem needs", "hiring pool"] - pairs_with: - - "Nuxt 3.9" - - "Vite 5.0" - - "Pinia 2.1" - beginner_friendly: true - - solidjs: - name: "SolidJS" - current_version: "1.8" - good_for: ["performance", "fine-grained reactivity", "small bundle"] - not_ideal_for: ["ecosystem size", "learning resources"] - pairs_with: - - "SolidStart 0.4" - - "Vite 5.0" - beginner_friendly: false - - state_management: - triggers: ["state", "store", "client state", "data flow", "redux"] - importance: "high" - affects: "frontend epics" - options: - zustand: - name: "Zustand" - current_version: "4.4" - good_for: ["simplicity", "TypeScript", "small bundle", "React"] - not_ideal_for: ["time-travel debugging", "Redux ecosystem"] - beginner_friendly: true - - redux_toolkit: - name: "Redux Toolkit" - current_version: "2.0" - good_for: ["complex state", "debugging", "ecosystem", "predictable"] - not_ideal_for: ["simple apps", "boilerplate"] - beginner_friendly: false - - tanstack_query: - name: "TanStack Query" - current_version: "5.17" - good_for: ["server state", "caching", "synchronization", "mutations"] - not_ideal_for: ["pure client state", "offline-heavy"] - beginner_friendly: true - - jotai: - name: "Jotai" - current_version: "2.6" - good_for: ["atomic state", "React Suspense", "TypeScript"] - not_ideal_for: ["debugging tools", "ecosystem size"] - beginner_friendly: false - - realtime: - triggers: ["real-time", "websocket", "live", "push", "streaming", "collaborative"] - importance: "high" - affects: "real-time feature epics" - options: - socketio: - name: "Socket.io" - current_version: "4.6" - good_for: ["fallbacks", "rooms", "namespaces", "reliability"] - not_ideal_for: ["raw performance", "simple needs"] - pairs_with: - - "socket.io-client 4.6" - beginner_friendly: true - - websocket_native: - name: "Native WebSocket" - good_for: ["performance", "simple needs", "no dependencies"] - not_ideal_for: ["fallbacks", "reconnection", "complex patterns"] - pairs_with: - - "ws 8.16" - beginner_friendly: false - + socket_io: + pairs_with: ["Express", "socket.io-client"] pusher: - name: "Pusher" - good_for: ["managed service", "quick setup", "global infrastructure"] - not_ideal_for: ["cost at scale", "self-hosted needs"] - pairs_with: - - "pusher-js 8.4" - beginner_friendly: true - + pairs_with: ["pusher-js"] ably: - name: "Ably" - current_version: "1.2" - good_for: ["guaranteed delivery", "presence", "history", "managed"] - not_ideal_for: ["cost sensitive", "simple needs"] - pairs_with: - - "ably 1.2" - beginner_friendly: true + pairs_with: ["ably"] + supabase_realtime: + pairs_with: ["@supabase/supabase-js"] + firebase_realtime: + pairs_with: ["firebase"] + + email: + triggers: ["email", "notifications", "transactional email"] + importance: "medium" + affects: "notification epics" + options: + resend: + pairs_with: ["resend", "react-email"] + sendgrid: + pairs_with: ["@sendgrid/mail"] + postmark: + pairs_with: ["postmark"] + ses: + pairs_with: ["@aws-sdk/client-ses"] file_storage: - triggers: ["file upload", "images", "documents", "media", "blob storage", "assets"] + triggers: ["upload", "file storage", "images", "media", "CDN"] importance: "medium" - affects: "content epics" + affects: "media handling epics" options: s3: - name: "AWS S3" - good_for: ["scale", "durability", "ecosystem", "CDN integration"] - not_ideal_for: ["simple needs", "cost optimization"] - pairs_with: - - "@aws-sdk/client-s3 3.478" - - "multer-s3 3.0" - beginner_friendly: false - + pairs_with: ["@aws-sdk/client-s3", "multer"] cloudinary: - name: "Cloudinary" - good_for: ["image optimization", "transformations", "CDN", "easy setup"] - not_ideal_for: ["raw files", "cost at scale"] - pairs_with: - - "cloudinary 1.41" - beginner_friendly: true - + pairs_with: ["cloudinary"] uploadthing: - name: "UploadThing" - current_version: "6.0" - good_for: ["Next.js", "type safety", "simple setup"] - not_ideal_for: ["non-Next.js", "complex requirements"] - pairs_with: - - "uploadthing 6.0" - beginner_friendly: true - - local_storage: - name: "Local File System" - good_for: ["development", "on-premise", "simple needs"] - not_ideal_for: ["scale", "CDN", "distributed systems"] - pairs_with: - - "multer 1.4" - beginner_friendly: true + pairs_with: ["uploadthing"] + supabase_storage: + pairs_with: ["@supabase/supabase-js"] search: triggers: ["search", "full text", "elasticsearch", "algolia", "fuzzy"] @@ -330,36 +101,13 @@ decision_categories: affects: "search and discovery epics" options: postgres_fts: - name: "PostgreSQL Full Text Search" - good_for: ["simple search", "no extra infrastructure", "cost effective"] - not_ideal_for: ["complex relevance", "fuzzy matching", "facets"] - beginner_friendly: true - + pairs_with: ["PostgreSQL"] elasticsearch: - name: "Elasticsearch" - current_version: "8.11" - good_for: ["complex search", "analytics", "aggregations", "scale"] - not_ideal_for: ["simple needs", "operational overhead"] - pairs_with: - - "@elastic/elasticsearch 8.11" - beginner_friendly: false - + pairs_with: ["@elastic/elasticsearch"] algolia: - name: "Algolia" - good_for: ["instant search", "typo tolerance", "managed service", "speed"] - not_ideal_for: ["cost at scale", "data sovereignty"] - pairs_with: - - "algoliasearch 4.22" - beginner_friendly: true - + pairs_with: ["algoliasearch"] typesense: - name: "Typesense" - current_version: "1.7" - good_for: ["open source alternative to Algolia", "typo tolerance", "self-hosted"] - not_ideal_for: ["managed service needs", "small projects"] - pairs_with: - - "typesense 1.7" - beginner_friendly: false + pairs_with: ["typesense"] background_jobs: triggers: ["queue", "jobs", "workers", "async", "background processing", "scheduled"] @@ -367,39 +115,13 @@ decision_categories: affects: "async processing epics" options: bullmq: - name: "BullMQ" - current_version: "5.1" - good_for: ["Redis-based", "reliable", "dashboard", "Node.js"] - not_ideal_for: ["multi-language", "serverless"] - pairs_with: - - "Redis 7.2" - beginner_friendly: true - + pairs_with: ["Redis"] sqs: - name: "AWS SQS" - good_for: ["managed service", "scale", "AWS ecosystem", "serverless"] - not_ideal_for: ["local development", "complex patterns"] - pairs_with: - - "@aws-sdk/client-sqs 3.478" - beginner_friendly: false - + pairs_with: ["@aws-sdk/client-sqs"] temporal: - name: "Temporal" - current_version: "1.22" - good_for: ["complex workflows", "durability", "long-running", "saga pattern"] - not_ideal_for: ["simple jobs", "quick setup"] - pairs_with: - - "@temporalio/client 1.9" - beginner_friendly: false - + pairs_with: ["@temporalio/client"] inngest: - name: "Inngest" - current_version: "3.8" - good_for: ["serverless", "event-driven", "TypeScript", "retries"] - not_ideal_for: ["self-hosted", "complex workflows"] - pairs_with: - - "inngest 3.8" - beginner_friendly: true + pairs_with: ["inngest"] deployment_target: triggers: ["deployment", "hosting", "infrastructure", "cloud", "server"] @@ -407,277 +129,80 @@ decision_categories: affects: "all epics" options: vercel: - name: "Vercel" - good_for: ["Next.js", "edge functions", "preview deployments", "simplicity"] - not_ideal_for: ["complex backends", "cost at scale", "non-JS"] - beginner_friendly: true - + pairs_with: ["Next.js", "serverless functions"] aws: - name: "AWS" - good_for: ["everything", "scale", "compliance", "flexibility"] - not_ideal_for: ["simplicity", "predictable costs", "small projects"] - beginner_friendly: false - + pairs_with: ["any stack"] railway: - name: "Railway" - good_for: ["simplicity", "databases included", "quick setup"] - not_ideal_for: ["enterprise needs", "complex requirements"] - beginner_friendly: true - + pairs_with: ["any stack", "managed databases"] fly_io: - name: "Fly.io" - good_for: ["edge deployment", "global distribution", "containers"] - not_ideal_for: ["managed databases", "enterprise support"] - beginner_friendly: false + pairs_with: ["Docker containers"] -# Pattern combinations that work well together +# Opinionated stack combinations (BMM methodology) common_stacks: modern_fullstack: name: "Modern Full-Stack" - components: - - "Next.js 14" - - "PostgreSQL 15 or Supabase" - - "Prisma ORM 5.6" - - "NextAuth.js 4.24" - - "Tailwind CSS 3.4" - - "TypeScript 5.3" - - "Vercel deployment" + components: ["Next.js", "PostgreSQL or Supabase", "Prisma ORM", "NextAuth.js", "Tailwind CSS", "TypeScript", "Vercel"] good_for: "Most web applications" enterprise_stack: name: "Enterprise Stack" - components: - - "NestJS 10.3" - - "PostgreSQL 15" - - "TypeORM 0.3" - - "Auth0" - - "React 18.2 + TypeScript" - - "AWS deployment" - good_for: "Large scale, compliance needs" + components: ["NestJS", "PostgreSQL", "TypeORM", "Auth0", "Redis", "Docker", "AWS"] + good_for: "Large-scale enterprise applications" - startup_stack: - name: "Rapid Development Stack" - components: - - "Next.js 14" - - "Supabase" - - "Clerk Auth" - - "Tailwind CSS 3.4" - - "Vercel deployment" - good_for: "MVPs and rapid prototyping" + rapid_prototype: + name: "Rapid Prototype" + components: ["Next.js", "Supabase", "shadcn/ui", "Vercel"] + good_for: "MVP and rapid development" - realtime_stack: - name: "Real-time Collaboration" - components: - - "Next.js 14" - - "Socket.io 4.6" - - "Redis 7.2" - - "PostgreSQL 15" - - "Railway deployment" - good_for: "Collaborative applications" + real_time_app: + name: "Real-Time Application" + components: ["Next.js", "Supabase Realtime", "PostgreSQL", "Prisma", "Socket.io fallback"] + good_for: "Chat, collaboration, live updates" -# WARNING: Version numbers are illustrative - actual versions should be verified -# during workflow execution via web search for current stable versions + mobile_app: + name: "Mobile Application" + components: ["Expo", "React Native", "Supabase or Firebase", "React Query"] + good_for: "Cross-platform mobile apps" -# Starter templates that make architectural decisions +# Starter templates and what decisions they make starter_templates: create_next_app: name: "Create Next App" - command_search: "npx create-next-app@latest options" - base_command: "npx create-next-app@latest" - interactive: true - decisions_provided: - - "TypeScript vs JavaScript (--typescript flag)" - - "ESLint configuration (--eslint flag)" - - "Tailwind CSS setup (--tailwind flag)" - - "App Router vs Pages Router (--app flag)" - - "src/ directory structure (--src-dir flag)" - - "Import alias (@/* default)" - project_structure: "Standard Next.js structure with app/ or pages/" - good_for: ["Web applications", "SSR/SSG needs", "Full-stack React"] + command_search: "npx create-next-app@latest" + decisions_provided: ["Next.js framework", "TypeScript option", "App Router vs Pages", "Tailwind CSS option", "ESLint"] + good_for: ["React web applications", "Full-stack apps", "SSR/SSG"] create_t3_app: name: "Create T3 App" - command_search: "create t3 app latest CLI options" - base_command: "npm create t3-app@latest" - interactive: true - decisions_provided: - - "Next.js framework (always)" - - "TypeScript (always)" - - "tRPC for type-safe APIs" - - "Prisma ORM" - - "NextAuth.js authentication" - - "Tailwind CSS" - - "Drizzle ORM (alternative to Prisma)" - project_structure: "Opinionated full-stack structure" - good_for: ["Type-safe full-stack", "Rapid development", "Best practices"] + command_search: "npm create t3-app@latest" + decisions_provided: ["Next.js", "TypeScript", "tRPC", "Prisma", "NextAuth", "Tailwind CSS"] + good_for: ["Type-safe full-stack apps"] create_vite: name: "Create Vite" - command_search: "npm create vite templates options" - base_command: "npm create vite@latest" - interactive: true - templates_available: - - "vanilla" - - "vanilla-ts" - - "react" - - "react-ts" - - "react-swc" - - "react-swc-ts" - - "vue" - - "vue-ts" - - "svelte" - - "svelte-ts" - decisions_provided: - - "Build tool (Vite)" - - "Framework choice" - - "TypeScript setup" - - "HMR configuration" - - "Development server" - project_structure: "Minimal, framework-specific" - good_for: ["SPAs", "Fast development", "Modern tooling"] - - create_react_app: - name: "Create React App" - status: "DEPRECATED - Use Vite or Next.js instead" - note: "No longer recommended by React team" + command_search: "npm create vite@latest" + decisions_provided: ["Framework choice (React/Vue/Svelte)", "TypeScript option", "Vite bundler"] + good_for: ["Fast dev SPAs", "Library development"] create_remix: name: "Create Remix" - command_search: "npx create-remix latest options" - base_command: "npx create-remix@latest" - decisions_provided: - - "Remix framework" - - "TypeScript option" - - "Deployment target" - - "CSS solution" + command_search: "npx create-remix@latest" + decisions_provided: ["Remix framework", "TypeScript option", "Deployment target", "CSS solution"] good_for: ["Web standards", "Nested routing", "Progressive enhancement"] nest_new: name: "NestJS CLI" - command_search: "nest new project options" - base_command: "nest new" - decisions_provided: - - "TypeScript (always)" - - "Package manager" - - "Testing framework (Jest)" - - "Linting (ESLint)" - - "Project structure (modules/controllers/services)" - project_structure: "Enterprise Angular-style backend" + command_search: "nest new project" + decisions_provided: ["TypeScript (always)", "Package manager", "Testing framework (Jest)", "Project structure"] good_for: ["Enterprise APIs", "Microservices", "GraphQL APIs"] create_expo_app: name: "Create Expo App" - command_search: "create-expo-app templates latest" - base_command: "npx create-expo-app" - decisions_provided: - - "React Native setup" - - "TypeScript option" - - "Navigation library option" - - "Expo SDK version" + command_search: "npx create-expo-app" + decisions_provided: ["React Native", "Expo SDK", "TypeScript option", "Navigation option"] good_for: ["Cross-platform mobile", "React Native apps"] - create_vue: - name: "Create Vue" - command_search: "npm create vue latest options" - base_command: "npm create vue@latest" - decisions_provided: - - "Vue 3" - - "TypeScript option" - - "JSX support" - - "Vue Router" - - "Pinia state management" - - "Vitest for testing" - - "ESLint + Prettier" - good_for: ["Vue applications", "Progressive web apps"] - - create_astro: - name: "Create Astro" - command_search: "npm create astro latest templates" - base_command: "npm create astro@latest" - decisions_provided: - - "Astro framework" - - "TypeScript strictness" - - "Template choice" - - "Framework integrations" - good_for: ["Content sites", "Static sites", "Islands architecture"] - - create_svelte: - name: "Create Svelte" - command_search: "npm create svelte latest options" - base_command: "npm create svelte@latest" - decisions_provided: - - "SvelteKit framework" - - "TypeScript option" - - "ESLint" - - "Prettier" - - "Testing setup" - good_for: ["Svelte applications", "Compiled frameworks"] - - cargo_new: - name: "Cargo New (Rust)" - command_search: "cargo new options binary library" - base_command: "cargo new" - decisions_provided: - - "Binary vs Library (--bin or --lib)" - - "Project structure" - - "Cargo.toml setup" - good_for: ["Rust CLI tools", "Systems programming", "Performance critical"] - - dotnet_new: - name: ".NET CLI" - command_search: "dotnet new templates list" - base_command: "dotnet new" - templates_available: - - "webapi" - - "webapp" - - "blazor" - - "console" - - "classlib" - decisions_provided: - - "Project type" - - ".NET version" - - "Authentication option" - - "HTTPS configuration" - good_for: ["C# applications", "Enterprise", "Windows development"] - - rails_new: - name: "Rails New" - command_search: "rails new options latest" - base_command: "rails new" - decisions_provided: - - "Database (PostgreSQL/MySQL/SQLite)" - - "CSS framework" - - "JavaScript approach" - - "Testing framework" - - "API-only mode" - good_for: ["Ruby web apps", "Rapid prototyping", "Convention over configuration"] - - django_startproject: - name: "Django Start Project" - command_search: "django-admin startproject structure" - base_command: "django-admin startproject" - decisions_provided: - - "Django framework" - - "Project structure" - - "Settings configuration" - - "Database (SQLite default)" - good_for: ["Python web apps", "Admin interfaces", "Content management"] - - create_redwood_app: - name: "Create RedwoodJS App" - command_search: "yarn create redwood-app latest" - base_command: "yarn create redwood-app" - decisions_provided: - - "RedwoodJS framework" - - "TypeScript (default)" - - "Prisma ORM" - - "GraphQL API" - - "Storybook" - - "Testing setup" - project_structure: "Monorepo with api/ and web/" - good_for: ["Full-stack JAMstack", "Startups", "Rapid development"] - -# Starter template selection heuristics +# Starter selection heuristics (workflow logic) starter_selection_rules: by_project_type: web_application: @@ -685,17 +210,13 @@ starter_selection_rules: considerations: "SSR needs? → Next.js. Type safety critical? → T3. SPA only? → Vite" mobile_app: - recommended: ["create_expo_app", "react_native_cli"] - considerations: "Need native modules? → React Native CLI. Simpler setup? → Expo" + recommended: ["create_expo_app"] + considerations: "Cross-platform → Expo. Native-heavy → React Native CLI" api_backend: - recommended: ["nest_new", "express_generator", "fastify_cli"] - considerations: "Enterprise? → NestJS. Simple? → Express. Performance? → Fastify" - - cli_tool: - recommended: ["cargo_new", "go_mod_init", "npm_init"] - considerations: "Performance critical? → Rust/Go. Quick script? → Node.js/Python" + recommended: ["nest_new"] + considerations: "Enterprise → NestJS. Simple → Express starter. Performance → Fastify" full_stack: - recommended: ["create_t3_app", "create_redwood_app", "rails_new"] - considerations: "Type safety? → T3. JAMstack? → Redwood. Ruby? → Rails" + recommended: ["create_t3_app", "create_remix"] + considerations: "Type safety → T3. Web standards → Remix. Monolith → RedwoodJS" diff --git a/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-2.yaml b/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-2.yaml index 9dc674b0..dc26cc3d 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-2.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-2.yaml @@ -50,10 +50,10 @@ phases: command: "tech-spec" output: "Creates spec with multiple story files" note: "Integrate with existing patterns" - - id: "ux-spec" + - id: "create-design" conditional: "if_has_ui" agent: "ux-designer" - command: "ux-spec" + command: "create-design" - phase: 3 name: "Solutioning" diff --git a/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-3.yaml b/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-3.yaml index 404ade4b..bbd68255 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-3.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-3.yaml @@ -44,10 +44,10 @@ phases: agent: "pm" command: "prd" output: "Requirements with integration points" - - id: "ux-spec" + - id: "create-design" conditional: "if_has_ui" - agent: "pm" - command: "ux-spec" + agent: "ux-designer" + command: "create-design" note: "Must align with existing UI patterns" - phase: 3 diff --git a/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-4.yaml b/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-4.yaml index 9be80416..5a609661 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-4.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/brownfield-level-4.yaml @@ -46,10 +46,10 @@ phases: agent: "pm" command: "prd" output: "Comprehensive PRD considering existing system" - - id: "ux-spec" + - id: "create-design" required: true - agent: "pm" - command: "ux-spec" + agent: "ux-designer" + command: "create-design" note: "Multiple UI/UX specifications" - phase: 3 diff --git a/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-2.yaml b/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-2.yaml index 6568de92..02090880 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-2.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-2.yaml @@ -34,10 +34,10 @@ phases: agent: "pm" command: "prd" output: "Creates PRD with epics.md and story list" - - id: "ux-spec" + - id: "create-design" conditional: "if_has_ui" agent: "ux-designer" - command: "ux-spec" + command: "create-design" - id: "tech-spec" optional: true agent: "pm" diff --git a/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-3.yaml b/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-3.yaml index a3e071d3..4b6b532c 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-3.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-3.yaml @@ -34,10 +34,10 @@ phases: agent: "pm" command: "prd" output: "High-level requirements and epic definitions" - - id: "ux-spec" + - id: "create-design" conditional: "if_has_ui" agent: "ux-designer" - command: "ux-spec" + command: "create-design" - phase: 3 name: "Solutioning" diff --git a/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-4.yaml b/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-4.yaml index e93f646b..d2c470a5 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-4.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/greenfield-level-4.yaml @@ -16,7 +16,7 @@ phases: agent: "analyst" command: "brainstorm-project" - id: "research" - required: true + required: false agent: "analyst" command: "research" note: "Extensive research across multiple domains" @@ -35,10 +35,10 @@ phases: agent: "pm" command: "prd" output: "Comprehensive product requirements document" - - id: "ux-spec" + - id: "create-design" required: true agent: "ux-designer" - command: "ux-spec" + command: "create-design" note: "Multiple UI/UX specifications needed" - phase: 3 diff --git a/src/modules/bmm/workflows/workflow-status/project-levels.yaml b/src/modules/bmm/workflows/workflow-status/project-levels.yaml index 2288e695..fc38be03 100644 --- a/src/modules/bmm/workflows/workflow-status/project-levels.yaml +++ b/src/modules/bmm/workflows/workflow-status/project-levels.yaml @@ -39,7 +39,7 @@ levels: title: "Enterprise Scale" stories: "40+ stories" description: "Multiple products, enterprise architecture" - documentation: "Full suite - PRD, architecture, product specs" + documentation: "PRD + architecture + JIT tech specs" architecture: true # Quick detection hints for workflow-init diff --git a/src/modules/bmm/workflows/workflow-status/workflow-status-template.md b/src/modules/bmm/workflows/workflow-status/workflow-status-template.md index 819aac98..d7384008 100644 --- a/src/modules/bmm/workflows/workflow-status/workflow-status-template.md +++ b/src/modules/bmm/workflows/workflow-status/workflow-status-template.md @@ -25,21 +25,6 @@ NEXT_ACTION: {{next_action}} NEXT_COMMAND: {{next_command}} NEXT_AGENT: {{next_agent}} -## Story Backlog - -{{#backlog_stories}} - -- {{story_id}}: {{story_title}} - {{/backlog_stories}} - -## Completed Stories - -{{#done_stories}} - -- {{story_id}}: {{completed_date}} - {{/done_stories}} - --- _Last Updated: {{last_updated}}_ -_Status Version: 2.0_