# <!-- Powered by BMAD™ Core -->
workflow:
  id: frontend-app-development
  name: Frontend Application Development
  description: Specialized workflow for building React/Next.js frontend applications. Covers everything from component architecture to deployment.
  type: frontend-focused
  project_types:
    - single-page-application
    - static-site-generation
    - server-side-rendering
    - progressive-web-app

  sequence:
    - agent: analyst
      creates: frontend-requirements.md
      notes: "Document UI/UX requirements, user flows, and frontend-specific needs. SAVE to docs/requirements/"

    - agent: js-solution-architect
      creates: frontend-architecture.md
      requires: frontend-requirements.md
      notes: "Design frontend architecture: component structure, state management, routing, styling approach, and performance strategy. SAVE to docs/architecture/"

    - agent: react-developer
      validates: architecture_feasibility
      uses: frontend-checklist
      notes: Review architecture for React best practices and implementation feasibility.

    - agent: typescript-expert
      creates: type-definitions.md
      requires: frontend-architecture.md
      notes: Define TypeScript interfaces for props, state, API responses, and utilities.

  workflow_end:
    action: begin_component_development
    notes: Architecture validated. Initialize React/Next.js project and begin story-driven component development.

  recommended_stack:
    framework: Next.js 14 with App Router or Vite + React 18
    styling: Tailwind CSS with shadcn/ui or CSS Modules
    state_management: React Query for server state, Zustand for client state
    testing: Vitest + React Testing Library + Playwright