diff --git a/website/src/components/WorkflowGuide.astro b/website/src/components/WorkflowGuide.astro index b3500858..d9dc7e19 100644 --- a/website/src/components/WorkflowGuide.astro +++ b/website/src/components/WorkflowGuide.astro @@ -2,188 +2,160 @@ ---
+
+ /bmad-help + Run this anytime to see what to do next — or ask it a question like "what should I do to build a web app?" +
+ +

Loading agents is optional. If your IDE supports slash commands, you can run workflows directly.

+
-

Select Your Track

-
-

Choose a track above to see the recommended workflow.

+
+

Select a track above to see the workflow.

- -
- -
-

Explore and validate your idea before committing to a plan. Use these workflows when starting fresh or when requirements are unclear.

-
-
-
- Agent: Analyst - brainstorm-project -
-

A guided ideation session that takes your project idea and uses 60+ techniques to create brainstorm notes.

-
-
-
- Agent: Analyst - research -
-

Conducts market, technical, or competitive research on your questions and produces a structured research document.

-
-
-
- Agent: Analyst - product-brief +
+ +
Analysis
-
-

Combines your brainstorm and research notes into a strategic foundation document — product-brief.md — covering problem statement, target users, and MVP scope.

-
+
+ /brainstorm-project + Analyst + +

Guided ideation using 60+ techniques to explore your project idea and create brainstorm notes.

+
+
↓
+ +
+ /research + Analyst + +

Market, technical, or competitive research producing a structured research document.

+
+
↓
+ +
+ /product-brief + Analyst + +

Combines brainstorm and research into a foundation document covering problem, users, and MVP scope.

+
+
↓
+ + +
Planning
+ +
+ /quick-spec + Barry + +

Analyzes your codebase, auto-detects stack, and produces tech-spec.md with implementation-ready story files.

+
+
↓
+ +
+ /create-prd + PM + +

Creates PRD.md with user personas, requirements, success metrics, and risks.

+
+
↓
+ +
+ /create-ux-design + UX Designer + +

Creates ux-design.md with user journeys, wireframes, and a design system.

+
+
↓
+ + +
Solutioning
+ +
+ /create-architecture + Architect + +

Designs system architecture with ADRs covering data, API, security, and deployment decisions.

+
+
↓
+ +
+ /create-epics-and-stories + PM + +

Breaks PRD and architecture into epic files with prioritized, technically-informed stories.

+
+
↓
+ +
+ /implementation-readiness + Architect + +

Validates cohesion across all planning documents to confirm you're ready to build.

+
+
↓
+ + +
Implementation
+ +
+ /sprint-planning + SM + +

Initializes sprint-status.yaml to track all stories through development. Run once.

+
+
↓
+ + +
+ ↻ Repeat for each story + +
+ /create-story + SM + +

Prepares a story file with full context and acceptance criteria from the epic.

+
+
↓
+ +
+ /dev-story + DEV + +

Implements production code and tests following architecture patterns.

+
+
↓
+ +
+ /code-review + DEV + +

Reviews code for quality, architecture alignment, tests, and security.

-
+
↓
- -
- -
-

Define what to build and why. Your track determines the planning workflow — Quick Flow uses a streamlined tech-spec, while BMad Method and Enterprise create a full PRD.

-
-
-
- Agent: Barry (Solo Dev) - quick-spec -
-

Analyzes your project context and codebase, auto-detects your stack, and produces tech-spec.md with implementation-ready story files in one step.

-
-
-
- Agent: PM - create-prd -
-

Uses your product brief (if available) to create PRD.md with user personas, requirements, success metrics, and risks.

-
-
-
- Agent: UX Designer - create-ux-design - -
-

Uses your PRD or tech-spec to create ux-design.md with user journeys, wireframes, and a design system.

-
-
-
-
- - -
- -
-

Make technical decisions explicit, then break work into epics and stories informed by those decisions. Architecture must come before story creation.

-
-
-
- Agent: Architect - create-architecture -
-

Uses your PRD to design the system architecture, producing architecture.md with ADRs covering data, API, security, and deployment decisions.

-
-
-
- Agent: PM - create-epics-and-stories -
-

Combines your PRD and architecture to break work into epic files with prioritized, technically-informed stories.

-
-
-
- Agent: Architect - implementation-readiness - -
-

Reviews all Phase 2-3 outputs to validate cohesion and produces a gate check report confirming you're ready to build.

-
-
-
-
- - -
- -
-

Build one story at a time through a repeating cycle. Complete each story's full lifecycle (dev + review) before starting the next. Use a fresh chat for each workflow run.

-
-
-
- Agent: SM - sprint-planning -
-

Uses your epic files to initialize sprint-status.yaml, which tracks all stories through development. Run once before starting.

-
-
- ↻ Repeat for each story -
-
- Agent: SM - create-story -
-

Uses the epic and sprint-status to prepare a story-[slug].md file with full context and acceptance criteria, ready for development.

-
-
-
- Agent: DEV - dev-story -
-

Uses the story file and architecture to implement production code and tests following established patterns.

-
-
-
- Agent: DEV - code-review -
-

Reviews your implemented code for quality, architecture alignment, tests, and security, producing a review report.

-
-
-
-
- Agent: SM - epic-retrospective -
-

Reviews the completed epic to capture team learnings and create retrospective notes for improving the next epic.

-
-
+
+ /epic-retrospective + SM + +

Captures learnings from a completed epic to improve the next one.

@@ -191,19 +163,45 @@ @@ -483,8 +407,8 @@ if (!guide) return; const trackBtns = guide.querySelectorAll('.track-btn'); - const phasesContainer = guide.querySelector('.phases-container'); - const phaseCards = guide.querySelectorAll('.phase-card'); + const flowContainer = guide.querySelector('.flow-container'); + const allElements = guide.querySelectorAll('[data-quick]'); trackBtns.forEach((btn) => { btn.addEventListener('click', () => { @@ -493,37 +417,26 @@ trackBtns.forEach((b) => b.classList.remove('active')); btn.classList.add('active'); - phasesContainer.setAttribute('data-state', 'has-track'); + flowContainer.setAttribute('data-state', 'has-track'); - phaseCards.forEach((card) => { - const status = card.getAttribute(`data-${track}`); - const visibility = status === 'required' || status === 'recommended' ? 'active' : status; - card.setAttribute('data-visibility', visibility); - - const statusBadge = card.querySelector('.phase-status'); - statusBadge.setAttribute('data-status', status); - statusBadge.textContent = status; + allElements.forEach((el) => { + const status = el.getAttribute(`data-${track}`); if (status === 'skip') { - card.classList.remove('expanded'); + el.setAttribute('data-visibility', 'skip'); + } else { + el.setAttribute('data-visibility', 'active'); } - const workflowItems = card.querySelectorAll('.workflow-item'); - workflowItems.forEach((item) => { - const itemStatus = item.getAttribute(`data-${track}`); - item.setAttribute('data-visibility', itemStatus === 'skip' ? 'skip' : 'active'); - }); + // Update status text for flow rows + const statusEl = el.querySelector('.flow-status'); + if (statusEl) { + statusEl.setAttribute('data-status', status); + statusEl.textContent = status === 'skip' ? '' : status; + } }); }); }); - - phaseCards.forEach((card) => { - const header = card.querySelector('.phase-header'); - header.addEventListener('click', () => { - if (card.getAttribute('data-visibility') === 'skip') return; - card.classList.toggle('expanded'); - }); - }); } document.addEventListener('DOMContentLoaded', initWorkflowGuide);