230 lines
8.7 KiB
YAML
230 lines
8.7 KiB
YAML
# Brownfield UI Workflow - Claude Native Format
|
|
workflow:
|
|
name: brownfield-ui
|
|
description: "Enhance existing frontend application with new features or improvements"
|
|
type: brownfield
|
|
category: frontend
|
|
|
|
metadata:
|
|
version: "1.0.0"
|
|
author: "BMAD System"
|
|
last_updated: "2024-01-01"
|
|
|
|
requirements:
|
|
- Existing UI application codebase
|
|
- Enhancement specification document
|
|
- User feedback or analytics data (optional)
|
|
|
|
sequence:
|
|
- step: 1
|
|
name: "Existing UI Analysis"
|
|
agent: architect
|
|
task: analyze_existing_system
|
|
template: project_documentation
|
|
inputs:
|
|
- "enhancement_spec.md"
|
|
creates: ".claude/context/artifacts/ui-analysis.md"
|
|
description: "Analyze existing frontend application and identify improvement areas"
|
|
instructions: |
|
|
Load the Architect agent prompt from .claude/agents/architect/prompt.md
|
|
Examine the existing frontend codebase, structure, and technologies
|
|
Analyze current UI patterns, components, and design system
|
|
Review user feedback, analytics data, and performance metrics if available
|
|
Identify technical debt, outdated patterns, and enhancement opportunities
|
|
Document current state, constraints, and improvement recommendations
|
|
Save output to .claude/context/artifacts/ui-analysis.md
|
|
|
|
- step: 2
|
|
name: "Enhancement Requirements"
|
|
agent: pm
|
|
task: create_brownfield_prd
|
|
template: brownfield_prd
|
|
inputs:
|
|
- ".claude/context/artifacts/ui-analysis.md"
|
|
creates: ".claude/context/artifacts/prd.json"
|
|
validators:
|
|
- schema: ".claude/schemas/product_requirements.schema.json"
|
|
on_fail:
|
|
retry: 1
|
|
escalate_to: "analyst"
|
|
render:
|
|
renderer: "prd"
|
|
from: ".claude/context/artifacts/prd.json"
|
|
to: ".claude/context/artifacts/prd.md"
|
|
depends_on: [1]
|
|
description: "Create enhancement-focused Product Requirements Document"
|
|
instructions: |
|
|
Load the PM agent prompt from .claude/agents/pm/prompt.md
|
|
Reference the UI analysis from step 1 and user enhancement specification
|
|
Apply the brownfield PRD template from .claude/templates/brownfield-prd.md
|
|
Generate requirements focused on UI enhancements with existing system integration
|
|
Include migration strategies, backward compatibility, and rollout plans
|
|
Define user stories that account for existing user behavior and patterns
|
|
Save output to .claude/context/artifacts/prd.md
|
|
|
|
- step: 3
|
|
name: "UI/UX Enhancement Design"
|
|
agent: ux-expert
|
|
task: design_ui_enhancements
|
|
template: ui_spec
|
|
inputs:
|
|
- ".claude/context/artifacts/prd.json"
|
|
creates: ".claude/context/artifacts/ux-spec.json"
|
|
validators:
|
|
- schema: ".claude/schemas/ux_spec.schema.json"
|
|
on_fail:
|
|
retry: 1
|
|
escalate_to: "architect"
|
|
render:
|
|
renderer: "ux-spec"
|
|
from: ".claude/context/artifacts/ux-spec.json"
|
|
to: ".claude/context/artifacts/ui-spec.md"
|
|
depends_on: [1, 2]
|
|
description: "Design UI enhancements that integrate with existing system"
|
|
instructions: |
|
|
Load the UX Expert agent prompt from .claude/agents/ux-expert/prompt.md
|
|
Reference UI analysis and enhancement PRD from previous steps
|
|
Apply the UI spec template from .claude/templates/ui-spec.md
|
|
Design enhancements that respect existing design patterns and user expectations
|
|
Create transition strategies for design changes and new interaction patterns
|
|
Ensure consistency with existing components while introducing improvements
|
|
Save output to .claude/context/artifacts/ui-spec.md
|
|
|
|
- step: 4
|
|
name: "Integration Architecture"
|
|
agent: architect
|
|
task: design_integration_strategy
|
|
template: brownfield_architecture
|
|
inputs:
|
|
- ".claude/context/artifacts/ui-spec.md"
|
|
- ".claude/context/artifacts/prd.json"
|
|
creates: ".claude/context/artifacts/architecture.json"
|
|
validators:
|
|
- schema: ".claude/schemas/system_architecture.schema.json"
|
|
on_fail:
|
|
retry: 1
|
|
escalate_to: "pm"
|
|
render:
|
|
renderer: "architecture"
|
|
from: ".claude/context/artifacts/architecture.json"
|
|
to: ".claude/context/artifacts/architecture.md"
|
|
depends_on: [1, 2, 3]
|
|
description: "Design integration strategy for UI enhancements"
|
|
instructions: |
|
|
Load the Architect agent prompt from .claude/agents/architect/prompt.md
|
|
Reference UI analysis, PRD, and UI spec from previous steps
|
|
Apply the brownfield architecture template from .claude/templates/brownfield-architecture.md
|
|
Design safe integration strategy that minimizes risk to existing functionality
|
|
Plan component migration, state management updates, and build process changes
|
|
Include testing strategy for ensuring existing functionality remains intact
|
|
Create rollback plans and deployment strategies
|
|
Save output to .claude/context/artifacts/architecture.md
|
|
|
|
- step: 5
|
|
name: "Enhanced Components Implementation"
|
|
agent: developer
|
|
task: implement_ui_enhancements
|
|
creates: "src/components-enhanced/"
|
|
depends_on: [3, 4]
|
|
description: "Implement UI enhancements and new components"
|
|
instructions: |
|
|
Load the Developer agent prompt from .claude/agents/developer/prompt.md
|
|
Reference UI spec and architecture documents from previous steps
|
|
Implement new UI components that integrate with existing codebase
|
|
Enhance existing components while maintaining backward compatibility
|
|
Update styling, interactions, and responsive behavior as specified
|
|
Include proper TypeScript types and documentation
|
|
Save outputs to src/components-enhanced/, src/styles-enhanced/
|
|
|
|
- step: 6
|
|
name: "Integration Testing Strategy"
|
|
agent: qa
|
|
task: create_integration_test_plan
|
|
template: test_plan
|
|
inputs:
|
|
- ".claude/context/artifacts/architecture.md"
|
|
- "src/components-enhanced/"
|
|
creates: ".claude/context/artifacts/test-plan.json"
|
|
validators:
|
|
- schema: ".claude/schemas/test_plan.schema.json"
|
|
on_fail:
|
|
retry: 1
|
|
escalate_to: "architect"
|
|
render:
|
|
renderer: "test-plan"
|
|
from: ".claude/context/artifacts/test-plan.json"
|
|
to: ".claude/context/artifacts/test-plan.md"
|
|
depends_on: [4, 5]
|
|
description: "Create testing strategy for UI enhancements"
|
|
instructions: |
|
|
Load the QA agent prompt from .claude/agents/qa/prompt.md
|
|
Reference architecture and implementation from previous steps
|
|
Apply the test plan template from .claude/templates/test-plan.md
|
|
Generate testing strategy that ensures existing functionality remains intact
|
|
Include regression testing, component testing, and user acceptance testing
|
|
Create test scenarios for migration paths and rollback procedures
|
|
Plan visual regression testing and cross-browser compatibility testing
|
|
Save output to .claude/context/artifacts/test-plan.md
|
|
|
|
- step: 7
|
|
name: "Implementation Review"
|
|
agent: architect
|
|
task: review_ui_integration
|
|
creates: ".claude/context/artifacts/review-notes.json"
|
|
validators:
|
|
- schema: ".claude/schemas/review_notes.schema.json"
|
|
render:
|
|
renderer: "review-notes"
|
|
from: ".claude/context/artifacts/review-notes.json"
|
|
to: ".claude/context/artifacts/review-notes.md"
|
|
depends_on: [5, 6]
|
|
description: "Review UI enhancements and integration safety"
|
|
instructions: |
|
|
Load the Architect agent prompt again from .claude/agents/architect/prompt.md
|
|
Review all generated artifacts and UI enhancement implementation
|
|
Validate that enhancements integrate safely with existing system
|
|
Check for potential conflicts, performance impacts, and security considerations
|
|
Verify that rollback strategies are viable and migration paths are clear
|
|
Provide recommendations for deployment, monitoring, and user training
|
|
Save output to .claude/context/artifacts/review-notes.md
|
|
|
|
outputs:
|
|
documents:
|
|
- ui-analysis.md
|
|
- prd.json
|
|
- prd.md
|
|
- ux-spec.json
|
|
- ui-spec.md
|
|
- architecture.json
|
|
- architecture.md
|
|
- test-plan.json
|
|
- test-plan.md
|
|
- review-notes.md
|
|
code:
|
|
- src/components-enhanced/
|
|
- src/styles-enhanced/
|
|
- src/utils-enhanced/
|
|
- src/hooks-enhanced/
|
|
- migration-scripts/
|
|
configuration:
|
|
- package.json (updated)
|
|
- webpack.config.js (updated)
|
|
- .storybook/ (if applicable)
|
|
testing:
|
|
- tests/integration/
|
|
- tests/regression/
|
|
- tests/components-enhanced/
|
|
|
|
project_types:
|
|
- ui-modernization
|
|
- framework-migration
|
|
- design-refresh
|
|
- frontend-enhancement
|
|
|
|
when_to_use:
|
|
- UI enhancement requires coordinated stories
|
|
- Design system changes needed
|
|
- New component patterns required
|
|
- User research and testing needed
|
|
- Multiple team members will work on related changes
|