bmad-method 5.1.3 → 6.0.0-Beta.1

package/website/_basement/components/WorkflowGuide.astro

@@ -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>

package/website/_basement/pages/workflow-guide.astro

@@ -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>

package/website/astro.config.mjs

@@ -0,0 +1,169 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+import sitemap from '@astrojs/sitemap';
+import rehypeMarkdownLinks from './src/rehype-markdown-links.js';
+import rehypeBasePaths from './src/rehype-base-paths.js';
+import { getSiteUrl } from './src/lib/site-url.js';
+
+const siteUrl = getSiteUrl();
+const urlParts = new URL(siteUrl);
+// Normalize basePath: ensure trailing slash so links can use `${BASE_URL}path`
+const basePath = urlParts.pathname === '/' ? '/' : urlParts.pathname.endsWith('/') ? urlParts.pathname : urlParts.pathname + '/';
+
+export default defineConfig({
+  site: `${urlParts.origin}${basePath}`,
+  base: basePath,
+  outDir: '../build/site',
+
+  // Disable aggressive caching in dev mode
+  vite: {
+    optimizeDeps: {
+      force: true, // Always re-bundle dependencies
+    },
+    server: {
+      watch: {
+        usePolling: false, // Set to true if file changes aren't detected
+      },
+    },
+  },
+
+  markdown: {
+    rehypePlugins: [
+      [rehypeMarkdownLinks, { base: basePath }],
+      [rehypeBasePaths, { base: basePath }],
+    ],
+  },
+
+  integrations: [
+    sitemap(),
+    starlight({
+      title: 'BMAD Method',
+      tagline: 'AI-driven agile development with specialized agents and workflows that scale from bug fixes to enterprise platforms.',
+
+      logo: {
+        light: './public/img/bmad-light.png',
+        dark: './public/img/bmad-dark.png',
+        alt: 'BMAD Method',
+        replacesTitle: true,
+      },
+      favicon: '/favicon.ico',
+
+      // Social links
+      social: [
+        { icon: 'discord', label: 'Discord', href: 'https://discord.gg/gk8jAdXWmj' },
+        { icon: 'github', label: 'GitHub', href: 'https://github.com/bmad-code-org/BMAD-METHOD' },
+        { icon: 'youtube', label: 'YouTube', href: 'https://www.youtube.com/@BMadCode' },
+      ],
+
+      // Show last updated timestamps
+      lastUpdated: true,
+
+      // Custom head tags for LLM discovery
+      head: [
+        {
+          tag: 'meta',
+          attrs: {
+            name: 'ai-terms',
+            content: `AI-optimized documentation: ${siteUrl}/llms-full.txt (plain text, ~100k tokens, complete BMAD reference). Index: ${siteUrl}/llms.txt`,
+          },
+        },
+        {
+          tag: 'meta',
+          attrs: {
+            name: 'llms-full',
+            content: `${siteUrl}/llms-full.txt`,
+          },
+        },
+        {
+          tag: 'meta',
+          attrs: {
+            name: 'llms',
+            content: `${siteUrl}/llms.txt`,
+          },
+        },
+      ],
+
+      // Custom CSS
+      customCss: ['./src/styles/custom.css'],
+
+      // Sidebar configuration (Diataxis structure)
+      sidebar: [
+        { label: 'Welcome', slug: 'index' },
+        {
+          label: 'Tutorials',
+          collapsed: false,
+          autogenerate: { directory: 'tutorials' },
+        },
+        {
+          label: 'How-To Guides',
+          collapsed: true,
+          autogenerate: { directory: 'how-to' },
+        },
+        {
+          label: 'Explanation',
+          collapsed: true,
+          autogenerate: { directory: 'explanation' },
+        },
+        {
+          label: 'Reference',
+          collapsed: true,
+          autogenerate: { directory: 'reference' },
+        },
+        {
+          label: 'TEA - Testing in BMAD',
+          collapsed: true,
+          items: [
+            {
+              label: 'Tutorials',
+              autogenerate: { directory: 'tea/tutorials' },
+            },
+            {
+              label: 'How-To Guides',
+              items: [
+                {
+                  label: 'Workflows',
+                  autogenerate: { directory: 'tea/how-to/workflows' },
+                },
+                {
+                  label: 'Customization',
+                  autogenerate: { directory: 'tea/how-to/customization' },
+                },
+                {
+                  label: 'Brownfield',
+                  autogenerate: { directory: 'tea/how-to/brownfield' },
+                },
+              ],
+            },
+            {
+              label: 'Explanation',
+              autogenerate: { directory: 'tea/explanation' },
+            },
+            {
+              label: 'Reference',
+              autogenerate: { directory: 'tea/reference' },
+            },
+          ],
+        },
+      ],
+
+      // Credits in footer
+      credits: false,
+
+      // Pagination
+      pagination: false,
+
+      // Use our docs/404.md instead of Starlight's built-in 404
+      disable404Route: true,
+
+      // Custom components
+      components: {
+        Header: './src/components/Header.astro',
+        MobileMenuFooter: './src/components/MobileMenuFooter.astro',
+      },
+
+      // Table of contents
+      tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 3 },
+    }),
+  ],
+});

package/website/public/img/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <rect width="100" height="100" rx="20" fill="#0d9488"/>
+  <text x="50" y="65" font-family="Arial, sans-serif" font-size="40" font-weight="bold" fill="white" text-anchor="middle">B</text>
+</svg>

package/website/public/robots.txt

@@ -0,0 +1,37 @@
+# BMAD Method Documentation
+# https://bmad-code-org.github.io/BMAD-METHOD/
+#
+# This file controls web crawler access to the documentation site.
+
+User-agent: *
+Allow: /
+
+# LLM-friendly documentation files
+# These are specifically designed for AI consumption
+# llms.txt - Concise overview with navigation
+# llms-full.txt - Complete documentation in plain text
+
+# AI Crawlers - Welcome!
+User-agent: GPTBot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /
+
+User-agent: Google-Extended
+Allow: /
+
+User-agent: CCBot
+Allow: /
+
+User-agent: anthropic-ai
+Allow: /
+
+User-agent: Claude-Web
+Allow: /
+
+User-agent: cohere-ai
+Allow: /
+
+# Sitemap
+Sitemap: https://bmad-code-org.github.io/BMAD-METHOD/sitemap.xml