ros/BMAD-METHOD
1
0
Fork 0
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git synced 2026-01-30 04:32:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Interactive workflow guide, README Quick Start overhaul, and /bmad-help callouts (#1396)

Browse Source 
* Add interactive workflow guide page

Replace confusing static SVG workflow diagram with an interactive
guide at /workflow-guide. Users select their track (Quick Flow,
BMad Method, Enterprise) and see relevant phases, agents, commands,
and outputs. Update link validator to recognize custom page routes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add visual dev loop indicator to workflow guide

Wrap create-story, dev-story, and code-review in a dashed border
group with a "Repeat for each story" label to clearly communicate
the iterative development cycle in Phase 4.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Simplify workflow guide to vertical slash command flow

Replace expandable phase cards with a clean vertical flow showing
slash commands as the primary element, with down arrows between
steps, agent badges, required/optional status, and concise
descriptions. Add prominent /bmad-help callout and note that
agent loading is optional.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Simplify README Quick Start with numbered command flows

Replace wordy paragraphs and track table with two clear numbered
paths (Quick Flow: 3 commands, BMad Method: 6 steps) and a
prominent /bmad-help callout as the primary guidance mechanism.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add Party Mode to README, /bmad-help to getting-started

Add Party Mode bullet to Why BMad section, note about agent-based
usage as an alternative to direct workflows, and a /bmad-help
mention in the getting-started tutorial after installation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add link to getting-started tutorial in README Quick Start

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add workflow guide link to docs index New Here section

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Update README tagline and format modules table

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Fix workflow-guide links to use relative paths

The /workflow-guide absolute path breaks with non-root base paths.
Use relative paths since workflow-guide is a custom Astro page
outside the docs collection. Docs-to-docs links keep the /docs/
pattern which the rehype plugin handles.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Revert workflow-guide links to absolute paths

Use /workflow-guide to match the /docs/ convention used throughout.
Works correctly on the production site where base path is /.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
forcetrainer
2026-01-24 13:16:20 -05:00
committed by GitHub
parent baf2b9daef
commit 999ece33a9
6 changed files with 501 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

444
website/src/components/WorkflowGuide.astro Normal file
View File

@@ -0,0 +1,444 @@
---
---
<div class="workflow-guide not-content">
<div class="help-callout">
<code>/bmad-help</code>
<span>Run this anytime to see what to do next — or ask it a question like <em>"what should I do to build a web app?"</em></span>
</div>
<p class="agents-note">Loading agents is optional. If your IDE supports slash commands, you can run workflows directly.</p>
<div class="track-selector">
<div class="track-buttons">
<button class="track-btn" data-track="quick">
<span class="track-label">Quick Flow</span>
<span class="track-desc">Bug fixes, small features</span>
</button>
<button class="track-btn" data-track="method">
<span class="track-label">BMad Method</span>
<span class="track-desc">Products, platforms</span>
</button>
<button class="track-btn" data-track="enterprise">
<span class="track-label">Enterprise</span>
<span class="track-desc">Compliance, large-scale</span>
</button>
</div>
</div>
<div class="flow-container" data-state="no-track">
<p class="choose-prompt">Select a track above to see the workflow.</p>
<div class="flow-list">
<!-- Phase 1: Analysis -->
<div class="phase-label">Analysis</div>
<div class="flow-row" data-quick="optional" data-method="optional" data-enterprise="optional">
<code class="flow-cmd">/brainstorm-project</code>
<span class="flow-agent">Analyst</span>
<span class="flow-status"></span>
<p class="flow-desc">Guided ideation using 60+ techniques to explore your project idea and create brainstorm notes.</p>
</div>
<div class="flow-arrow" data-quick="optional" data-method="optional" data-enterprise="optional">&#x2193;</div>
<div class="flow-row" data-quick="optional" data-method="optional" data-enterprise="optional">
<code class="flow-cmd">/research</code>
<span class="flow-agent">Analyst</span>
<span class="flow-status"></span>
<p class="flow-desc">Market, technical, or competitive research producing a structured research document.</p>
</div>
<div class="flow-arrow" data-quick="optional" data-method="optional" data-enterprise="optional">&#x2193;</div>
<div class="flow-row" data-quick="optional" data-method="optional" data-enterprise="optional">
<code class="flow-cmd">/product-brief</code>
<span class="flow-agent">Analyst</span>
<span class="flow-status"></span>
<p class="flow-desc">Combines brainstorm and research into a foundation document covering problem, users, and MVP scope.</p>
</div>
<div class="flow-arrow" data-quick="optional" data-method="required" data-enterprise="required">&#x2193;</div>
<!-- Phase 2: Planning -->
<div class="phase-label">Planning</div>
<div class="flow-row" data-quick="required" data-method="skip" data-enterprise="skip">
<code class="flow-cmd">/quick-spec</code>
<span class="flow-agent">Barry</span>
<span class="flow-status"></span>
<p class="flow-desc">Analyzes your codebase, auto-detects stack, and produces tech-spec.md with implementation-ready story files.</p>
</div>
<div class="flow-arrow" data-quick="required" data-method="skip" data-enterprise="skip">&#x2193;</div>
<div class="flow-row" data-quick="skip" data-method="required" data-enterprise="required">
<code class="flow-cmd">/create-prd</code>
<span class="flow-agent">PM</span>
<span class="flow-status"></span>
<p class="flow-desc">Creates PRD.md with user personas, requirements, success metrics, and risks.</p>
</div>
<div class="flow-arrow" data-quick="skip" data-method="required" data-enterprise="required">&#x2193;</div>
<div class="flow-row" data-quick="optional" data-method="optional" data-enterprise="optional">
<code class="flow-cmd">/create-ux-design</code>
<span class="flow-agent">UX Designer</span>
<span class="flow-status"></span>
<p class="flow-desc">Creates ux-design.md with user journeys, wireframes, and a design system.</p>
</div>
<div class="flow-arrow" data-quick="required" data-method="required" data-enterprise="required">&#x2193;</div>
<!-- Phase 3: Solutioning -->
<div class="phase-label" data-quick="skip" data-method="required" data-enterprise="required">Solutioning</div>
<div class="flow-row" data-quick="skip" data-method="required" data-enterprise="required">
<code class="flow-cmd">/create-architecture</code>
<span class="flow-agent">Architect</span>
<span class="flow-status"></span>
<p class="flow-desc">Designs system architecture with ADRs covering data, API, security, and deployment decisions.</p>
</div>
<div class="flow-arrow" data-quick="skip" data-method="required" data-enterprise="required">&#x2193;</div>
<div class="flow-row" data-quick="skip" data-method="required" data-enterprise="required">
<code class="flow-cmd">/create-epics-and-stories</code>
<span class="flow-agent">PM</span>
<span class="flow-status"></span>
<p class="flow-desc">Breaks PRD and architecture into epic files with prioritized, technically-informed stories.</p>
</div>
<div class="flow-arrow" data-quick="skip" data-method="required" data-enterprise="required">&#x2193;</div>
<div class="flow-row" data-quick="skip" data-method="optional" data-enterprise="required">
<code class="flow-cmd">/implementation-readiness</code>
<span class="flow-agent">Architect</span>
<span class="flow-status"></span>
<p class="flow-desc">Validates cohesion across all planning documents to confirm you're ready to build.</p>
</div>
<div class="flow-arrow" data-quick="skip" data-method="required" data-enterprise="required">&#x2193;</div>
<!-- Phase 4: Implementation -->
<div class="phase-label">Implementation</div>
<div class="flow-row" data-quick="skip" data-method="required" data-enterprise="required">
<code class="flow-cmd">/sprint-planning</code>
<span class="flow-agent">SM</span>
<span class="flow-status"></span>
<p class="flow-desc">Initializes sprint-status.yaml to track all stories through development. Run once.</p>
</div>
<div class="flow-arrow" data-quick="skip" data-method="required" data-enterprise="required">&#x2193;</div>
<!-- Dev loop -->
<div class="dev-loop" data-quick="required" data-method="required" data-enterprise="required">
<span class="loop-label">&#x21bb; Repeat for each story</span>
<div class="flow-row" data-quick="skip" data-method="required" data-enterprise="required">
<code class="flow-cmd">/create-story</code>
<span class="flow-agent">SM</span>
<span class="flow-status"></span>
<p class="flow-desc">Prepares a story file with full context and acceptance criteria from the epic.</p>
</div>
<div class="flow-arrow" data-quick="required" data-method="required" data-enterprise="required">&#x2193;</div>
<div class="flow-row" data-quick="required" data-method="required" data-enterprise="required">
<code class="flow-cmd">/dev-story</code>
<span class="flow-agent">DEV</span>
<span class="flow-status"></span>
<p class="flow-desc">Implements production code and tests following architecture patterns.</p>
</div>
<div class="flow-arrow" data-quick="required" data-method="required" data-enterprise="required">&#x2193;</div>
<div class="flow-row" data-quick="optional" data-method="required" data-enterprise="required">
<code class="flow-cmd">/code-review</code>
<span class="flow-agent">DEV</span>
<span class="flow-status"></span>
<p class="flow-desc">Reviews code for quality, architecture alignment, tests, and security.</p>
</div>
</div>
<div class="flow-arrow" data-quick="skip" data-method="optional" data-enterprise="optional">&#x2193;</div>
<div class="flow-row" data-quick="skip" data-method="optional" data-enterprise="optional">
<code class="flow-cmd">/epic-retrospective</code>
<span class="flow-agent">SM</span>
<span class="flow-status"></span>
<p class="flow-desc">Captures learnings from a completed epic to improve the next one.</p>
</div>
</div>
</div>
</div>
<style>
.workflow-guide {
max-width: 36rem;
margin: 0 auto;
}
.help-callout {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 2px solid var(--sl-color-accent);
border-radius: 0.5rem;
background: var(--sl-color-accent-low);
margin-bottom: 1rem;
}
.help-callout code {
font-size: 1.05rem;
font-weight: 700;
color: var(--sl-color-accent-high);
white-space: nowrap;
background: none;
padding: 0;
}
.help-callout span {
font-size: 0.85rem;
color: var(--sl-color-gray-2);
line-height: 1.4;
}
.agents-note {
font-size: 0.8rem;
color: var(--sl-color-gray-3);
margin-bottom: 1rem;
font-style: italic;
}
.track-selector {
margin-bottom: 1.25rem;
}
.track-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.track-btn {
width: 100%;
box-sizing: border-box;
padding: 0.5rem 0.6rem;
border: 1px solid var(--sl-color-gray-5);
border-radius: 0.4rem;
background: transparent;
cursor: pointer;
text-align: left;
transition: border-color 0.15s ease, background-color 0.15s ease;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.track-btn:hover {
border-color: var(--sl-color-accent);
}
.track-btn.active {
border-color: var(--sl-color-accent);
background: var(--sl-color-accent-low);
}
.track-label {
font-weight: 600;
font-size: 0.85rem;
color: var(--sl-color-white);
}
.track-desc {
font-size: 0.7rem;
color: var(--sl-color-gray-3);
}
.flow-container[data-state="no-track"] .flow-list {
display: none;
}
.flow-container[data-state="no-track"] .choose-prompt {
display: block;
}
.choose-prompt {
display: none;
color: var(--sl-color-gray-3);
font-style: italic;
text-align: center;
padding: 1.5rem 0;
}
.flow-list {
display: flex;
flex-direction: column;
align-items: stretch;
}
.phase-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sl-color-gray-3);
margin-top: 0.75rem;
margin-bottom: 0.3rem;
padding-left: 0.25rem;
}
.phase-label:first-child {
margin-top: 0;
}
.phase-label[data-visibility="skip"] {
display: none;
}
.flow-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 0.6rem;
border: 1px solid var(--sl-color-gray-5);
border-radius: 0.3rem;
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.flow-row[data-visibility="active"] {
border-color: var(--sl-color-gray-4);
}
.flow-row[data-visibility="skip"] {
display: none;
}
.flow-cmd {
font-size: 0.9rem;
font-weight: 600;
color: var(--sl-color-white);
background: none;
padding: 0;
}
.flow-agent {
font-size: 0.75rem;
color: var(--sl-color-accent-high);
background: var(--sl-color-accent-low);
padding: 0.1rem 0.4rem;
border-radius: 0.2rem;
white-space: nowrap;
}
.flow-status {
font-size: 0.65rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
min-width: 4rem;
text-align: right;
}
.flow-status[data-status="required"] {
color: var(--sl-color-accent-high);
}
.flow-status[data-status="optional"] {
color: var(--sl-color-gray-3);
}
.flow-status[data-status="recommended"] {
color: var(--sl-color-accent-high);
}
.flow-desc {
grid-column: 1 / -1;
font-size: 0.75rem;
color: var(--sl-color-gray-3);
line-height: 1.4;
margin: 0.1rem 0 0;
}
.flow-arrow {
text-align: center;
font-size: 1rem;
color: var(--sl-color-gray-4);
line-height: 1;
padding: 0.15rem 0;
}
.flow-arrow[data-visibility="skip"] {
display: none;
}
.dev-loop {
border: 1px dashed var(--sl-color-accent);
border-radius: 0.4rem;
padding: 0.4rem 0.5rem;
display: flex;
flex-direction: column;
align-items: stretch;
}
.dev-loop[data-visibility="skip"] {
display: none;
}
.dev-loop .flow-row {
border-color: var(--sl-color-gray-5);
}
.loop-label {
font-size: 0.65rem;
font-weight: 600;
color: var(--sl-color-accent-high);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.3rem;
}
@media (max-width: 30rem) {
.track-buttons {
grid-template-columns: 1fr;
}
.help-callout {
flex-direction: column;
gap: 0.4rem;
}
}
</style>
<script>
function initWorkflowGuide() {
const guide = document.querySelector('.workflow-guide');
if (!guide) return;
const trackBtns = guide.querySelectorAll('.track-btn');
const flowContainer = guide.querySelector('.flow-container');
const allElements = guide.querySelectorAll('[data-quick]');
trackBtns.forEach((btn) => {
btn.addEventListener('click', () => {
const track = btn.getAttribute('data-track');
trackBtns.forEach((b) => b.classList.remove('active'));
btn.classList.add('active');
flowContainer.setAttribute('data-state', 'has-track');
allElements.forEach((el) => {
const status = el.getAttribute(`data-${track}`);
if (status === 'skip') {
el.setAttribute('data-visibility', 'skip');
} else {
el.setAttribute('data-visibility', '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;
}
});
});
});
}
document.addEventListener('DOMContentLoaded', initWorkflowGuide);
document.addEventListener('astro:page-load', initWorkflowGuide);
</script>

17
website/src/pages/workflow-guide.astro Normal file
View File

@@ -0,0 +1,17 @@
---
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
import WorkflowGuide from '../components/WorkflowGuide.astro';
---
<StarlightPage
frontmatter={{
title: 'Workflow Guide',
description: 'Interactive guide to the BMad Method workflow — choose your track and see the recommended phases, agents, and outputs.',
tableOfContents: false,
}}
>
<p>
This interactive guide helps you understand which workflows to run, which agents to use, and what outputs to expect at each phase. Select your project's track to see the relevant path.
</p>
<WorkflowGuide />
</StarlightPage>