validation tasks added
This commit is contained in:
Brian Madison
Dave Dittrich
parent
1bf2cfdfd5
commit
94f2572b0b
|
|
@ -30,6 +30,12 @@ agent:
|
||||||
workflow: "{project-root}/bmad/bmm/workflows/3-solutioning/architecture/workflow.yaml"
|
workflow: "{project-root}/bmad/bmm/workflows/3-solutioning/architecture/workflow.yaml"
|
||||||
description: Produce a Scale Adaptive Architecture
|
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
|
- trigger: solutioning-gate-check
|
||||||
workflow: "{project-root}/bmad/bmm/workflows/3-solutioning/solutioning-gate-check/workflow.yaml"
|
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)
|
description: Validate solutioning complete, ready for Phase 4 (Level 2-4 only)
|
||||||
|
|
|
||||||
|
|
@ -39,10 +39,12 @@ agent:
|
||||||
workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/tech-spec/workflow.yaml"
|
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
|
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
|
- trigger: correct-course
|
||||||
workflow: "{project-root}/bmad/bmm/workflows/4-implementation/correct-course/workflow.yaml"
|
workflow: "{project-root}/bmad/bmm/workflows/4-implementation/correct-course/workflow.yaml"
|
||||||
description: Course Correction Analysis
|
description: Course Correction Analysis
|
||||||
|
|
||||||
- trigger: validate
|
|
||||||
exec: "{project-root}/bmad/core/tasks/validate-workflow.xml"
|
|
||||||
description: Validate any document against its workflow checklist
|
|
||||||
|
|
|
||||||
|
|
@ -27,11 +27,7 @@ agent:
|
||||||
description: Conduct Design Thinking Workshop to Define the User Specification
|
description: Conduct Design Thinking Workshop to Define the User Specification
|
||||||
|
|
||||||
- trigger: validate-design
|
- 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"
|
checklist: "{project-root}/bmad/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md"
|
||||||
document: "{output_folder}/ux-spec.md"
|
document: "{output_folder}/ux-spec.md"
|
||||||
description: Validate UX Specification and Design Artifacts
|
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
|
|
||||||
|
|
|
||||||
|
|
@ -97,9 +97,10 @@ The workflow adapts automatically based on project assessment, but key configura
|
||||||
│ ├── instructions-narrative.md # Narrative design instructions
|
│ ├── instructions-narrative.md # Narrative design instructions
|
||||||
│ ├── narrative-template.md # Narrative planning template
|
│ ├── narrative-template.md # Narrative planning template
|
||||||
│ └── workflow.yaml
|
│ └── workflow.yaml
|
||||||
└── ux/
|
└── create-ux-design/
|
||||||
├── instructions-ux.md # UX specification instructions
|
├── instructions.md # UX design instructions
|
||||||
├── ux-spec-template.md # UX specification template
|
├── ux-design-template.md # UX design template
|
||||||
|
├── checklist.md # UX design validation checklist
|
||||||
└── workflow.yaml
|
└── workflow.yaml
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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**
|
**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
|
- [ ] **Designers can create high-fidelity mockups** from this spec
|
||||||
- [ ] **Developers can implement** with clear UX guidance
|
- [ ] **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)
|
- [ ] ❌ **No visual collaboration** (color themes or design mockups not generated)
|
||||||
- [ ] ❌ **User not involved in decisions** (auto-generated without collaboration)
|
- [ ] ❌ **User not involved in decisions** (auto-generated without collaboration)
|
||||||
|
|
|
||||||
|
|
@ -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)"
|
|
||||||
|
|
@ -37,7 +37,7 @@ For integrated use, run `workflow-init` first for better context.
|
||||||
</check>
|
</check>
|
||||||
</step>
|
</step>
|
||||||
|
|
||||||
<step n="1" goal="Load context and understand the vision">
|
<step n="1a" goal="Confirm project understanding or gather basic context">
|
||||||
<critical>A UX designer must understand the WHY before designing the HOW</critical>
|
<critical>A UX designer must understand the WHY before designing the HOW</critical>
|
||||||
|
|
||||||
<action>Attempt to load context documents using fuzzy matching: - PRD: {prd_file} - Product Brief: {brief_file} - Brainstorming: {brainstorm_file}
|
<action>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
|
- Brand personality hints
|
||||||
- Competitive landscape references
|
- Competitive landscape references
|
||||||
</action>
|
</action>
|
||||||
|
|
||||||
|
<output>I've loaded your project documentation. Let me confirm what I'm seeing:
|
||||||
|
|
||||||
|
**Project:** {{project_summary_from_docs}}
|
||||||
|
**Target Users:** {{user_summary_from_docs}}</output>
|
||||||
|
|
||||||
|
<ask>Does this match your understanding? Any corrections or additions?</ask>
|
||||||
|
|
||||||
</check>
|
</check>
|
||||||
|
|
||||||
<check if="no_documents_found">
|
<check if="no_documents_found">
|
||||||
|
|
@ -63,17 +71,11 @@ For integrated use, run `workflow-init` first for better context.
|
||||||
**Who is this for?** Describe your ideal user.</ask>
|
**Who is this for?** Describe your ideal user.</ask>
|
||||||
</check>
|
</check>
|
||||||
|
|
||||||
<check if="documents_found">
|
<template-output>project_and_users_confirmed</template-output>
|
||||||
<output>I've loaded your project documentation. Let me confirm what I'm seeing:
|
</step>
|
||||||
|
|
||||||
**Project:** {{project_summary_from_docs}}
|
<step n="1b" goal="Understand core experience and platform">
|
||||||
**Target Users:** {{user_summary_from_docs}}
|
<critical>Now we discover the ONE thing that defines this experience</critical>
|
||||||
|
|
||||||
Does this match your understanding?</output>
|
|
||||||
|
|
||||||
<ask>Sounds good? Any corrections?</ask>
|
|
||||||
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<ask>Now let's dig into the experience itself.
|
<ask>Now let's dig into the experience itself.
|
||||||
|
|
||||||
|
|
@ -86,6 +88,12 @@ Does this match your understanding?</output>
|
||||||
**Platform:**
|
**Platform:**
|
||||||
Where will users experience this? (Web, mobile app, desktop, multiple platforms)</ask>
|
Where will users experience this? (Web, mobile app, desktop, multiple platforms)</ask>
|
||||||
|
|
||||||
|
<template-output>core_experience_and_platform</template-output>
|
||||||
|
</step>
|
||||||
|
|
||||||
|
<step n="1c" goal="Discover the desired emotional response">
|
||||||
|
<critical>Emotion drives behavior - this shapes everything</critical>
|
||||||
|
|
||||||
<ask>This is crucial - **what should users FEEL when using this?**
|
<ask>This is crucial - **what should users FEEL when using this?**
|
||||||
|
|
||||||
Not what they'll do, but what emotion or state they should experience:
|
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?</ask>
|
Really think about the emotional response you want. What feeling would make them tell a friend about this?</ask>
|
||||||
|
|
||||||
|
<template-output>desired_emotional_response</template-output>
|
||||||
|
</step>
|
||||||
|
|
||||||
|
<step n="1d" goal="Gather inspiration and analyze UX patterns">
|
||||||
|
<critical>Learn from what users already love</critical>
|
||||||
|
|
||||||
<ask>**Inspiration time!**
|
<ask>**Inspiration time!**
|
||||||
|
|
||||||
Name 2-3 apps your users already love and USE regularly.
|
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:
|
Feel free to share:
|
||||||
|
|
||||||
- App names (I'll look them up to see current UX)
|
- App names (I'll look them up to see current UX)
|
||||||
- Screenshots (if you have examples of what you like)
|
- Screenshots (if you have examples of what you like)
|
||||||
- Links to products or demos</ask>
|
- Links to products or demos
|
||||||
|
|
||||||
<action>For each app mentioned:
|
For each one, what do they do well from a UX perspective? What makes the experience compelling?</ask>
|
||||||
<WebSearch>{{app_name}} current interface UX design 2025</WebSearch>
|
|
||||||
<action>Analyze what makes that app's UX effective</action>
|
|
||||||
<action>Note patterns and principles that could apply to this project</action>
|
|
||||||
</action>
|
|
||||||
|
|
||||||
<action>If screenshots provided:
|
<action>For each app mentioned:
|
||||||
<action>Analyze screenshots for UX patterns, visual style, interaction patterns</action>
|
<WebSearch>{{app_name}} current interface UX design 2025</WebSearch>
|
||||||
<action>Note what user finds compelling about these examples</action>
|
<action>Analyze what makes that app's UX effective</action>
|
||||||
</action>
|
<action>Note patterns and principles that could apply to this project</action>
|
||||||
|
</action>
|
||||||
|
|
||||||
<action>Analyze project for UX complexity indicators:
|
<action>If screenshots provided:
|
||||||
- Number of distinct user roles or personas
|
<action>Analyze screenshots for UX patterns, visual style, interaction patterns</action>
|
||||||
- Number of primary user journeys
|
<action>Note what user finds compelling about these examples</action>
|
||||||
- Interaction complexity (simple CRUD vs rich interactions)
|
</action>
|
||||||
- Platform requirements (single vs multi-platform)
|
|
||||||
- Real-time collaboration needs
|
|
||||||
- Content creation vs consumption
|
|
||||||
- Novel interaction patterns
|
|
||||||
</action>
|
|
||||||
|
|
||||||
<action>Based on {user_skill_level}, set facilitation approach:
|
<template-output>inspiration_analysis</template-output>
|
||||||
|
</step>
|
||||||
|
|
||||||
|
<step n="1e" goal="Synthesize understanding and set facilitation mode">
|
||||||
|
<critical>Now analyze complexity and set the right facilitation approach</critical>
|
||||||
|
|
||||||
|
<action>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
|
||||||
|
</action>
|
||||||
|
|
||||||
|
<action>Based on {user_skill_level}, set facilitation approach:
|
||||||
|
|
||||||
<check if="{user_skill_level} == 'expert'">
|
<check if="{user_skill_level} == 'expert'">
|
||||||
Set mode: UX_EXPERT
|
Set mode: UX_EXPERT
|
||||||
|
|
@ -161,11 +171,10 @@ Feel free to share:
|
||||||
- Focus on "why this matters for users"
|
- Focus on "why this matters for users"
|
||||||
- Protect from overwhelming choices
|
- Protect from overwhelming choices
|
||||||
</check>
|
</check>
|
||||||
|
|
||||||
</action>
|
</action>
|
||||||
|
|
||||||
<action>Synthesize and reflect understanding back to {user_name}:
|
<output>Here's what I'm understanding about {{project_name}}:
|
||||||
|
|
||||||
"Here's what I'm understanding about {{project_name}}:
|
|
||||||
|
|
||||||
**Vision:** {{project_vision_summary}}
|
**Vision:** {{project_vision_summary}}
|
||||||
**Users:** {{user_summary}}
|
**Users:** {{user_summary}}
|
||||||
|
|
@ -176,10 +185,7 @@ Feel free to share:
|
||||||
|
|
||||||
**UX Complexity:** {{complexity_assessment}}
|
**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."
|
This helps me understand both what we're building and the experience we're aiming for. Let's start designing!</output>
|
||||||
</action>
|
|
||||||
|
|
||||||
<ask>Does this capture your vision? Anything I'm missing or misunderstanding?</ask>
|
|
||||||
|
|
||||||
<action>Load UX design template: {template}</action>
|
<action>Load UX design template: {template}</action>
|
||||||
<action>Initialize output document at {default_output_file}</action>
|
<action>Initialize output document at {default_output_file}</action>
|
||||||
|
|
@ -277,9 +283,8 @@ Or tell me:
|
||||||
<template-output>design_system_decision</template-output>
|
<template-output>design_system_decision</template-output>
|
||||||
</step>
|
</step>
|
||||||
|
|
||||||
<step n="3" goal="Define core experience and discover novel patterns">
|
<step n="3a" goal="Identify the defining experience">
|
||||||
<critical>Every great app has a defining experience - identify and design it</critical>
|
<critical>Every great app has a defining experience - identify it first</critical>
|
||||||
<critical>Some projects need INVENTED UX patterns, not just standard solutions</critical>
|
|
||||||
|
|
||||||
<action>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?
|
<action>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?
|
||||||
</action>
|
</action>
|
||||||
|
|
@ -319,62 +324,96 @@ When someone describes your app to a friend, what would they say?
|
||||||
|
|
||||||
</action>
|
</action>
|
||||||
|
|
||||||
|
<template-output>defining_experience</template-output>
|
||||||
|
</step>
|
||||||
|
|
||||||
|
<step n="3b" goal="Design novel UX pattern (if needed)">
|
||||||
|
<critical>Skip this step if standard patterns apply. Run only if novel pattern detected.</critical>
|
||||||
|
|
||||||
<check if="novel_pattern_detected">
|
<check if="novel_pattern_detected">
|
||||||
<action>Engage in collaborative UX pattern design:
|
<output>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.</output>
|
||||||
|
|
||||||
1. **User Goal:** What does the user want to accomplish?
|
<ask>Let's think through the core mechanics of this {{pattern_name}} interaction:
|
||||||
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?
|
|
||||||
|
|
||||||
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?
|
||||||
</action>
|
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?
|
||||||
|
|
||||||
<action>Use advanced elicitation for UX innovation:
|
Walk me through your mental model for this interaction - the ideal experience from the user's perspective.</ask>
|
||||||
"Let's explore this interaction more deeply.
|
|
||||||
|
|
||||||
- What apps have SIMILAR (not identical) patterns we could learn from?
|
<template-output>novel_pattern_mechanics</template-output>
|
||||||
- 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?"
|
|
||||||
</action>
|
|
||||||
|
|
||||||
<action>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}}
|
|
||||||
</action>
|
|
||||||
|
|
||||||
</check>
|
</check>
|
||||||
|
|
||||||
<action>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?
|
<check if="!novel_pattern_detected">
|
||||||
|
<action>Skip to Step 3d - standard patterns apply</action>
|
||||||
|
</check>
|
||||||
|
</step>
|
||||||
|
|
||||||
|
<step n="3c" goal="Explore novel pattern deeply (if novel)">
|
||||||
|
<critical>Skip if not designing novel pattern</critical>
|
||||||
|
|
||||||
|
<check if="novel_pattern_detected">
|
||||||
|
<ask>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?</ask>
|
||||||
|
|
||||||
|
<action>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}}
|
||||||
|
</action>
|
||||||
|
|
||||||
|
<template-output>novel_pattern_details</template-output>
|
||||||
|
|
||||||
|
</check>
|
||||||
|
|
||||||
|
<check if="!novel_pattern_detected">
|
||||||
|
<action>Skip to Step 3d - standard patterns apply</action>
|
||||||
|
</check>
|
||||||
|
</step>
|
||||||
|
|
||||||
|
<step n="3d" goal="Define core experience principles">
|
||||||
|
<critical>Establish the guiding principles for the entire experience</critical>
|
||||||
|
|
||||||
|
<action>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?
|
||||||
</action>
|
</action>
|
||||||
|
|
||||||
<template-output>core_experience</template-output>
|
<output>Core experience principles established:
|
||||||
<template-output>novel_ux_patterns</template-output>
|
|
||||||
|
**Speed:** {{speed_principle}}
|
||||||
|
**Guidance:** {{guidance_principle}}
|
||||||
|
**Flexibility:** {{flexibility_principle}}
|
||||||
|
**Feedback:** {{feedback_principle}}
|
||||||
|
|
||||||
|
These principles will guide every UX decision from here forward.</output>
|
||||||
|
|
||||||
|
<template-output>core_experience_principles</template-output>
|
||||||
</step>
|
</step>
|
||||||
|
|
||||||
<step n="4" goal="Discover visual foundation through color theme exploration">
|
<step n="4" goal="Discover visual foundation through color theme exploration">
|
||||||
<critical>Visual design isn't decoration - it communicates brand and guides attention</critical>
|
<critical>Visual design isn't decoration - it communicates brand and guides attention</critical>
|
||||||
<critical>SHOW options, don't just describe them - generate HTML visualizations</critical>
|
<critical>SHOW options, don't just describe them - generate HTML visualizations</critical>
|
||||||
|
<critical>Use color psychology principles: blue=trust, red=energy, green=growth/calm, purple=creativity, etc.</critical>
|
||||||
<action>Load color psychology data: {color_psychology}</action>
|
|
||||||
|
|
||||||
<ask>Do you have existing brand guidelines or a specific color palette in mind? (y/n)
|
<ask>Do you have existing brand guidelines or a specific color palette in mind? (y/n)
|
||||||
|
|
||||||
|
|
@ -512,6 +551,7 @@ What speaks to you?
|
||||||
<step n="5" goal="Generate design direction mockups for visual decision-making">
|
<step n="5" goal="Generate design direction mockups for visual decision-making">
|
||||||
<critical>This is the game-changer - SHOW actual design directions, don't just discuss them</critical>
|
<critical>This is the game-changer - SHOW actual design directions, don't just discuss them</critical>
|
||||||
<critical>Users make better decisions when they SEE options, not imagine them</critical>
|
<critical>Users make better decisions when they SEE options, not imagine them</critical>
|
||||||
|
<critical>Consider platform norms: desktop apps often use sidebar nav, mobile apps use bottom nav or tabs</critical>
|
||||||
|
|
||||||
<action>Based on PRD and core experience, identify 2-3 key screens to mock up:
|
<action>Based on PRD and core experience, identify 2-3 key screens to mock up:
|
||||||
|
|
||||||
|
|
@ -529,7 +569,7 @@ What speaks to you?
|
||||||
|
|
||||||
</action>
|
</action>
|
||||||
|
|
||||||
<action>Generate 6-8 different design direction variations:
|
<action>Generate 6-8 different design direction variations exploring different UX approaches:
|
||||||
|
|
||||||
Vary these dimensions:
|
Vary these dimensions:
|
||||||
|
|
||||||
|
|
@ -839,8 +879,7 @@ Component: {{custom_component_name}}
|
||||||
<step n="8" goal="Define UX pattern decisions for consistency">
|
<step n="8" goal="Define UX pattern decisions for consistency">
|
||||||
<critical>These are implementation patterns for UX - ensure consistency across the app</critical>
|
<critical>These are implementation patterns for UX - ensure consistency across the app</critical>
|
||||||
<critical>Like the architecture workflow's implementation patterns, but for user experience</critical>
|
<critical>Like the architecture workflow's implementation patterns, but for user experience</critical>
|
||||||
|
<critical>These decisions prevent "it works differently on every page" confusion</critical>
|
||||||
<action>Load UX pattern catalog: {ux_pattern_catalog}</action>
|
|
||||||
|
|
||||||
<action>Based on chosen components and journeys, identify UX consistency decisions needed:
|
<action>Based on chosen components and journeys, identify UX consistency decisions needed:
|
||||||
|
|
||||||
|
|
@ -905,17 +944,38 @@ Component: {{custom_component_name}}
|
||||||
|
|
||||||
</action>
|
</action>
|
||||||
|
|
||||||
<action>For each pattern category, facilitate decision:
|
<output>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.
|
||||||
|
|
||||||
<action>For each pattern, present options and recommendation:
|
These patterns determine how {{project_name}} behaves in common situations - like how buttons work, how forms validate, how modals behave, etc.</output>
|
||||||
"Let's decide how {{pattern_category}} works throughout your app.
|
|
||||||
|
|
||||||
If we don't decide now, it might work differently on different screens and confuse users.
|
<ask>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)
|
||||||
</action>
|
- 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)</ask>
|
||||||
|
|
||||||
|
<action>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
|
||||||
|
|
||||||
</action>
|
</action>
|
||||||
|
|
||||||
|
|
@ -1064,6 +1124,128 @@ Based on your deployment intent: {{recommendation}}
|
||||||
</invoke-workflow>
|
</invoke-workflow>
|
||||||
</check>
|
</check>
|
||||||
|
|
||||||
|
<ask>🎨 **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?</ask>
|
||||||
|
|
||||||
|
<check if="user_choice == 'key_screens' or similar">
|
||||||
|
<action>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
|
||||||
|
</action>
|
||||||
|
|
||||||
|
<output>✨ **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.</output>
|
||||||
|
</check>
|
||||||
|
|
||||||
|
<check if="user_choice == 'user_journey' or similar">
|
||||||
|
<ask>Which user journey would you like to visualize?
|
||||||
|
|
||||||
|
{{list_of_designed_journeys}}
|
||||||
|
|
||||||
|
Pick one, or tell me which flow you want to see!</ask>
|
||||||
|
|
||||||
|
<action>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
|
||||||
|
</action>
|
||||||
|
|
||||||
|
<output>✨ **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.</output>
|
||||||
|
</check>
|
||||||
|
|
||||||
|
<check if="user_choice == 'something_else'">
|
||||||
|
<ask>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?</ask>
|
||||||
|
|
||||||
|
<action>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
|
||||||
|
</action>
|
||||||
|
|
||||||
|
<output>✨ **Created: {{custom_visualization_file}}**
|
||||||
|
|
||||||
|
{{description_of_what_was_created}}
|
||||||
|
|
||||||
|
Open in browser to explore!</output>
|
||||||
|
</check>
|
||||||
|
|
||||||
<output>**✅ UX Design Specification Complete!**
|
<output>**✅ UX Design Specification Complete!**
|
||||||
|
|
||||||
**Core Deliverables:**
|
**Core Deliverables:**
|
||||||
|
|
|
||||||
|
|
@ -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"]
|
|
||||||
|
|
@ -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"
|
|
||||||
|
|
@ -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._
|
|
||||||
|
|
@ -1,405 +0,0 @@
|
||||||
# UX/UI Specification Workflow Instructions
|
|
||||||
|
|
||||||
<workflow>
|
|
||||||
|
|
||||||
<critical>The workflow execution engine is governed by: {project_root}/bmad/core/tasks/workflow.xml</critical>
|
|
||||||
<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
|
|
||||||
<critical>Communicate all responses in {communication_language} and language MUST be tailored to {user_skill_level}</critical>
|
|
||||||
<critical>Generate all documents in {document_output_language}</critical>
|
|
||||||
<critical>This workflow creates comprehensive UX/UI specifications - can run standalone or as part of plan-project</critical>
|
|
||||||
<critical>Uses ux-spec-template.md for structured output generation</critical>
|
|
||||||
<critical>Can optionally generate AI Frontend Prompts for tools like Vercel v0, Lovable.ai</critical>
|
|
||||||
|
|
||||||
<critical>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.</critical>
|
|
||||||
|
|
||||||
<step n="0" goal="Check for workflow status">
|
|
||||||
|
|
||||||
<invoke-workflow path="{project-root}/bmad/bmm/workflows/workflow-status">
|
|
||||||
<param>mode: init-check</param>
|
|
||||||
</invoke-workflow>
|
|
||||||
|
|
||||||
<check if="status_exists == true">
|
|
||||||
<action>Store {{status_file_path}} for later updates</action>
|
|
||||||
<action>Set tracking_mode = true</action>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="status_exists == false">
|
|
||||||
<action>Set tracking_mode = false</action>
|
|
||||||
<output>Note: Running without workflow tracking. Run `workflow-init` to enable progress tracking.</output>
|
|
||||||
</check>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="1" goal="Load context and analyze project requirements">
|
|
||||||
|
|
||||||
<action>Determine workflow mode (standalone or integrated)</action>
|
|
||||||
|
|
||||||
<check if="mode is standalone">
|
|
||||||
<ask>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
|
|
||||||
</ask>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="no PRD in standalone mode">
|
|
||||||
<ask>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?
|
|
||||||
</ask>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="PRD exists or integrated mode">
|
|
||||||
<action>Load the following documents if available:</action>
|
|
||||||
|
|
||||||
- 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)
|
|
||||||
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<action>Analyze project for UX complexity:</action>
|
|
||||||
|
|
||||||
- Number of user-facing features
|
|
||||||
- Types of users/personas mentioned
|
|
||||||
- Interaction complexity
|
|
||||||
- Platform requirements (web, mobile, desktop)
|
|
||||||
|
|
||||||
<action>Load ux-spec-template from workflow.yaml</action>
|
|
||||||
|
|
||||||
<template-output>project_context</template-output>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="2" goal="Define UX goals and principles">
|
|
||||||
|
|
||||||
<ask>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?
|
|
||||||
</ask>
|
|
||||||
|
|
||||||
<template-output>user_personas</template-output>
|
|
||||||
<template-output>usability_goals</template-output>
|
|
||||||
<template-output>design_principles</template-output>
|
|
||||||
|
|
||||||
<invoke-task halt="true">{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="3" goal="Create information architecture">
|
|
||||||
|
|
||||||
<action>Based on functional requirements from PRD, create site/app structure</action>
|
|
||||||
|
|
||||||
**Create comprehensive site map showing:**
|
|
||||||
|
|
||||||
- All major sections/screens
|
|
||||||
- Hierarchical relationships
|
|
||||||
- Navigation paths
|
|
||||||
|
|
||||||
<template-output>site_map</template-output>
|
|
||||||
|
|
||||||
**Define navigation structure:**
|
|
||||||
|
|
||||||
- Primary navigation items
|
|
||||||
- Secondary navigation approach
|
|
||||||
- Mobile navigation strategy
|
|
||||||
- Breadcrumb structure
|
|
||||||
|
|
||||||
<template-output>navigation_structure</template-output>
|
|
||||||
|
|
||||||
<invoke-task halt="true">{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="4" goal="Design user flows for critical paths">
|
|
||||||
|
|
||||||
<action>Extract key user journeys from PRD</action>
|
|
||||||
<action>For each critical user task, create detailed flow</action>
|
|
||||||
|
|
||||||
<for-each journey="user_journeys_from_prd">
|
|
||||||
|
|
||||||
**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.
|
|
||||||
|
|
||||||
<template-output>user*flow*{{journey_number}}</template-output>
|
|
||||||
|
|
||||||
</for-each>
|
|
||||||
|
|
||||||
<invoke-task halt="true">{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="5" goal="Define component library approach">
|
|
||||||
|
|
||||||
<ask>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.
|
|
||||||
</ask>
|
|
||||||
|
|
||||||
<action>For primary components, define:</action>
|
|
||||||
|
|
||||||
- Component purpose
|
|
||||||
- Variants needed
|
|
||||||
- States (default, hover, active, disabled, error)
|
|
||||||
- Usage guidelines
|
|
||||||
|
|
||||||
<template-output>design_system_approach</template-output>
|
|
||||||
<template-output>core_components</template-output>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="6" goal="Establish visual design foundation">
|
|
||||||
|
|
||||||
<ask>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
|
|
||||||
</ask>
|
|
||||||
|
|
||||||
<action>Define color palette with semantic meanings</action>
|
|
||||||
|
|
||||||
<template-output>color_palette</template-output>
|
|
||||||
|
|
||||||
<action>Define typography system</action>
|
|
||||||
|
|
||||||
<template-output>font_families</template-output>
|
|
||||||
<template-output>type_scale</template-output>
|
|
||||||
|
|
||||||
<action>Define spacing and layout grid</action>
|
|
||||||
|
|
||||||
<template-output>spacing_layout</template-output>
|
|
||||||
|
|
||||||
<invoke-task halt="true">{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="7" goal="Define responsive and accessibility strategy">
|
|
||||||
|
|
||||||
**Responsive Design:**
|
|
||||||
|
|
||||||
<action>Define breakpoints based on target devices from PRD</action>
|
|
||||||
|
|
||||||
<template-output>breakpoints</template-output>
|
|
||||||
|
|
||||||
<action>Define adaptation patterns for different screen sizes</action>
|
|
||||||
|
|
||||||
<template-output>adaptation_patterns</template-output>
|
|
||||||
|
|
||||||
**Accessibility Requirements:**
|
|
||||||
|
|
||||||
<action>Based on deployment intent from PRD, define compliance level</action>
|
|
||||||
|
|
||||||
<template-output>compliance_target</template-output>
|
|
||||||
<template-output>accessibility_requirements</template-output>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="8" goal="Document interaction patterns" optional="true">
|
|
||||||
|
|
||||||
<ask>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
|
|
||||||
</ask>
|
|
||||||
|
|
||||||
<check if="yes or fuzzy match the user wants to define animation or micro interactions">
|
|
||||||
|
|
||||||
<action>Define motion principles</action>
|
|
||||||
<template-output>motion_principles</template-output>
|
|
||||||
|
|
||||||
<action>Define key animations and transitions</action>
|
|
||||||
<template-output>key_animations</template-output>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="9" goal="Create wireframes and design references" optional="true">
|
|
||||||
|
|
||||||
<ask>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
|
|
||||||
</ask>
|
|
||||||
|
|
||||||
<template-output if="design files will be created">design_files</template-output>
|
|
||||||
|
|
||||||
<check if="wireframe descriptions needed">
|
|
||||||
<for-each screen="key_screens">
|
|
||||||
<template-output>screen*layout*{{screen_number}}</template-output>
|
|
||||||
</for-each>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="10" goal="Generate next steps and output options">
|
|
||||||
|
|
||||||
## UX Specification Complete
|
|
||||||
|
|
||||||
<action>Generate specific next steps based on project level and outputs</action>
|
|
||||||
|
|
||||||
<template-output>immediate_actions</template-output>
|
|
||||||
|
|
||||||
**Design Handoff Checklist:**
|
|
||||||
|
|
||||||
- [ ] All user flows documented
|
|
||||||
- [ ] Component inventory complete
|
|
||||||
- [ ] Accessibility requirements defined
|
|
||||||
- [ ] Responsive strategy clear
|
|
||||||
- [ ] Brand guidelines incorporated
|
|
||||||
- [ ] Performance goals established
|
|
||||||
|
|
||||||
<check if="Level 3-4 project">
|
|
||||||
- [ ] Ready for detailed visual design
|
|
||||||
- [ ] Frontend architecture can proceed
|
|
||||||
- [ ] Story generation can include UX details
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<check if="Level 1-2 project or standalone">
|
|
||||||
- [ ] Development can proceed with spec
|
|
||||||
- [ ] Component implementation order defined
|
|
||||||
- [ ] MVP scope clear
|
|
||||||
|
|
||||||
</check>
|
|
||||||
|
|
||||||
<template-output>design_handoff_checklist</template-output>
|
|
||||||
|
|
||||||
<ask>**✅ 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):</ask>
|
|
||||||
|
|
||||||
<check if="user selects yes or option 1">
|
|
||||||
<goto step="11">Generate AI Frontend Prompt</goto>
|
|
||||||
</check>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="11" goal="Generate AI Frontend Prompt" optional="true">
|
|
||||||
|
|
||||||
<action>Prepare context for AI Frontend Prompt generation</action>
|
|
||||||
|
|
||||||
<ask>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):</ask>
|
|
||||||
|
|
||||||
<action>Gather UX spec details for prompt generation:</action>
|
|
||||||
|
|
||||||
- Design system approach
|
|
||||||
- Color palette and typography
|
|
||||||
- Key components and their states
|
|
||||||
- User flows to implement
|
|
||||||
- Responsive requirements
|
|
||||||
|
|
||||||
<invoke-task>{project-root}/bmad/bmm/tasks/ai-fe-prompt.md</invoke-task>
|
|
||||||
|
|
||||||
<action>Save AI Frontend Prompt to {{ai_frontend_prompt_file}}</action>
|
|
||||||
|
|
||||||
<ask>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):</ask>
|
|
||||||
|
|
||||||
</step>
|
|
||||||
|
|
||||||
<step n="12" goal="Update status if tracking enabled">
|
|
||||||
|
|
||||||
<check if="tracking_mode == true">
|
|
||||||
<invoke-workflow path="{project-root}/bmad/bmm/workflows/workflow-status">
|
|
||||||
<param>mode: update</param>
|
|
||||||
<param>action: complete_workflow</param>
|
|
||||||
<param>workflow_name: ux</param>
|
|
||||||
</invoke-workflow>
|
|
||||||
|
|
||||||
<check if="success == true">
|
|
||||||
<output>✅ Status updated! Next: {{next_workflow}}</output>
|
|
||||||
</check>
|
|
||||||
</check>
|
|
||||||
</step>
|
|
||||||
|
|
||||||
</workflow>
|
|
||||||
|
|
@ -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}} |
|
|
||||||
|
|
@ -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"
|
|
||||||
|
|
@ -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
|
- [ ] 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
|
- [ ] Every technology choice includes a specific version number
|
||||||
- [ ] Version numbers are current (verified via WebSearch, not hardcoded)
|
- [ ] Version numbers are current (verified via WebSearch, not hardcoded)
|
||||||
- [ ] Compatible versions selected (e.g., Node.js version supports chosen packages)
|
- [ ] Compatible versions selected (e.g., Node.js version supports chosen packages)
|
||||||
- [ ] Verification dates noted for version checks
|
- [ ] 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
|
- [ ] 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
|
- [ ] 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
|
- [ ] Decisions provided by starter marked as "PROVIDED BY STARTER"
|
||||||
- [ ] Decision summary table shows which epics each decision affects
|
- [ ] List of what starter provides is complete
|
||||||
- [ ] No orphan epics without architectural support
|
- [ ] Remaining decisions (not covered by starter) clearly identified
|
||||||
- [ ] Novel patterns mapped to affected epics
|
- [ ] No duplicate decisions that starter already makes
|
||||||
|
|
||||||
### Document Structure
|
---
|
||||||
|
|
||||||
- [ ] Executive summary is present and concise (2-3 sentences maximum)
|
## 4. Novel Pattern Design (if applicable)
|
||||||
- [ ] 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)
|
|
||||||
|
|
||||||
### Pattern Detection
|
### Pattern Detection
|
||||||
|
|
||||||
|
|
@ -51,16 +69,25 @@
|
||||||
- [ ] Patterns that don't have standard solutions documented
|
- [ ] Patterns that don't have standard solutions documented
|
||||||
- [ ] Multi-epic workflows requiring custom design captured
|
- [ ] Multi-epic workflows requiring custom design captured
|
||||||
|
|
||||||
### Pattern Documentation
|
### Pattern Documentation Quality
|
||||||
|
|
||||||
- [ ] Pattern name and purpose clearly defined
|
- [ ] Pattern name and purpose clearly defined
|
||||||
- [ ] Component interactions specified
|
- [ ] Component interactions specified
|
||||||
- [ ] Data flow documented (with sequence diagrams if complex)
|
- [ ] Data flow documented (with sequence diagrams if complex)
|
||||||
- [ ] Implementation guide provided for agents
|
- [ ] Implementation guide provided for agents
|
||||||
- [ ] Affected epics listed
|
|
||||||
- [ ] Edge cases and failure modes considered
|
- [ ] 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
|
### Pattern Categories Coverage
|
||||||
|
|
||||||
|
|
@ -78,10 +105,13 @@
|
||||||
- [ ] Conventions are unambiguous (agents can't interpret differently)
|
- [ ] Conventions are unambiguous (agents can't interpret differently)
|
||||||
- [ ] Patterns cover all technologies in the stack
|
- [ ] Patterns cover all technologies in the stack
|
||||||
- [ ] No gaps where agents would have to guess
|
- [ ] 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
|
- [ ] Database choice compatible with ORM choice
|
||||||
- [ ] Frontend framework compatible with deployment target
|
- [ ] Frontend framework compatible with deployment target
|
||||||
|
|
@ -89,31 +119,65 @@
|
||||||
- [ ] All API patterns consistent (not mixing REST and GraphQL for same data)
|
- [ ] All API patterns consistent (not mixing REST and GraphQL for same data)
|
||||||
- [ ] Starter template compatible with additional choices
|
- [ ] Starter template compatible with additional choices
|
||||||
|
|
||||||
### Pattern Consistency
|
### Integration Compatibility
|
||||||
|
|
||||||
- [ ] Single source of truth for each data type
|
- [ ] Third-party services compatible with chosen stack
|
||||||
- [ ] Consistent error handling approach across components
|
- [ ] Real-time solutions (if any) work with deployment target
|
||||||
- [ ] Uniform authentication/authorization pattern
|
- [ ] File storage solution integrates with framework
|
||||||
- [ ] Implementation patterns don't conflict with each other
|
- [ ] 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
|
- [ ] No ambiguous decisions that agents could interpret differently
|
||||||
- [ ] Clear boundaries between components/modules
|
- [ ] Clear boundaries between components/modules
|
||||||
- [ ] Explicit file organization patterns
|
- [ ] Explicit file organization patterns
|
||||||
- [ ] Defined patterns for common operations (CRUD, auth checks, etc.)
|
- [ ] Defined patterns for common operations (CRUD, auth checks, etc.)
|
||||||
- [ ] Novel patterns have clear implementation guidance
|
- [ ] 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
|
- [ ] Chosen stack has good documentation and community support
|
||||||
- [ ] Development environment can be set up with specified versions
|
- [ ] Development environment can be set up with specified versions
|
||||||
|
|
@ -121,118 +185,21 @@
|
||||||
- [ ] Deployment target supports all chosen technologies
|
- [ ] Deployment target supports all chosen technologies
|
||||||
- [ ] Starter template (if used) is stable and well-maintained
|
- [ ] 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
|
- [ ] Data model supports expected growth
|
||||||
- [ ] Caching strategy defined if performance is critical
|
- [ ] Caching strategy defined if performance is critical
|
||||||
- [ ] Background job processing defined if async work needed
|
- [ ] Background job processing defined if async work needed
|
||||||
- [ ] Novel patterns scalable for production use
|
- [ ] Novel patterns scalable for production use
|
||||||
|
|
||||||
## Completeness by Section
|
---
|
||||||
|
|
||||||
### Executive Summary
|
## 10. Common Issues to Check
|
||||||
|
|
||||||
- [ ] 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
|
|
||||||
|
|
||||||
### Beginner Protection
|
### Beginner Protection
|
||||||
|
|
||||||
- [ ] Not overengineered for the actual requirements
|
- [ ] Not overengineered for actual requirements
|
||||||
- [ ] Standard patterns used where possible (starter templates leveraged)
|
- [ ] Standard patterns used where possible (starter templates leveraged)
|
||||||
- [ ] Complex technologies justified by specific needs
|
- [ ] Complex technologies justified by specific needs
|
||||||
- [ ] Maintenance complexity appropriate for team size
|
- [ ] Maintenance complexity appropriate for team size
|
||||||
|
|
@ -245,17 +212,33 @@
|
||||||
- [ ] Future migration paths not blocked
|
- [ ] Future migration paths not blocked
|
||||||
- [ ] Novel patterns follow architectural principles
|
- [ ] Novel patterns follow architectural principles
|
||||||
|
|
||||||
### Document Usability
|
---
|
||||||
|
|
||||||
- [ ] Can be consumed by AI agents without human interpretation
|
## Validation Summary
|
||||||
- [ ] 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
|
|
||||||
|
|
||||||
## Version Verification
|
### Document Quality Score
|
||||||
|
|
||||||
- [ ] All versions verified to be current (not relying on potentially outdated catalogs)
|
- Architecture Completeness: [Complete / Mostly Complete / Partial / Incomplete]
|
||||||
- [ ] WebSearch used to verify versions during workflow execution
|
- Version Specificity: [All Verified / Most Verified / Some Missing / Many Missing]
|
||||||
- [ ] No hardcoded versions from knowledge bases trusted without verification
|
- Pattern Clarity: [Crystal Clear / Clear / Somewhat Ambiguous / Ambiguous]
|
||||||
- [ ] Starter template version checked for latest
|
- 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._
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,8 @@
|
||||||
# Decision Catalog - Knowledge base for architectural decisions
|
# Decision Catalog - Composability knowledge for architectural decisions
|
||||||
# This replaces rigid project-type templates with intelligent, composable decisions
|
# This provides RELATIONSHIPS and WORKFLOW LOGIC, not generic tech knowledge
|
||||||
|
|
||||||
# ⚠️ 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.
|
|
||||||
#
|
#
|
||||||
# During facilitation, the AI should:
|
# ⚠️ CRITICAL: All version/feature info MUST be verified via WebSearch during workflow
|
||||||
# 1. Use this file for patterns and relationships
|
# This file only provides: triggers, relationships (pairs_with), and opinionated stacks
|
||||||
# 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!
|
|
||||||
|
|
||||||
decision_categories:
|
decision_categories:
|
||||||
data_persistence:
|
data_persistence:
|
||||||
|
|
@ -22,57 +11,15 @@ decision_categories:
|
||||||
affects: "most epics"
|
affects: "most epics"
|
||||||
options:
|
options:
|
||||||
postgresql:
|
postgresql:
|
||||||
name: "PostgreSQL"
|
pairs_with: ["Prisma ORM", "TypeORM", "Drizzle", "node-postgres"]
|
||||||
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
|
|
||||||
|
|
||||||
mongodb:
|
mongodb:
|
||||||
name: "MongoDB"
|
pairs_with: ["Mongoose", "Prisma", "MongoDB driver"]
|
||||||
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
|
|
||||||
|
|
||||||
redis:
|
redis:
|
||||||
name: "Redis"
|
pairs_with: ["ioredis", "node-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
|
|
||||||
|
|
||||||
supabase:
|
supabase:
|
||||||
name: "Supabase"
|
pairs_with: ["@supabase/supabase-js"]
|
||||||
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
|
|
||||||
|
|
||||||
firebase:
|
firebase:
|
||||||
name: "Firebase Firestore"
|
pairs_with: ["firebase-admin"]
|
||||||
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
|
|
||||||
|
|
||||||
api_pattern:
|
api_pattern:
|
||||||
triggers: ["API", "client communication", "frontend backend", "service communication"]
|
triggers: ["API", "client communication", "frontend backend", "service communication"]
|
||||||
|
|
@ -80,48 +27,13 @@ decision_categories:
|
||||||
affects: "all client-facing epics"
|
affects: "all client-facing epics"
|
||||||
options:
|
options:
|
||||||
rest:
|
rest:
|
||||||
name: "REST API"
|
pairs_with: ["Express", "Fastify", "NestJS", "Hono"]
|
||||||
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
|
|
||||||
|
|
||||||
graphql:
|
graphql:
|
||||||
name: "GraphQL"
|
pairs_with: ["Apollo Server", "GraphQL Yoga", "Mercurius"]
|
||||||
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
|
|
||||||
|
|
||||||
trpc:
|
trpc:
|
||||||
name: "tRPC"
|
pairs_with: ["Next.js", "React Query"]
|
||||||
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
|
|
||||||
|
|
||||||
grpc:
|
grpc:
|
||||||
name: "gRPC"
|
pairs_with: ["@grpc/grpc-js", "protobufjs"]
|
||||||
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
|
|
||||||
|
|
||||||
authentication:
|
authentication:
|
||||||
triggers: ["auth", "login", "user management", "security", "identity"]
|
triggers: ["auth", "login", "user management", "security", "identity"]
|
||||||
|
|
@ -129,200 +41,59 @@ decision_categories:
|
||||||
affects: "security and user epics"
|
affects: "security and user epics"
|
||||||
options:
|
options:
|
||||||
nextauth:
|
nextauth:
|
||||||
name: "NextAuth.js"
|
pairs_with: ["Next.js", "Prisma"]
|
||||||
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
|
|
||||||
|
|
||||||
auth0:
|
auth0:
|
||||||
name: "Auth0"
|
pairs_with: ["@auth0/nextjs-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
|
|
||||||
|
|
||||||
clerk:
|
clerk:
|
||||||
name: "Clerk"
|
pairs_with: ["@clerk/nextjs"]
|
||||||
current_version: "4.29"
|
supabase_auth:
|
||||||
good_for: ["modern stack", "user management UI", "React/Next.js"]
|
pairs_with: ["@supabase/supabase-js"]
|
||||||
not_ideal_for: ["custom UI requirements", "legacy systems"]
|
firebase_auth:
|
||||||
pairs_with:
|
pairs_with: ["firebase-admin"]
|
||||||
- "@clerk/nextjs 4.29"
|
|
||||||
beginner_friendly: true
|
|
||||||
|
|
||||||
supertokens:
|
real_time:
|
||||||
name: "SuperTokens"
|
triggers: ["real-time", "websocket", "live updates", "chat", "collaboration"]
|
||||||
current_version: "16.6"
|
importance: "medium"
|
||||||
good_for: ["open source", "self-hosted", "customizable"]
|
affects: "real-time features"
|
||||||
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"
|
|
||||||
options:
|
options:
|
||||||
nextjs:
|
socket_io:
|
||||||
name: "Next.js"
|
pairs_with: ["Express", "socket.io-client"]
|
||||||
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
|
|
||||||
|
|
||||||
pusher:
|
pusher:
|
||||||
name: "Pusher"
|
pairs_with: ["pusher-js"]
|
||||||
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
|
|
||||||
|
|
||||||
ably:
|
ably:
|
||||||
name: "Ably"
|
pairs_with: ["ably"]
|
||||||
current_version: "1.2"
|
supabase_realtime:
|
||||||
good_for: ["guaranteed delivery", "presence", "history", "managed"]
|
pairs_with: ["@supabase/supabase-js"]
|
||||||
not_ideal_for: ["cost sensitive", "simple needs"]
|
firebase_realtime:
|
||||||
pairs_with:
|
pairs_with: ["firebase"]
|
||||||
- "ably 1.2"
|
|
||||||
beginner_friendly: true
|
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:
|
file_storage:
|
||||||
triggers: ["file upload", "images", "documents", "media", "blob storage", "assets"]
|
triggers: ["upload", "file storage", "images", "media", "CDN"]
|
||||||
importance: "medium"
|
importance: "medium"
|
||||||
affects: "content epics"
|
affects: "media handling epics"
|
||||||
options:
|
options:
|
||||||
s3:
|
s3:
|
||||||
name: "AWS S3"
|
pairs_with: ["@aws-sdk/client-s3", "multer"]
|
||||||
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
|
|
||||||
|
|
||||||
cloudinary:
|
cloudinary:
|
||||||
name: "Cloudinary"
|
pairs_with: ["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
|
|
||||||
|
|
||||||
uploadthing:
|
uploadthing:
|
||||||
name: "UploadThing"
|
pairs_with: ["uploadthing"]
|
||||||
current_version: "6.0"
|
supabase_storage:
|
||||||
good_for: ["Next.js", "type safety", "simple setup"]
|
pairs_with: ["@supabase/supabase-js"]
|
||||||
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
|
|
||||||
|
|
||||||
search:
|
search:
|
||||||
triggers: ["search", "full text", "elasticsearch", "algolia", "fuzzy"]
|
triggers: ["search", "full text", "elasticsearch", "algolia", "fuzzy"]
|
||||||
|
|
@ -330,36 +101,13 @@ decision_categories:
|
||||||
affects: "search and discovery epics"
|
affects: "search and discovery epics"
|
||||||
options:
|
options:
|
||||||
postgres_fts:
|
postgres_fts:
|
||||||
name: "PostgreSQL Full Text Search"
|
pairs_with: ["PostgreSQL"]
|
||||||
good_for: ["simple search", "no extra infrastructure", "cost effective"]
|
|
||||||
not_ideal_for: ["complex relevance", "fuzzy matching", "facets"]
|
|
||||||
beginner_friendly: true
|
|
||||||
|
|
||||||
elasticsearch:
|
elasticsearch:
|
||||||
name: "Elasticsearch"
|
pairs_with: ["@elastic/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
|
|
||||||
|
|
||||||
algolia:
|
algolia:
|
||||||
name: "Algolia"
|
pairs_with: ["algoliasearch"]
|
||||||
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
|
|
||||||
|
|
||||||
typesense:
|
typesense:
|
||||||
name: "Typesense"
|
pairs_with: ["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
|
|
||||||
|
|
||||||
background_jobs:
|
background_jobs:
|
||||||
triggers: ["queue", "jobs", "workers", "async", "background processing", "scheduled"]
|
triggers: ["queue", "jobs", "workers", "async", "background processing", "scheduled"]
|
||||||
|
|
@ -367,39 +115,13 @@ decision_categories:
|
||||||
affects: "async processing epics"
|
affects: "async processing epics"
|
||||||
options:
|
options:
|
||||||
bullmq:
|
bullmq:
|
||||||
name: "BullMQ"
|
pairs_with: ["Redis"]
|
||||||
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
|
|
||||||
|
|
||||||
sqs:
|
sqs:
|
||||||
name: "AWS SQS"
|
pairs_with: ["@aws-sdk/client-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
|
|
||||||
|
|
||||||
temporal:
|
temporal:
|
||||||
name: "Temporal"
|
pairs_with: ["@temporalio/client"]
|
||||||
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
|
|
||||||
|
|
||||||
inngest:
|
inngest:
|
||||||
name: "Inngest"
|
pairs_with: ["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
|
|
||||||
|
|
||||||
deployment_target:
|
deployment_target:
|
||||||
triggers: ["deployment", "hosting", "infrastructure", "cloud", "server"]
|
triggers: ["deployment", "hosting", "infrastructure", "cloud", "server"]
|
||||||
|
|
@ -407,277 +129,80 @@ decision_categories:
|
||||||
affects: "all epics"
|
affects: "all epics"
|
||||||
options:
|
options:
|
||||||
vercel:
|
vercel:
|
||||||
name: "Vercel"
|
pairs_with: ["Next.js", "serverless functions"]
|
||||||
good_for: ["Next.js", "edge functions", "preview deployments", "simplicity"]
|
|
||||||
not_ideal_for: ["complex backends", "cost at scale", "non-JS"]
|
|
||||||
beginner_friendly: true
|
|
||||||
|
|
||||||
aws:
|
aws:
|
||||||
name: "AWS"
|
pairs_with: ["any stack"]
|
||||||
good_for: ["everything", "scale", "compliance", "flexibility"]
|
|
||||||
not_ideal_for: ["simplicity", "predictable costs", "small projects"]
|
|
||||||
beginner_friendly: false
|
|
||||||
|
|
||||||
railway:
|
railway:
|
||||||
name: "Railway"
|
pairs_with: ["any stack", "managed databases"]
|
||||||
good_for: ["simplicity", "databases included", "quick setup"]
|
|
||||||
not_ideal_for: ["enterprise needs", "complex requirements"]
|
|
||||||
beginner_friendly: true
|
|
||||||
|
|
||||||
fly_io:
|
fly_io:
|
||||||
name: "Fly.io"
|
pairs_with: ["Docker containers"]
|
||||||
good_for: ["edge deployment", "global distribution", "containers"]
|
|
||||||
not_ideal_for: ["managed databases", "enterprise support"]
|
|
||||||
beginner_friendly: false
|
|
||||||
|
|
||||||
# Pattern combinations that work well together
|
# Opinionated stack combinations (BMM methodology)
|
||||||
common_stacks:
|
common_stacks:
|
||||||
modern_fullstack:
|
modern_fullstack:
|
||||||
name: "Modern Full-Stack"
|
name: "Modern Full-Stack"
|
||||||
components:
|
components: ["Next.js", "PostgreSQL or Supabase", "Prisma ORM", "NextAuth.js", "Tailwind CSS", "TypeScript", "Vercel"]
|
||||||
- "Next.js 14"
|
|
||||||
- "PostgreSQL 15 or Supabase"
|
|
||||||
- "Prisma ORM 5.6"
|
|
||||||
- "NextAuth.js 4.24"
|
|
||||||
- "Tailwind CSS 3.4"
|
|
||||||
- "TypeScript 5.3"
|
|
||||||
- "Vercel deployment"
|
|
||||||
good_for: "Most web applications"
|
good_for: "Most web applications"
|
||||||
|
|
||||||
enterprise_stack:
|
enterprise_stack:
|
||||||
name: "Enterprise Stack"
|
name: "Enterprise Stack"
|
||||||
components:
|
components: ["NestJS", "PostgreSQL", "TypeORM", "Auth0", "Redis", "Docker", "AWS"]
|
||||||
- "NestJS 10.3"
|
good_for: "Large-scale enterprise applications"
|
||||||
- "PostgreSQL 15"
|
|
||||||
- "TypeORM 0.3"
|
|
||||||
- "Auth0"
|
|
||||||
- "React 18.2 + TypeScript"
|
|
||||||
- "AWS deployment"
|
|
||||||
good_for: "Large scale, compliance needs"
|
|
||||||
|
|
||||||
startup_stack:
|
rapid_prototype:
|
||||||
name: "Rapid Development Stack"
|
name: "Rapid Prototype"
|
||||||
components:
|
components: ["Next.js", "Supabase", "shadcn/ui", "Vercel"]
|
||||||
- "Next.js 14"
|
good_for: "MVP and rapid development"
|
||||||
- "Supabase"
|
|
||||||
- "Clerk Auth"
|
|
||||||
- "Tailwind CSS 3.4"
|
|
||||||
- "Vercel deployment"
|
|
||||||
good_for: "MVPs and rapid prototyping"
|
|
||||||
|
|
||||||
realtime_stack:
|
real_time_app:
|
||||||
name: "Real-time Collaboration"
|
name: "Real-Time Application"
|
||||||
components:
|
components: ["Next.js", "Supabase Realtime", "PostgreSQL", "Prisma", "Socket.io fallback"]
|
||||||
- "Next.js 14"
|
good_for: "Chat, collaboration, live updates"
|
||||||
- "Socket.io 4.6"
|
|
||||||
- "Redis 7.2"
|
|
||||||
- "PostgreSQL 15"
|
|
||||||
- "Railway deployment"
|
|
||||||
good_for: "Collaborative applications"
|
|
||||||
|
|
||||||
# WARNING: Version numbers are illustrative - actual versions should be verified
|
mobile_app:
|
||||||
# during workflow execution via web search for current stable versions
|
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:
|
starter_templates:
|
||||||
create_next_app:
|
create_next_app:
|
||||||
name: "Create Next App"
|
name: "Create Next App"
|
||||||
command_search: "npx create-next-app@latest options"
|
command_search: "npx create-next-app@latest"
|
||||||
base_command: "npx create-next-app@latest"
|
decisions_provided: ["Next.js framework", "TypeScript option", "App Router vs Pages", "Tailwind CSS option", "ESLint"]
|
||||||
interactive: true
|
good_for: ["React web applications", "Full-stack apps", "SSR/SSG"]
|
||||||
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"]
|
|
||||||
|
|
||||||
create_t3_app:
|
create_t3_app:
|
||||||
name: "Create T3 App"
|
name: "Create T3 App"
|
||||||
command_search: "create t3 app latest CLI options"
|
command_search: "npm create t3-app@latest"
|
||||||
base_command: "npm create t3-app@latest"
|
decisions_provided: ["Next.js", "TypeScript", "tRPC", "Prisma", "NextAuth", "Tailwind CSS"]
|
||||||
interactive: true
|
good_for: ["Type-safe full-stack apps"]
|
||||||
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"]
|
|
||||||
|
|
||||||
create_vite:
|
create_vite:
|
||||||
name: "Create Vite"
|
name: "Create Vite"
|
||||||
command_search: "npm create vite templates options"
|
command_search: "npm create vite@latest"
|
||||||
base_command: "npm create vite@latest"
|
decisions_provided: ["Framework choice (React/Vue/Svelte)", "TypeScript option", "Vite bundler"]
|
||||||
interactive: true
|
good_for: ["Fast dev SPAs", "Library development"]
|
||||||
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"
|
|
||||||
|
|
||||||
create_remix:
|
create_remix:
|
||||||
name: "Create Remix"
|
name: "Create Remix"
|
||||||
command_search: "npx create-remix latest options"
|
command_search: "npx create-remix@latest"
|
||||||
base_command: "npx create-remix@latest"
|
decisions_provided: ["Remix framework", "TypeScript option", "Deployment target", "CSS solution"]
|
||||||
decisions_provided:
|
|
||||||
- "Remix framework"
|
|
||||||
- "TypeScript option"
|
|
||||||
- "Deployment target"
|
|
||||||
- "CSS solution"
|
|
||||||
good_for: ["Web standards", "Nested routing", "Progressive enhancement"]
|
good_for: ["Web standards", "Nested routing", "Progressive enhancement"]
|
||||||
|
|
||||||
nest_new:
|
nest_new:
|
||||||
name: "NestJS CLI"
|
name: "NestJS CLI"
|
||||||
command_search: "nest new project options"
|
command_search: "nest new project"
|
||||||
base_command: "nest new"
|
decisions_provided: ["TypeScript (always)", "Package manager", "Testing framework (Jest)", "Project structure"]
|
||||||
decisions_provided:
|
|
||||||
- "TypeScript (always)"
|
|
||||||
- "Package manager"
|
|
||||||
- "Testing framework (Jest)"
|
|
||||||
- "Linting (ESLint)"
|
|
||||||
- "Project structure (modules/controllers/services)"
|
|
||||||
project_structure: "Enterprise Angular-style backend"
|
|
||||||
good_for: ["Enterprise APIs", "Microservices", "GraphQL APIs"]
|
good_for: ["Enterprise APIs", "Microservices", "GraphQL APIs"]
|
||||||
|
|
||||||
create_expo_app:
|
create_expo_app:
|
||||||
name: "Create Expo App"
|
name: "Create Expo App"
|
||||||
command_search: "create-expo-app templates latest"
|
command_search: "npx create-expo-app"
|
||||||
base_command: "npx create-expo-app"
|
decisions_provided: ["React Native", "Expo SDK", "TypeScript option", "Navigation option"]
|
||||||
decisions_provided:
|
|
||||||
- "React Native setup"
|
|
||||||
- "TypeScript option"
|
|
||||||
- "Navigation library option"
|
|
||||||
- "Expo SDK version"
|
|
||||||
good_for: ["Cross-platform mobile", "React Native apps"]
|
good_for: ["Cross-platform mobile", "React Native apps"]
|
||||||
|
|
||||||
create_vue:
|
# Starter selection heuristics (workflow logic)
|
||||||
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_rules:
|
starter_selection_rules:
|
||||||
by_project_type:
|
by_project_type:
|
||||||
web_application:
|
web_application:
|
||||||
|
|
@ -685,17 +210,13 @@ starter_selection_rules:
|
||||||
considerations: "SSR needs? → Next.js. Type safety critical? → T3. SPA only? → Vite"
|
considerations: "SSR needs? → Next.js. Type safety critical? → T3. SPA only? → Vite"
|
||||||
|
|
||||||
mobile_app:
|
mobile_app:
|
||||||
recommended: ["create_expo_app", "react_native_cli"]
|
recommended: ["create_expo_app"]
|
||||||
considerations: "Need native modules? → React Native CLI. Simpler setup? → Expo"
|
considerations: "Cross-platform → Expo. Native-heavy → React Native CLI"
|
||||||
|
|
||||||
api_backend:
|
api_backend:
|
||||||
recommended: ["nest_new", "express_generator", "fastify_cli"]
|
recommended: ["nest_new"]
|
||||||
considerations: "Enterprise? → NestJS. Simple? → Express. Performance? → Fastify"
|
considerations: "Enterprise → NestJS. Simple → Express starter. Performance → Fastify"
|
||||||
|
|
||||||
cli_tool:
|
|
||||||
recommended: ["cargo_new", "go_mod_init", "npm_init"]
|
|
||||||
considerations: "Performance critical? → Rust/Go. Quick script? → Node.js/Python"
|
|
||||||
|
|
||||||
full_stack:
|
full_stack:
|
||||||
recommended: ["create_t3_app", "create_redwood_app", "rails_new"]
|
recommended: ["create_t3_app", "create_remix"]
|
||||||
considerations: "Type safety? → T3. JAMstack? → Redwood. Ruby? → Rails"
|
considerations: "Type safety → T3. Web standards → Remix. Monolith → RedwoodJS"
|
||||||
|
|
|
||||||
|
|
@ -50,10 +50,10 @@ phases:
|
||||||
command: "tech-spec"
|
command: "tech-spec"
|
||||||
output: "Creates spec with multiple story files"
|
output: "Creates spec with multiple story files"
|
||||||
note: "Integrate with existing patterns"
|
note: "Integrate with existing patterns"
|
||||||
- id: "ux-spec"
|
- id: "create-design"
|
||||||
conditional: "if_has_ui"
|
conditional: "if_has_ui"
|
||||||
agent: "ux-designer"
|
agent: "ux-designer"
|
||||||
command: "ux-spec"
|
command: "create-design"
|
||||||
|
|
||||||
- phase: 3
|
- phase: 3
|
||||||
name: "Solutioning"
|
name: "Solutioning"
|
||||||
|
|
|
||||||
|
|
@ -44,10 +44,10 @@ phases:
|
||||||
agent: "pm"
|
agent: "pm"
|
||||||
command: "prd"
|
command: "prd"
|
||||||
output: "Requirements with integration points"
|
output: "Requirements with integration points"
|
||||||
- id: "ux-spec"
|
- id: "create-design"
|
||||||
conditional: "if_has_ui"
|
conditional: "if_has_ui"
|
||||||
agent: "pm"
|
agent: "ux-designer"
|
||||||
command: "ux-spec"
|
command: "create-design"
|
||||||
note: "Must align with existing UI patterns"
|
note: "Must align with existing UI patterns"
|
||||||
|
|
||||||
- phase: 3
|
- phase: 3
|
||||||
|
|
|
||||||
|
|
@ -46,10 +46,10 @@ phases:
|
||||||
agent: "pm"
|
agent: "pm"
|
||||||
command: "prd"
|
command: "prd"
|
||||||
output: "Comprehensive PRD considering existing system"
|
output: "Comprehensive PRD considering existing system"
|
||||||
- id: "ux-spec"
|
- id: "create-design"
|
||||||
required: true
|
required: true
|
||||||
agent: "pm"
|
agent: "ux-designer"
|
||||||
command: "ux-spec"
|
command: "create-design"
|
||||||
note: "Multiple UI/UX specifications"
|
note: "Multiple UI/UX specifications"
|
||||||
|
|
||||||
- phase: 3
|
- phase: 3
|
||||||
|
|
|
||||||
|
|
@ -34,10 +34,10 @@ phases:
|
||||||
agent: "pm"
|
agent: "pm"
|
||||||
command: "prd"
|
command: "prd"
|
||||||
output: "Creates PRD with epics.md and story list"
|
output: "Creates PRD with epics.md and story list"
|
||||||
- id: "ux-spec"
|
- id: "create-design"
|
||||||
conditional: "if_has_ui"
|
conditional: "if_has_ui"
|
||||||
agent: "ux-designer"
|
agent: "ux-designer"
|
||||||
command: "ux-spec"
|
command: "create-design"
|
||||||
- id: "tech-spec"
|
- id: "tech-spec"
|
||||||
optional: true
|
optional: true
|
||||||
agent: "pm"
|
agent: "pm"
|
||||||
|
|
|
||||||
|
|
@ -34,10 +34,10 @@ phases:
|
||||||
agent: "pm"
|
agent: "pm"
|
||||||
command: "prd"
|
command: "prd"
|
||||||
output: "High-level requirements and epic definitions"
|
output: "High-level requirements and epic definitions"
|
||||||
- id: "ux-spec"
|
- id: "create-design"
|
||||||
conditional: "if_has_ui"
|
conditional: "if_has_ui"
|
||||||
agent: "ux-designer"
|
agent: "ux-designer"
|
||||||
command: "ux-spec"
|
command: "create-design"
|
||||||
|
|
||||||
- phase: 3
|
- phase: 3
|
||||||
name: "Solutioning"
|
name: "Solutioning"
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ phases:
|
||||||
agent: "analyst"
|
agent: "analyst"
|
||||||
command: "brainstorm-project"
|
command: "brainstorm-project"
|
||||||
- id: "research"
|
- id: "research"
|
||||||
required: true
|
required: false
|
||||||
agent: "analyst"
|
agent: "analyst"
|
||||||
command: "research"
|
command: "research"
|
||||||
note: "Extensive research across multiple domains"
|
note: "Extensive research across multiple domains"
|
||||||
|
|
@ -35,10 +35,10 @@ phases:
|
||||||
agent: "pm"
|
agent: "pm"
|
||||||
command: "prd"
|
command: "prd"
|
||||||
output: "Comprehensive product requirements document"
|
output: "Comprehensive product requirements document"
|
||||||
- id: "ux-spec"
|
- id: "create-design"
|
||||||
required: true
|
required: true
|
||||||
agent: "ux-designer"
|
agent: "ux-designer"
|
||||||
command: "ux-spec"
|
command: "create-design"
|
||||||
note: "Multiple UI/UX specifications needed"
|
note: "Multiple UI/UX specifications needed"
|
||||||
|
|
||||||
- phase: 3
|
- phase: 3
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ levels:
|
||||||
title: "Enterprise Scale"
|
title: "Enterprise Scale"
|
||||||
stories: "40+ stories"
|
stories: "40+ stories"
|
||||||
description: "Multiple products, enterprise architecture"
|
description: "Multiple products, enterprise architecture"
|
||||||
documentation: "Full suite - PRD, architecture, product specs"
|
documentation: "PRD + architecture + JIT tech specs"
|
||||||
architecture: true
|
architecture: true
|
||||||
|
|
||||||
# Quick detection hints for workflow-init
|
# Quick detection hints for workflow-init
|
||||||
|
|
|
||||||
|
|
@ -25,21 +25,6 @@ NEXT_ACTION: {{next_action}}
|
||||||
NEXT_COMMAND: {{next_command}}
|
NEXT_COMMAND: {{next_command}}
|
||||||
NEXT_AGENT: {{next_agent}}
|
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}}_
|
_Last Updated: {{last_updated}}_
|
||||||
_Status Version: 2.0_
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue