checklist standardization and improvement with llm eliciatation

This commit is contained in:
Brian Madison
2025-06-08 20:34:07 -05:00
parent 460c47f5c8
commit 8788c1d20f
24 changed files with 2419 additions and 884 deletions

View File

@@ -2,216 +2,126 @@ workflow:
id: brownfield-ui
name: Brownfield UI/Frontend Enhancement
description: >-
Workflow for modernizing, redesigning, or enhancing existing frontend applications.
Handles UI/UX improvements, framework migrations, and frontend refactoring.
Agent workflow for enhancing existing frontend applications with new features,
modernization, or design improvements. Handles existing UI analysis and safe integration.
type: brownfield
project_types:
- ui-modernization
- framework-migration
- design-refresh
- frontend-refactoring
- frontend-enhancement
stages:
- id: ui-analysis
name: Current UI Assessment
description: Analyze existing frontend and identify improvement areas
steps:
- agent: analyst
action: Frontend Assessment
description: >-
Analyze current frontend, user feedback, and performance issues
inputs:
- existing-frontend
- user-feedback
- analytics-data
outputs:
- frontend-assessment
- usability-issues
- performance-analysis
prompts:
- "Let's analyze the current frontend application"
- "What are users' main pain points with the current UI?"
- "Share analytics data or user feedback if available"
# For Complex UI Enhancements (Multiple Stories, Design Changes)
complex_enhancement_sequence:
- step: scope_assessment
agent: any
action: assess complexity
notes: "First, assess if this is a simple UI change (use simple_enhancement_sequence) or complex enhancement requiring full planning."
- agent: ux-expert
action: UX Audit
description: >-
Conduct comprehensive UX audit and competitive analysis
inputs:
- frontend-assessment
- user-feedback
outputs:
- ux-audit-report
- competitor-analysis
- accessibility-audit
prompts:
- "Let's audit the current user experience"
- "How do competitors handle similar flows?"
- step: ui_analysis
agent: analyst
action: analyze existing UI
notes: "Review existing frontend application, user feedback, analytics data, and identify improvement areas."
- id: enhancement-strategy
name: UI Enhancement Strategy
description: Define UI improvement strategy and goals
steps:
- agent: pm
action: UI Enhancement Planning
description: >-
Define enhancement goals, priorities, and success metrics
inputs:
- ux-audit-report
- usability-issues
outputs:
- ui-enhancement-strategy
- improvement-priorities
- success-metrics
prompts:
- "What are the priority UI improvements?"
- "Define success metrics for the redesign"
- agent: pm
creates: brownfield-prd.md
uses: brownfield-prd-tmpl
requires: existing_ui_analysis
notes: "Creates comprehensive brownfield PRD focused on UI enhancement with existing system analysis. SAVE OUTPUT: Copy final brownfield-prd.md to your project's docs/ folder."
- agent: ux-expert
action: Design Strategy
description: >-
Create design strategy and visual direction
inputs:
- ui-enhancement-strategy
- competitor-analysis
outputs:
- design-strategy
- visual-direction
- brand-evolution
prompts:
- "Define the new visual direction"
- "How should the brand evolve?"
- agent: ux-expert
creates: front-end-spec.md
uses: front-end-spec-tmpl
requires: brownfield-prd.md
notes: "Creates UI/UX specification for brownfield enhancement that integrates with existing design patterns. SAVE OUTPUT: Copy final front-end-spec.md to your project's docs/ folder."
- id: incremental-design
name: Incremental UI Design
description: Design improvements that can be rolled out incrementally
steps:
- agent: ux-expert
action: Progressive Design System
description: >-
Create new design system that can coexist with existing UI
inputs:
- design-strategy
- frontend-assessment
outputs:
- progressive-design-system
- component-migration-plan
- style-guide-evolution
prompts:
- "Design a system that can coexist with current UI"
- "Plan component-by-component migration"
- agent: ui-architect
creates: brownfield-architecture.md
uses: brownfield-architecture-tmpl
requires:
- brownfield-prd.md
- front-end-spec.md
notes: "Creates brownfield frontend architecture with component integration strategy and migration planning. SAVE OUTPUT: Copy final brownfield-architecture.md to your project's docs/ folder."
- agent: ui-architect
action: Frontend Migration Architecture
description: >-
Design technical approach for gradual frontend migration
inputs:
- progressive-design-system
- existing-frontend
outputs:
- migration-architecture
- component-strategy
- bundling-strategy
prompts:
- "Design incremental migration approach"
- "How to avoid breaking existing functionality?"
- agent: po
validates: all_artifacts
uses: brownfield-checklist
notes: "Validates all brownfield documents for UI integration safety and design consistency. May require updates to any document."
- id: user-validation
name: User Testing & Validation
description: Validate new designs with users
steps:
- agent: ux-expert
action: Prototype & Test
description: >-
Create prototypes and conduct user testing
inputs:
- progressive-design-system
- improvement-priorities
outputs:
- interactive-prototypes
- user-testing-results
- design-iterations
prompts:
- "Let's create testable prototypes"
- "Test with real users and iterate"
- agent: various
updates: any_flagged_documents
condition: po_checklist_issues
notes: "If PO finds issues, return to relevant agent to fix and re-export updated documents to docs/ folder."
- id: technical-planning
name: Implementation Planning
description: Plan technical implementation of UI changes
steps:
- agent: ui-architect
action: Technical Implementation Plan
description: >-
Create detailed technical plan for UI migration
inputs:
- migration-architecture
- design-iterations
outputs:
- implementation-roadmap
- risk-mitigation-plan
- rollback-strategy
prompts:
- "Create step-by-step implementation plan"
- "Plan for safe rollbacks if needed"
- workflow_end:
action: move_to_ide
notes: "All planning artifacts complete. Move to IDE environment to begin development. Explain to the user the IDE Development Workflow next steps: data#bmad-kb:IDE Development Workflow"
- agent: qa
action: UI Testing Strategy
description: >-
Plan testing approach for UI changes
inputs:
- implementation-roadmap
- user-testing-results
outputs:
- ui-test-strategy
- visual-regression-tests
- cross-browser-testing
- accessibility-testing
prompts:
- "Plan comprehensive UI testing"
- "Ensure no regressions in existing flows"
# For Simple UI Enhancements (1-3 Stories, Following Existing Design)
simple_enhancement_sequence:
- step: enhancement_type
action: choose approach
notes: "Choose between creating single story (simple component change) or epic (1-3 related UI changes)."
- id: deployment-strategy
name: Gradual Rollout Planning
description: Plan safe deployment of UI changes
steps:
- agent: ui-architect
action: Feature Flag Strategy
description: >-
Design feature flagging for gradual UI rollout
inputs:
- implementation-roadmap
- risk-mitigation-plan
outputs:
- feature-flag-design
- a-b-testing-plan
- monitoring-strategy
prompts:
- "Design A/B testing for new UI components"
- "Plan feature flags for safe rollout"
- agent: pm|po|sm
creates: brownfield_epic OR brownfield_story
uses: brownfield-create-epic OR brownfield-create-story
notes: "Create focused UI enhancement with existing design system integration. Choose agent based on team preference and context."
transitions:
- from: ui-analysis
to: enhancement-strategy
condition: assessment complete
- from: enhancement-strategy
to: incremental-design
condition: strategy defined
- from: incremental-design
to: user-validation
condition: designs ready
- from: user-validation
to: technical-planning
condition: designs validated
- from: technical-planning
to: deployment-strategy
condition: implementation planned
- workflow_end:
action: move_to_ide
notes: "UI enhancement defined. Move to IDE environment to begin development. Explain to the user the IDE Development Workflow next steps: data#bmad-kb:IDE Development Workflow"
special_considerations:
- name: User Adoption
description: Plan for user training and change management
- name: SEO Impact
description: Ensure URL structure and SEO aren't negatively affected
- name: Performance
description: Maintain or improve existing performance metrics
- name: Analytics
description: Preserve analytics tracking through UI changes
flow_diagram: |
```mermaid
graph TD
A[Start: UI Enhancement] --> B{Enhancement Complexity?}
B -->|Complex/Significant| C[analyst: analyze existing UI]
B -->|Simple| D{1 Story or 2-3 Stories?}
C --> E[pm: brownfield-prd.md]
E --> F[ux-expert: front-end-spec.md]
F --> G[ui-architect: brownfield-architecture.md]
G --> H[po: validate with brownfield-checklist]
H --> I{PO finds issues?}
I -->|Yes| J[Return to relevant agent for fixes]
I -->|No| K[Move to IDE Environment]
J --> H
D -->|1 Story| L[pm/po/sm: brownfield-create-story]
D -->|2-3 Stories| M[pm/po/sm: brownfield-create-epic]
L --> N[Move to IDE Environment]
M --> N
style K fill:#90EE90
style N fill:#90EE90
style E fill:#FFE4B5
style F fill:#FFE4B5
style G fill:#FFE4B5
style L fill:#FFB6C1
style M fill:#FFB6C1
```
decision_guidance:
use_complex_sequence_when:
- UI enhancement requires multiple coordinated stories (4+)
- Design system changes needed
- New component patterns required
- User research and testing needed
- Multiple team members will work on related changes
use_simple_sequence_when:
- Enhancement can be completed in 1-3 stories
- Follows existing design patterns exactly
- Component changes are isolated
- Risk to existing UI is low
- Change maintains current user experience
handoff_prompts:
analyst_to_pm: "UI analysis complete. Create comprehensive brownfield PRD with UI integration strategy."
pm_to_ux: "Brownfield PRD ready. Save it as docs/brownfield-prd.md, then create the UI/UX specification."
ux_to_architect: "UI/UX spec complete. Save it as docs/front-end-spec.md, then create the frontend architecture."
architect_to_po: "Architecture complete. Save it as docs/brownfield-architecture.md. Please validate all artifacts for UI integration safety."
po_issues: "PO found issues with [document]. Please return to [agent] to fix and re-save the updated document."
simple_to_ide: "UI enhancement defined with existing design integration. Move to IDE environment to begin development."
complex_complete: "All brownfield planning artifacts validated and saved in docs/ folder. Move to IDE environment to begin development."