# 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