workflow:
  id: frontend-only
  name: Frontend Application Development
  description: >-
    Workflow for building frontend applications that consume existing APIs.
    Perfect for SPAs, mobile apps, or micro-frontends.
  type: greenfield
  project_types:
    - spa
    - mobile-app
    - micro-frontend
    - static-site
  
  stages:
    - id: frontend-discovery
      name: Frontend Requirements
      description: Understand user needs and API constraints
      steps:
        - agent: analyst
          action: Frontend Analysis
          description: >-
            Analyze user needs, existing APIs, and frontend requirements
          inputs:
            - api-documentation
            - user-requirements
          outputs:
            - frontend-brief
            - api-integration-plan
          prompts:
            - "What APIs will the frontend consume?"
            - "What are the key user interactions?"
            
    - id: ux-design
      name: User Experience Design
      description: Design complete user experience
      steps:
        - agent: ux-expert
          action: Complete UX Process
          description: >-
            User research, personas, flows, wireframes, and prototypes
          inputs:
            - frontend-brief
          outputs:
            - user-research
            - personas
            - user-flows
            - wireframes
            - interactive-prototype
          prompts:
            - "Let's understand your users deeply"
            - "Design the complete user journey"
            
        - agent: ux-expert
          action: Visual Design
          description: >-
            Create visual designs and style guide
          inputs:
            - wireframes
            - brand-guidelines
          outputs:
            - visual-designs
            - style-guide
            - design-tokens
          prompts:
            - "Create the visual language"
            - "Define colors, typography, and spacing"
            
    - id: frontend-architecture
      name: Frontend Technical Design
      description: Design frontend architecture and components
      steps:
        - agent: ui-architect
          action: Frontend Architecture
          description: >-
            Design component architecture, state management, and routing
          inputs:
            - interactive-prototype
            - api-integration-plan
          outputs:
            - frontend-architecture
            - component-hierarchy
            - state-management-design
            - routing-design
          prompts:
            - "Design the frontend architecture"
            - "Choose framework and design patterns"
            
        - agent: ui-architect
          action: Component Design System
          description: >-
            Create detailed component specifications and AI generation prompts
          inputs:
            - visual-designs
            - design-tokens
          outputs:
            - component-library-spec
            - ai-generation-prompts
            - accessibility-guidelines
          prompts:
            - "Design reusable component system"
            - "Create prompts for AI UI generation"
            
    - id: api-integration
      name: API Integration Planning
      description: Plan API integration and data flow
      steps:
        - agent: fullstack-architect
          action: Integration Architecture
          description: >-
            Design API integration, data fetching, and caching strategies
          inputs:
            - api-documentation
            - frontend-architecture
          outputs:
            - integration-patterns
            - data-flow-design
            - error-handling-strategy
            - caching-strategy
          prompts:
            - "Design efficient API integration"
            - "Plan offline capabilities if needed"
            
    - id: performance-planning
      name: Performance & Optimization
      description: Plan for optimal performance
      steps:
        - agent: ui-architect
          action: Performance Strategy
          description: >-
            Design performance optimization and PWA features
          inputs:
            - frontend-architecture
          outputs:
            - performance-budget
            - optimization-strategy
            - pwa-features
          prompts:
            - "Set performance budgets"
            - "Plan lazy loading and code splitting"
            
    - id: validation
      name: Design Validation
      description: Validate all frontend designs
      steps:
        - agent: po
          action: Frontend Validation
          description: >-
            Validate UX, technical design, and accessibility
          inputs:
            - visual-designs
            - frontend-architecture
            - component-library-spec
          outputs:
            - design-approval
            - accessibility-review
          prompts:
            - "Review all designs for consistency"
            - "Validate accessibility compliance"
            
    - id: development-planning
      name: Frontend Development Planning
      description: Plan implementation sprints
      steps:
        - agent: sm
          action: Frontend Stories
          description: >-
            Create component and feature stories
          inputs:
            - component-library-spec
            - frontend-architecture
          outputs:
            - component-stories
            - feature-stories
            - sprint-plan
          prompts:
            - "Break down into component stories"
            - "Plan progressive enhancement"
            
        - agent: qa
          action: Frontend Testing Strategy
          description: >-
            Plan unit, integration, and E2E testing
          inputs:
            - component-stories
            - user-flows
          outputs:
            - test-strategy
            - e2e-test-scenarios
            - visual-regression-tests
          prompts:
            - "Design component testing approach"
            - "Plan E2E test scenarios"
            
  transitions:
    - from: frontend-discovery
      to: ux-design
      condition: requirements understood
    - from: ux-design
      to: frontend-architecture
      condition: designs completed
    - from: frontend-architecture
      to: api-integration
      condition: architecture defined
    - from: api-integration
      to: performance-planning
      condition: integration planned
    - from: performance-planning
      to: validation
      condition: optimization planned
    - from: validation
      to: development-planning
      condition: designs approved
      
  deliverables:
    - Interactive prototype
    - Component library specification
    - AI UI generation prompts
    - Frontend architecture document
    - Performance optimization plan