219 lines
6.7 KiB
YAML
219 lines
6.7 KiB
YAML
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 |