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.
  type: brownfield
  project_types:
    - ui-modernization
    - framework-migration
    - design-refresh
    - frontend-refactoring

  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"

        - 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?"

    - 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: 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?"

    - 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
          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?"

    - 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"

    - 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"

        - 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"

    - 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"

  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

  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