books/.bmad-core/workflows/brownfield-ui.yaml
Greg fa8acef423 Epic 1, Story 1.1: Project Initialization & Repository Setup
- Initialize Git repository with main branch
- Create comprehensive .gitignore for Node.js, React, and environment files
- Set up directory structure (frontend/, backend/, docs/)
- Create detailed README.md with project overview and setup instructions
- Add .env.example with all required environment variables
- Configure Prettier for consistent code formatting

All acceptance criteria met:
 Git repository initialized with appropriate .gitignore
 Directory structure matches Technical Assumptions
 README.md created with project overview and setup docs
 .env.example file with all required environment variables
 Prettier config files added for code formatting consistency

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 15:12:30 +01:00

199 lines
7.0 KiB
YAML

# <!-- Powered by BMAD™ Core -->
workflow:
id: brownfield-ui
name: Brownfield UI/Frontend Enhancement
description: >-
Agent workflow for enhancing existing frontend applications with new features,
modernization, or design improvements. Handles existing UI analysis and safe integration.
type: brownfield
project_types:
- ui-modernization
- framework-migration
- design-refresh
- frontend-enhancement
sequence:
- step: ui_analysis
agent: architect
action: analyze existing project and use task document-project
creates: multiple documents per the document-project template
notes: "Review existing frontend application, user feedback, analytics data, and identify improvement areas."
- agent: pm
creates: prd.md
uses: brownfield-prd-tmpl
requires: existing_ui_analysis
notes: "Creates comprehensive PRD focused on UI enhancement with existing system analysis. SAVE OUTPUT: Copy final prd.md to your project's docs/ folder."
- agent: ux-expert
creates: front-end-spec.md
uses: front-end-spec-tmpl
requires: prd.md
notes: "Creates UI/UX specification that integrates with existing design patterns. SAVE OUTPUT: Copy final front-end-spec.md to your project's docs/ folder."
- agent: architect
creates: architecture.md
uses: brownfield-architecture-tmpl
requires:
- prd.md
- front-end-spec.md
notes: "Creates frontend architecture with component integration strategy and migration planning. SAVE OUTPUT: Copy final architecture.md to your project's docs/ folder."
- agent: po
validates: all_artifacts
uses: po-master-checklist
notes: "Validates all documents for UI integration safety and design consistency. May require updates to any document."
- agent: various
updates: any_flagged_documents
condition: po_checklist_issues
notes: "If PO finds issues, return to relevant agent to fix and re-export updated documents to docs/ folder."
- agent: po
action: shard_documents
creates: sharded_docs
requires: all_artifacts_in_project
notes: |
Shard documents for IDE development:
- Option A: Use PO agent to shard: @po then ask to shard docs/prd.md
- Option B: Manual: Drag shard-doc task + docs/prd.md into chat
- Creates docs/prd/ and docs/architecture/ folders with sharded content
- agent: sm
action: create_story
creates: story.md
requires: sharded_docs
repeats: for_each_epic
notes: |
Story creation cycle:
- SM Agent (New Chat): @sm → *create
- Creates next story from sharded docs
- Story starts in "Draft" status
- agent: analyst/pm
action: review_draft_story
updates: story.md
requires: story.md
optional: true
condition: user_wants_story_review
notes: |
OPTIONAL: Review and approve draft story
- NOTE: story-review task coming soon
- Review story completeness and alignment
- Update story status: Draft → Approved
- agent: dev
action: implement_story
creates: implementation_files
requires: story.md
notes: |
Dev Agent (New Chat): @dev
- Implements approved story
- Updates File List with all changes
- Marks story as "Review" when complete
- agent: qa
action: review_implementation
updates: implementation_files
requires: implementation_files
optional: true
notes: |
OPTIONAL: QA Agent (New Chat): @qa → review-story
- Senior dev review with refactoring ability
- Fixes small issues directly
- Leaves checklist for remaining items
- Updates story status (Review → Done or stays Review)
- agent: dev
action: address_qa_feedback
updates: implementation_files
condition: qa_left_unchecked_items
notes: |
If QA left unchecked items:
- Dev Agent (New Chat): Address remaining items
- Return to QA for final approval
- step: repeat_development_cycle
action: continue_for_all_stories
notes: |
Repeat story cycle (SM → Dev → QA) for all epic stories
Continue until all stories in PRD are complete
- agent: po
action: epic_retrospective
creates: epic-retrospective.md
condition: epic_complete
optional: true
notes: |
OPTIONAL: After epic completion
- NOTE: epic-retrospective task coming soon
- Validate epic was completed correctly
- Document learnings and improvements
- step: workflow_end
action: project_complete
notes: |
All stories implemented and reviewed!
Project development phase complete.
Reference: .bmad-core/data/bmad-kb.md#IDE Development Workflow
flow_diagram: |
```mermaid
graph TD
A[Start: UI Enhancement] --> B[analyst: analyze existing UI]
B --> C[pm: prd.md]
C --> D[ux-expert: front-end-spec.md]
D --> E[architect: architecture.md]
E --> F[po: validate with po-master-checklist]
F --> G{PO finds issues?}
G -->|Yes| H[Return to relevant agent for fixes]
G -->|No| I[po: shard documents]
H --> F
I --> J[sm: create story]
J --> K{Review draft story?}
K -->|Yes| L[analyst/pm: review & approve story]
K -->|No| M[dev: implement story]
L --> M
M --> N{QA review?}
N -->|Yes| O[qa: review implementation]
N -->|No| P{More stories?}
O --> Q{QA found issues?}
Q -->|Yes| R[dev: address QA feedback]
Q -->|No| P
R --> O
P -->|Yes| J
P -->|No| S{Epic retrospective?}
S -->|Yes| T[po: epic retrospective]
S -->|No| U[Project Complete]
T --> U
style U fill:#90EE90
style I fill:#ADD8E6
style J fill:#ADD8E6
style M fill:#ADD8E6
style C fill:#FFE4B5
style D fill:#FFE4B5
style E fill:#FFE4B5
style L fill:#F0E68C
style O fill:#F0E68C
style T fill:#F0E68C
```
decision_guidance:
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
handoff_prompts:
analyst_to_pm: "UI analysis complete. Create comprehensive PRD with UI integration strategy."
pm_to_ux: "PRD ready. Save it as docs/prd.md, then create the UI/UX specification."
ux_to_architect: "UI/UX spec complete. Save it as docs/front-end-spec.md, then create the frontend architecture."
architect_to_po: "Architecture complete. Save it as docs/architecture.md. Please validate all artifacts for UI integration safety."
po_issues: "PO found issues with [document]. Please return to [agent] to fix and re-save the updated document."
complete: "All planning artifacts validated and saved in docs/ folder. Move to IDE environment to begin development."