mirror of
https://github.com/bmad-code-org/BMAD-METHOD.git
synced 2026-01-30 04:32:02 +00:00
Interactive workflow guide, README Quick Start overhaul, and /bmad-help callouts (#1396)
* 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
46
README.md
46
README.md
@@ -5,7 +5,7 @@
|
||||
[](https://nodejs.org)
|
||||
[](https://discord.gg/gk8jAdXWmj)
|
||||
|
||||
**Build More, Architect Dreams** — An AI-driven agile development framework with 21 specialized agents, 50+ guided workflows, and scale-adaptive intelligence that adjusts from bug fixes to enterprise systems.
|
||||
**Breakthrough Method of Agile AI Driven Development** — An AI-driven agile development framework with 21 specialized agents, 50+ guided workflows, and scale-adaptive intelligence that adjusts from bug fixes to enterprise systems.
|
||||
|
||||
**100% free and open source.** No paywalls. No gated content. No gated Discord. We believe in empowering everyone, not just those who can pay.
|
||||
|
||||
@@ -16,6 +16,7 @@ Traditional AI tools do the thinking for you, producing average results. BMad ag
|
||||
- **Scale-Adaptive**: Automatically adjusts planning depth based on project complexity (Level 0-4)
|
||||
- **Structured Workflows**: Grounded in agile best practices across analysis, planning, architecture, and implementation
|
||||
- **Specialized Agents**: 12+ domain experts (PM, Architect, Developer, UX, Scrum Master, and more)
|
||||
- **Party Mode**: Bring multiple agent personas into one session to plan, troubleshoot, or discuss your project collaboratively
|
||||
- **Complete Lifecycle**: From brainstorming to deployment, with just-in-time documentation
|
||||
|
||||
## Quick Start
|
||||
@@ -26,34 +27,43 @@ Traditional AI tools do the thinking for you, producing average results. BMad ag
|
||||
npx bmad-method@alpha install
|
||||
```
|
||||
|
||||
Follow the installer prompts to configure your project.
|
||||
Follow the installer prompts, then open your AI IDE (Claude Code, Cursor, Windsurf, etc.) in the project folder.
|
||||
|
||||
Once you have installed BMad to a folder, launch your tool of choice from where you installed BMad. (We really like Claude Code and Cursor - but there are any that work great with BMad!)
|
||||
> **Not sure what to do?** Run `/bmad-help` — it tells you exactly what's next and what's optional. You can also ask it questions like `/bmad-help How should I build a web app for XYZ?`
|
||||
|
||||
Then its simple as running the command: `/bmad-help` if you do not know what to do. Depending on which modules you have installed, you will have different choices.
|
||||
The workflows below show the fastest path to working code. You can also load agents directly for a more structured process, extensive planning, or to learn about agile development practices — the agents guide you with menus, explanations, and elicitation at each step.
|
||||
|
||||
To make the help more applicable you can even run the `/bmad-help What do you suggest I do to get started building a brand new web application for XYZ`.
|
||||
### Simple Path (Quick Flow)
|
||||
|
||||
The results from BMad Help will be able to suggest and constantly guide you on what to do next - along with the workflows upon completion also making suggestions on what to do next.
|
||||
Bug fixes, small features, clear scope — 3 commands:
|
||||
|
||||
This analyzes your project and recommends a track:
|
||||
1. `/quick-spec` — analyzes your codebase and produces a tech-spec with stories
|
||||
2. `/dev-story` — implements each story
|
||||
3. `/code-review` — validates quality
|
||||
|
||||
| Track | Best For | Time to First Story Coding |
|
||||
| --------------- | ------------------------- | -------------------------- |
|
||||
| **Quick Flow** | Bug fixes, small features | ~10-30 minutes |
|
||||
| **BMad Method** | Products and platforms | ~30 minutes - 2 hours |
|
||||
| **Enterprise** | Compliance-heavy systems | ~1-3 hours |
|
||||
### Full Planning Path (BMad Method)
|
||||
|
||||
Products, platforms, complex features — structured planning then build:
|
||||
|
||||
1. `/product-brief` — define problem, users, and MVP scope
|
||||
2. `/create-prd` — full requirements with personas, metrics, and risks
|
||||
3. `/create-architecture` — technical decisions and system design
|
||||
4. `/create-epics-and-stories` — break work into prioritized stories
|
||||
5. `/sprint-planning` — initialize sprint tracking
|
||||
6. **Repeat per story:** `/create-story` → `/dev-story` → `/code-review`
|
||||
|
||||
Every step tells you what's next. Optional phases (brainstorming, research, UX design) are available when you need them — ask `/bmad-help` anytime. For a detailed walkthrough, see the [Getting Started Tutorial](http://docs.bmad-method.org/tutorials/getting-started/getting-started-bmadv6/).
|
||||
|
||||
## Modules
|
||||
|
||||
BMad Method extends with official modules for specialized domains. Modules are available during installation and can be added to your project at any time.
|
||||
|
||||
| Module | GitHub | NPM | Purpose |
|
||||
|--------|--------|-----|---------|
|
||||
| **BMad Method (BMM)** | [bmad-code-org/BMAD-METHOD](https://github.com/bmad-code-org/BMAD-METHOD) | [bmad-method](https://www.npmjs.com/package/bmad-method) | Core framework with 34+ workflows across 4 development phases |
|
||||
| **BMad Builder (BMB)** | [bmad-code-org/bmad-builder](https://github.com/bmad-code-org/bmad-builder) | [bmad-builder](https://www.npmjs.com/package/bmad-builder) | Create custom BMad agents, workflows, and domain-specific modules |
|
||||
| **Game Dev Studio (BMGD)** | [bmad-code-org/bmad-module-game-dev-studio](https://github.com/bmad-code-org/bmad-module-game-dev-studio) | [bmad-game-dev-studio](https://www.npmjs.com/package/bmad-game-dev-studio) | Game development workflows for Unity, Unreal, and Godot |
|
||||
| **Creative Intelligence Suite (CIS)** | [bmad-code-org/bmad-module-creative-intelligence-suite](https://github.com/bmad-code-org/bmad-module-creative-intelligence-suite) | [bmad-creative-intelligence-suite](https://www.npmjs.com/package/bmad-creative-intelligence-suite) | Innovation, brainstorming, design thinking, and problem-solving |
|
||||
| Module | GitHub | NPM | Purpose |
|
||||
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
|
||||
| **BMad Method (BMM)** | [bmad-code-org/BMAD-METHOD](https://github.com/bmad-code-org/BMAD-METHOD) | [bmad-method](https://www.npmjs.com/package/bmad-method) | Core framework with 34+ workflows across 4 development phases |
|
||||
| **BMad Builder (BMB)** | [bmad-code-org/bmad-builder](https://github.com/bmad-code-org/bmad-builder) | [bmad-builder](https://www.npmjs.com/package/bmad-builder) | Create custom BMad agents, workflows, and domain-specific modules |
|
||||
| **Game Dev Studio (BMGD)** | [bmad-code-org/bmad-module-game-dev-studio](https://github.com/bmad-code-org/bmad-module-game-dev-studio) | [bmad-game-dev-studio](https://www.npmjs.com/package/bmad-game-dev-studio) | Game development workflows for Unity, Unreal, and Godot |
|
||||
| **Creative Intelligence Suite (CIS)** | [bmad-code-org/bmad-module-creative-intelligence-suite](https://github.com/bmad-code-org/bmad-module-creative-intelligence-suite) | [bmad-creative-intelligence-suite](https://www.npmjs.com/package/bmad-creative-intelligence-suite) | Innovation, brainstorming, design thinking, and problem-solving |
|
||||
|
||||
## Documentation
|
||||
|
||||
|
||||
@@ -13,6 +13,7 @@ If you're comfortable working with AI coding assistants like Claude, Cursor, or
|
||||
The fastest way to understand BMad is to try it. Choose a tutorial to walk through your first project in about 10 minutes.
|
||||
|
||||
- **[Get Started with BMad](/docs/tutorials/getting-started/getting-started-bmadv6.md)** — Latest features, still in active development
|
||||
- **[Workflow Guide](/workflow-guide)** — A simple visual overview of the various BMad tracks that get you going quickly.
|
||||
|
||||
:::tip[Already familiar with AI-assisted development?]
|
||||
Feel free to skip around. Use the sidebar to jump to any topic, or check out [What Are Agents?](/docs/explanation/core-concepts/what-are-agents.md) to understand how BMad organizes its AI personas.
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -86,6 +84,8 @@ your-project/
|
||||
Having issues? See [Install BMad](/docs/how-to/installation/install-bmad.md) for common solutions.
|
||||
:::
|
||||
|
||||
Open your AI IDE in the project folder. From here, you can run `/bmad-help` anytime to see what to do next — or ask it a question like `/bmad-help How should I build a web app for XYZ?`
|
||||
|
||||
## Step 1: Initialize Your Project
|
||||
|
||||
Load the **Analyst agent** in your IDE, wait for the menu, then run `workflow-init`.
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
444
website/src/components/WorkflowGuide.astro
Normal file
444
website/src/components/WorkflowGuide.astro
Normal 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">↓</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">↓</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">↓</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">↓</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">↓</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">↓</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">↓</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">↓</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">↓</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">↓</div>
|
||||
|
||||
<!-- Dev loop -->
|
||||
<div class="dev-loop" data-quick="required" data-method="required" data-enterprise="required">
|
||||
<span class="loop-label">↻ 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">↓</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">↓</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">↓</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
17
website/src/pages/workflow-guide.astro
Normal 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>
|
||||
Reference in New Issue
Block a user