# Greenfield UI Workflow - Claude Native Format workflow: name: greenfield-ui description: "Create a new frontend/UI application from scratch" type: greenfield category: frontend metadata: version: "1.0.0" author: "BMAD System" last_updated: "2024-01-01" requirements: - User specification document - Technical preferences (optional) - Design requirements (optional) sequence: - step: 1 name: "Project Analysis" agent: analyst task: analyze_specification template: project_brief inputs: - "user_spec.md" creates: ".claude/context/artifacts/project-brief.json" validators: - schema: ".claude/schemas/project_brief.schema.json" on_fail: retry: 1 escalate_to: "pm" render: renderer: "project-brief" from: ".claude/context/artifacts/project-brief.json" to: ".claude/context/artifacts/project-brief.md" description: "Analyze user requirements and create project brief" instructions: | Load the analyst agent prompt from .claude/agents/analyst/prompt.md Apply the project brief template from .claude/templates/project-brief.md Generate comprehensive project analysis including market context and feasibility Save output to .claude/context/artifacts/project-brief.md - step: 2 name: "Requirements Documentation" agent: pm task: create_prd template: prd inputs: - ".claude/context/artifacts/project-brief.json" creates: ".claude/context/artifacts/prd.json" validators: - schema: ".claude/schemas/product_requirements.schema.json" on_fail: retry: 1 escalate_to: "analyst" render: renderer: "prd" from: ".claude/context/artifacts/prd.json" to: ".claude/context/artifacts/prd.md" depends_on: [1] description: "Create Product Requirements Document" instructions: | Load the PM agent prompt from .claude/agents/pm/prompt.md Reference the project brief from step 1 Apply the PRD template from .claude/templates/prd.md Generate detailed requirements document focused on UI/frontend requirements Save output to .claude/context/artifacts/prd.md - step: 3 name: "UI/UX Design" agent: ux-expert task: design_interface template: ui_spec inputs: - ".claude/context/artifacts/prd.json" creates: ".claude/context/artifacts/ux-spec.json" validators: - schema: ".claude/schemas/ux_spec.schema.json" on_fail: retry: 1 escalate_to: "architect" render: renderer: "ux-spec" from: ".claude/context/artifacts/ux-spec.json" to: ".claude/context/artifacts/ui-spec.md" depends_on: [1, 2] description: "Design user interface and experience" instructions: | Load the UX Expert agent prompt from .claude/agents/ux-expert/prompt.md Reference project brief and PRD Apply the UI spec template from .claude/templates/ui-spec.md Generate comprehensive UI/UX specifications including wireframes and user flows Save output to .claude/context/artifacts/ui-spec.md - step: 4 name: "Technical Architecture" agent: architect task: design_architecture template: architecture inputs: - ".claude/context/artifacts/prd.json" - ".claude/context/artifacts/ux-spec.json" creates: ".claude/context/artifacts/frontend-architecture.json" validators: - schema: ".claude/schemas/system_architecture.schema.json" on_fail: retry: 1 escalate_to: "pm" render: renderer: "architecture" from: ".claude/context/artifacts/frontend-architecture.json" to: ".claude/context/artifacts/frontend-architecture.md" depends_on: [2, 3] description: "Design frontend technical architecture" instructions: | Load the Architect agent prompt from .claude/agents/architect/prompt.md Reference PRD and UI specifications Apply the architecture template from .claude/templates/architecture.md Focus on frontend technologies, patterns, and scalability Generate detailed technical architecture for frontend implementation Save output to .claude/context/artifacts/frontend-architecture.md - step: 5 name: "Component Development" agent: developer task: implement_components creates: "src/components/" depends_on: [3, 4] description: "Implement UI components" instructions: | Load the Developer agent prompt from .claude/agents/developer/prompt.md Reference UI spec and architecture documents Generate component structure and implementation code Create reusable component library with proper TypeScript/JavaScript Include styling and responsive design Save outputs to src/components/ - step: 6 name: "Testing Strategy" agent: qa task: create_test_plan template: test_plan inputs: - ".claude/context/artifacts/frontend-architecture.md" - "src/components/" creates: ".claude/context/artifacts/test-plan.json" validators: - schema: ".claude/schemas/test_plan.schema.json" on_fail: retry: 1 escalate_to: "architect" render: renderer: "test-plan" from: ".claude/context/artifacts/test-plan.json" to: ".claude/context/artifacts/test-plan.md" depends_on: [4, 5] description: "Create comprehensive testing strategy" instructions: | Load the QA agent prompt from .claude/agents/qa/prompt.md Reference architecture and implemented components Apply the test plan template from .claude/templates/test-plan.md Generate testing strategy including unit, integration, and e2e tests Create test scenarios for all user flows and edge cases Save output to .claude/context/artifacts/test-plan.md - step: 7 name: "Implementation Review" agent: architect task: review_implementation creates: ".claude/context/artifacts/review-notes.json" validators: - schema: ".claude/schemas/review_notes.schema.json" render: renderer: "review-notes" from: ".claude/context/artifacts/review-notes.json" to: ".claude/context/artifacts/review-notes.md" depends_on: [5, 6] description: "Review and validate implementation" instructions: | Load the Architect agent prompt again Review all generated artifacts and implementation Validate consistency between architecture and implementation Check adherence to best practices and standards Provide improvement recommendations and next steps Save output to .claude/context/artifacts/review-notes.md outputs: documents: - project-brief.json - project-brief.md - prd.json - prd.md - ux-spec.json - ui-spec.md - frontend-architecture.json - frontend-architecture.md - test-plan.json - test-plan.md - review-notes.md code: - src/components/ - src/styles/ - src/utils/ - src/hooks/ - src/types/ configuration: - package.json - tsconfig.json - vite.config.js - tailwind.config.js - .eslintrc.js - .prettierrc project_types: - spa - mobile-app - micro-frontend - static-site - ui-prototype - simple-interface when_to_use: - Building production frontend applications - Multiple views/pages with complex interactions - Need comprehensive UI/UX design and testing - Multiple team members will be involved - Long-term maintenance expected - Customer-facing applications