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>
This commit is contained in:
forcetrainer
parent
48881f86a6
commit
af709545a9
|
|
@ -42,9 +42,7 @@ BMad helps you build software through guided workflows with specialized AI agent
|
|||
| 3 | Solutioning | Design architecture *(BMad Method/Enterprise only)* |
|
||||
| 4 | Implementation | Build epic by epic, story by story |
|
||||
|
||||
|
||||
|
||||
*Complete visual flowchart showing all phases, workflows, and agents for the standard greenfield track.*
|
||||
**[Open the Interactive Workflow Guide](/workflow-guide)** to explore phases, agents, and outputs for your chosen track.
|
||||
|
||||
Based on your project's complexity, BMad offers three planning tracks:
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ const LINK_REGEX = /\[([^\]]*)\]\((\/[^)]+)\)/g;
|
|||
// File extensions that are static assets, not markdown docs
|
||||
const STATIC_ASSET_EXTENSIONS = ['.zip', '.txt', '.pdf', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico'];
|
||||
|
||||
// Custom Astro page routes (not part of the docs content collection)
|
||||
const CUSTOM_PAGE_ROUTES = new Set(['/workflow-guide']);
|
||||
|
||||
// Regex to extract headings for anchor validation
|
||||
const HEADING_PATTERN = /^#{1,6}\s+(.+)$/gm;
|
||||
|
||||
|
|
@ -210,6 +213,11 @@ function processFile(filePath) {
|
|||
continue;
|
||||
}
|
||||
|
||||
// Skip custom Astro page routes
|
||||
if (CUSTOM_PAGE_ROUTES.has(linkPath)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Validate the link target exists
|
||||
const targetFile = resolveLink(linkPath);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,515 @@
|
|||
---
|
||||
---
|
||||
|
||||
<div class="workflow-guide not-content">
|
||||
<div class="track-selector">
|
||||
<h2>Select Your Track</h2>
|
||||
<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, clear scope</span>
|
||||
</button>
|
||||
<button class="track-btn" data-track="method">
|
||||
<span class="track-label">BMad Method</span>
|
||||
<span class="track-desc">Products, platforms, complex features</span>
|
||||
</button>
|
||||
<button class="track-btn" data-track="enterprise">
|
||||
<span class="track-label">Enterprise</span>
|
||||
<span class="track-desc">Compliance, multi-tenant, large-scale</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phases-container" data-state="no-track">
|
||||
<p class="choose-prompt">Choose a track above to see the recommended workflow.</p>
|
||||
|
||||
<!-- Phase 1: Analysis -->
|
||||
<div class="phase-card" data-phase="1" data-quick="optional" data-method="optional" data-enterprise="optional">
|
||||
<button class="phase-header">
|
||||
<span class="phase-badge">1</span>
|
||||
<span class="phase-title">Analysis</span>
|
||||
<span class="phase-status"></span>
|
||||
<span class="phase-arrow">▾</span>
|
||||
</button>
|
||||
<div class="phase-body">
|
||||
<p class="phase-description">Explore and validate your idea before committing to a plan. Use these workflows when starting fresh or when requirements are unclear.</p>
|
||||
<div class="workflow-list">
|
||||
<div class="workflow-item" data-quick="optional" data-method="optional" data-enterprise="optional">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: Analyst</span>
|
||||
<code class="wf-command">brainstorm-project</code>
|
||||
</div>
|
||||
<p class="wf-desc">A guided ideation session that takes your project idea and uses 60+ techniques to create <strong>brainstorm notes</strong>.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="optional" data-method="optional" data-enterprise="optional">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: Analyst</span>
|
||||
<code class="wf-command">research</code>
|
||||
</div>
|
||||
<p class="wf-desc">Conducts market, technical, or competitive research on your questions and produces a structured <strong>research document</strong>.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="optional" data-method="recommended" data-enterprise="recommended">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: Analyst</span>
|
||||
<code class="wf-command">product-brief</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Combines your brainstorm and research notes into a strategic foundation document — <strong>product-brief.md</strong> — covering problem statement, target users, and MVP scope.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 2: Planning -->
|
||||
<div class="phase-card" data-phase="2" data-quick="required" data-method="required" data-enterprise="required">
|
||||
<button class="phase-header">
|
||||
<span class="phase-badge">2</span>
|
||||
<span class="phase-title">Planning</span>
|
||||
<span class="phase-status"></span>
|
||||
<span class="phase-arrow">▾</span>
|
||||
</button>
|
||||
<div class="phase-body">
|
||||
<p class="phase-description">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.</p>
|
||||
<div class="workflow-list">
|
||||
<div class="workflow-item" data-quick="required" data-method="skip" data-enterprise="skip">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: Barry (Solo Dev)</span>
|
||||
<code class="wf-command">quick-spec</code>
|
||||
</div>
|
||||
<p class="wf-desc">Analyzes your project context and codebase, auto-detects your stack, and produces <strong>tech-spec.md</strong> with implementation-ready <strong>story files</strong> in one step.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="skip" data-method="required" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: PM</span>
|
||||
<code class="wf-command">create-prd</code>
|
||||
</div>
|
||||
<p class="wf-desc">Uses your product brief (if available) to create <strong>PRD.md</strong> with user personas, requirements, success metrics, and risks.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="optional" data-method="optional" data-enterprise="optional">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: UX Designer</span>
|
||||
<code class="wf-command">create-ux-design</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Uses your PRD or tech-spec to create <strong>ux-design.md</strong> with user journeys, wireframes, and a design system.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 3: Solutioning -->
|
||||
<div class="phase-card" data-phase="3" data-quick="skip" data-method="required" data-enterprise="required">
|
||||
<button class="phase-header">
|
||||
<span class="phase-badge">3</span>
|
||||
<span class="phase-title">Solutioning</span>
|
||||
<span class="phase-status"></span>
|
||||
<span class="phase-arrow">▾</span>
|
||||
</button>
|
||||
<div class="phase-body">
|
||||
<p class="phase-description">Make technical decisions explicit, then break work into epics and stories informed by those decisions. Architecture must come before story creation.</p>
|
||||
<div class="workflow-list">
|
||||
<div class="workflow-item" data-quick="skip" data-method="required" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: Architect</span>
|
||||
<code class="wf-command">create-architecture</code>
|
||||
</div>
|
||||
<p class="wf-desc">Uses your PRD to design the system architecture, producing <strong>architecture.md</strong> with ADRs covering data, API, security, and deployment decisions.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="skip" data-method="required" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: PM</span>
|
||||
<code class="wf-command">create-epics-and-stories</code>
|
||||
</div>
|
||||
<p class="wf-desc">Combines your PRD and architecture to break work into <strong>epic files</strong> with prioritized, technically-informed stories.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="skip" data-method="recommended" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: Architect</span>
|
||||
<code class="wf-command">implementation-readiness</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Reviews all Phase 2-3 outputs to validate cohesion and produces a <strong>gate check report</strong> confirming you're ready to build.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 4: Implementation -->
|
||||
<div class="phase-card" data-phase="4" data-quick="required" data-method="required" data-enterprise="required">
|
||||
<button class="phase-header">
|
||||
<span class="phase-badge">4</span>
|
||||
<span class="phase-title">Implementation</span>
|
||||
<span class="phase-status"></span>
|
||||
<span class="phase-arrow">▾</span>
|
||||
</button>
|
||||
<div class="phase-body">
|
||||
<p class="phase-description">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.</p>
|
||||
<div class="workflow-list">
|
||||
<div class="workflow-item" data-quick="skip" data-method="required" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: SM</span>
|
||||
<code class="wf-command">sprint-planning</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Uses your epic files to initialize <strong>sprint-status.yaml</strong>, which tracks all stories through development. Run once before starting.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="skip" data-method="required" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: SM</span>
|
||||
<code class="wf-command">create-story</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Uses the epic and sprint-status to prepare a <strong>story-[slug].md</strong> file with full context and acceptance criteria, ready for development.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="required" data-method="required" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: DEV</span>
|
||||
<code class="wf-command">dev-story</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Uses the story file and architecture to implement <strong>production code and tests</strong> following established patterns.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="required" data-method="required" data-enterprise="required">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: DEV</span>
|
||||
<code class="wf-command">code-review</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Reviews your implemented code for quality, architecture alignment, tests, and security, producing a <strong>review report</strong>.</p>
|
||||
</div>
|
||||
<div class="workflow-item" data-quick="skip" data-method="recommended" data-enterprise="recommended">
|
||||
<div class="wf-top">
|
||||
<span class="wf-agent">Agent: SM</span>
|
||||
<code class="wf-command">epic-retrospective</code>
|
||||
|
||||
</div>
|
||||
<p class="wf-desc">Reviews the completed epic to capture team learnings and create <strong>retrospective notes</strong> for improving the next epic.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.workflow-guide {
|
||||
max-width: 44rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.track-selector {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.track-selector h2 {
|
||||
font-size: 1rem;
|
||||
color: var(--sl-color-gray-2);
|
||||
margin-bottom: 0.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.track-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.track-btn {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.6rem 0.75rem;
|
||||
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.15rem;
|
||||
}
|
||||
|
||||
.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.9rem;
|
||||
color: var(--sl-color-white);
|
||||
}
|
||||
|
||||
.track-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--sl-color-gray-3);
|
||||
}
|
||||
|
||||
.phases-container[data-state="no-track"] .phase-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phases-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;
|
||||
}
|
||||
|
||||
.phases-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.phase-card {
|
||||
border: 1px solid var(--sl-color-gray-5);
|
||||
border-radius: 0.4rem;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.phase-card[data-visibility="active"] {
|
||||
border-color: var(--sl-color-accent);
|
||||
}
|
||||
|
||||
.phase-card[data-visibility="optional"] {
|
||||
border-color: var(--sl-color-accent);
|
||||
}
|
||||
|
||||
.phase-card[data-visibility="skip"] {
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.phase-card[data-visibility="skip"] .phase-title {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.phase-card[data-visibility="skip"] .phase-header {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.phase-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--sl-color-accent-low);
|
||||
color: var(--sl-color-accent-high);
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phase-card[data-visibility="active"] .phase-badge,
|
||||
.phase-card[data-visibility="optional"] .phase-badge {
|
||||
background: var(--sl-color-accent);
|
||||
color: var(--sl-color-white);
|
||||
}
|
||||
|
||||
.phase-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--sl-color-white);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.phase-status {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.phase-status[data-status="required"] {
|
||||
background: rgba(140, 140, 255, 0.15);
|
||||
color: var(--sl-color-accent-high);
|
||||
}
|
||||
|
||||
.phase-status[data-status="optional"] {
|
||||
background: rgba(140, 140, 255, 0.08);
|
||||
color: var(--sl-color-gray-3);
|
||||
}
|
||||
|
||||
.phase-status[data-status="recommended"] {
|
||||
background: rgba(140, 140, 255, 0.15);
|
||||
color: var(--sl-color-accent-high);
|
||||
}
|
||||
|
||||
.phase-status[data-status="skip"] {
|
||||
background: transparent;
|
||||
color: var(--sl-color-gray-4);
|
||||
}
|
||||
|
||||
.phase-arrow {
|
||||
color: var(--sl-color-gray-3);
|
||||
font-size: 1.1rem;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.phase-card.expanded .phase-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.phase-body {
|
||||
display: none;
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
}
|
||||
|
||||
.phase-card.expanded .phase-body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.phase-description {
|
||||
font-size: 0.85rem;
|
||||
color: var(--sl-color-gray-3);
|
||||
margin-bottom: 0.6rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.workflow-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.workflow-item {
|
||||
padding: 0.5rem 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
border: 1px solid var(--sl-color-gray-4);
|
||||
}
|
||||
|
||||
.workflow-item[data-visibility="skip"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wf-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.wf-agent {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--sl-color-accent-high);
|
||||
background: var(--sl-color-accent-low);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 0.2rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wf-command {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--sl-color-white);
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wf-command::before {
|
||||
content: 'Run: ';
|
||||
font-weight: 400;
|
||||
color: var(--sl-color-gray-3);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
|
||||
.wf-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--sl-color-gray-2);
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wf-desc strong {
|
||||
color: var(--sl-color-gray-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 30rem) {
|
||||
.track-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initWorkflowGuide() {
|
||||
const guide = document.querySelector('.workflow-guide');
|
||||
if (!guide) return;
|
||||
|
||||
const trackBtns = guide.querySelectorAll('.track-btn');
|
||||
const phasesContainer = guide.querySelector('.phases-container');
|
||||
const phaseCards = guide.querySelectorAll('.phase-card');
|
||||
|
||||
trackBtns.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const track = btn.getAttribute('data-track');
|
||||
|
||||
trackBtns.forEach((b) => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
phasesContainer.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;
|
||||
|
||||
if (status === 'skip') {
|
||||
card.classList.remove('expanded');
|
||||
}
|
||||
|
||||
const workflowItems = card.querySelectorAll('.workflow-item');
|
||||
workflowItems.forEach((item) => {
|
||||
const itemStatus = item.getAttribute(`data-${track}`);
|
||||
item.setAttribute('data-visibility', itemStatus === 'skip' ? 'skip' : 'active');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
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);
|
||||
document.addEventListener('astro:page-load', initWorkflowGuide);
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue