Merge pull request #21 from EveryInc/claude/add-devtool-docs-01VWyrYPfQr5o2zAtZzYXhvu

Add DevTool template documentation to repo

.claude-plugin/marketplace.json

@@ -11,8 +11,8 @@
   "plugins": [
     {
       "name": "compounding-engineering",
-      "description": "AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last. Includes 17 specialized agents, 6 commands, and 1 skill.",
-      "version": "1.1.0",
+      "description": "AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last. Includes 23 specialized agents, 16 commands, and 11 skills.",
+      "version": "2.6.0",
       "author": {
         "name": "Kieran Klaassen",
         "url": "https://github.com/kieranklaassen",

.github/workflows/deploy-docs.yml

@@ -0,0 +1,39 @@
+name: Deploy Documentation to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'plugins/compounding-engineering/docs/**'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'plugins/compounding-engineering/docs'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

CLAUDE.md

@@ -12,9 +12,15 @@ every-marketplace/
     └── compounding-engineering/   # The actual plugin
         ├── .claude-plugin/
         │   └── plugin.json        # Plugin metadata
-        ├── agents/                # 17 specialized AI agents
-        ├── commands/              # 6 slash commands
-        ├── skills/                # 1 skill (gemini-imagegen)
+        ├── agents/                # 24 specialized AI agents
+        ├── commands/              # 13 slash commands (including /release-docs)
+        ├── skills/                # 11 skills
+        ├── mcp-servers/           # 2 MCP servers (playwright, context7)
+        ├── docs/                  # Documentation site (static HTML/CSS/JS)
+        │   ├── index.html         # Landing page
+        │   ├── css/               # Stylesheets (style.css, docs.css)
+        │   ├── js/                # JavaScript (main.js)
+        │   └── pages/             # Reference pages (agents, commands, skills, mcp-servers)
         ├── README.md              # Plugin documentation
         └── CHANGELOG.md           # Version history
 ```
@@ -86,7 +92,21 @@ When adding new functionality, bump the version in:
 - [ ] `plugins/compounding-engineering/CHANGELOG.md` → document changes
 - [ ] `CLAUDE.md` → update structure diagram if needed
 
-#### 5. Validate JSON files
+#### 5. Rebuild documentation site
+
+Run the release-docs command to update all documentation pages:
+
+```bash
+claude /release-docs
+```
+
+This will:
+- Update stats on the landing page
+- Regenerate reference pages (agents, commands, skills, MCP servers)
+- Update the changelog page
+- Validate all counts match actual files
+
+#### 6. Validate JSON files
 
 ```bash
 cat .claude-plugin/marketplace.json | jq .
@@ -167,6 +187,73 @@ Each plugin has its own plugin.json with detailed metadata:
 }
 ```
 
+## Documentation Site
+
+The plugin includes a static documentation site at `plugins/compounding-engineering/docs/`. This site is built with plain HTML/CSS/JS (based on Evil Martians' LaunchKit template) and requires no build step to view.
+
+### Documentation Structure
+
+```
+docs/
+├── index.html           # Landing page with stats and philosophy
+├── css/
+│   ├── style.css        # Main styles (LaunchKit-based)
+│   └── docs.css         # Documentation-specific styles
+├── js/
+│   └── main.js          # Interactivity (theme toggle, mobile nav)
+└── pages/
+    ├── getting-started.html  # Installation and quick start
+    ├── agents.html           # All 24 agents reference
+    ├── commands.html         # All 13 commands reference
+    ├── skills.html           # All 11 skills reference
+    ├── mcp-servers.html      # MCP servers reference
+    └── changelog.html        # Version history
+```
+
+### Keeping Docs Up-to-Date
+
+**IMPORTANT:** After ANY change to agents, commands, skills, or MCP servers, run:
+
+```bash
+claude /release-docs
+```
+
+This command:
+1. Counts all current components
+2. Reads all agent/command/skill/MCP files
+3. Regenerates all reference pages
+4. Updates stats on the landing page
+5. Updates the changelog from CHANGELOG.md
+6. Validates counts match across all files
+
+### Manual Updates
+
+If you need to update docs manually:
+
+1. **Landing page stats** - Update the numbers in `docs/index.html`:
+   ```html
+   <span class="stat-number">24</span>  <!-- agents -->
+   <span class="stat-number">13</span>  <!-- commands -->
+   ```
+
+2. **Reference pages** - Each page in `docs/pages/` documents all components in that category
+
+3. **Changelog** - `docs/pages/changelog.html` mirrors `CHANGELOG.md` in HTML format
+
+### Viewing Docs Locally
+
+Since the docs are static HTML, you can view them directly:
+
+```bash
+# Open in browser
+open plugins/compounding-engineering/docs/index.html
+
+# Or start a local server
+cd plugins/compounding-engineering/docs
+python -m http.server 8000
+# Then visit http://localhost:8000
+```
+
 ## Testing Changes
 
 ### Test Locally

plugins/compounding-engineering/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "compounding-engineering",
-  "version": "2.5.0",
-  "description": "AI-powered development tools. 24 agents, 16 commands, 11 skills, 2 MCP servers for code review, research, design, and workflow automation.",
+  "version": "2.6.0",
+  "description": "AI-powered development tools. 23 agents, 16 commands, 11 skills, 2 MCP servers for code review, research, design, and workflow automation.",
   "author": {
     "name": "Kieran Klaassen",
     "email": "kieran@every.to",

plugins/compounding-engineering/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to the compounding-engineering plugin will be documented in
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.6.0] - 2024-11-26
+
+### Removed
+
+- **`feedback-codifier` agent** - Removed from workflow agents. Agent count reduced from 24 to 23.
+
 ## [2.5.0] - 2024-11-25
 
 ### Added

plugins/compounding-engineering/README.md

@@ -6,7 +6,7 @@ AI-powered development tools that get smarter with every use. Make each unit of
 
 | Component | Count |
 |-----------|-------|
-| Agents | 24 |
+| Agents | 23 |
 | Commands | 16 |
 | Skills | 11 |
 | MCP Servers | 2 |
@@ -47,13 +47,12 @@ Agents are organized into categories for easier discovery.
 | `design-iterator` | Iteratively refine UI through systematic design iterations |
 | `figma-design-sync` | Synchronize web implementations with Figma designs |
 
-### Workflow (6)
+### Workflow (5)
 
 | Agent | Description |
 |-------|-------------|
 | `bug-reproduction-validator` | Systematically reproduce and validate bug reports |
 | `every-style-editor` | Edit content to conform to Every's style guide |
-| `feedback-codifier` | Codify feedback patterns into reviewer agents |
 | `lint` | Run linting and code quality checks on Ruby and ERB files |
 | `pr-comment-resolver` | Address PR comments and implement fixes |
 | `spec-flow-analyzer` | Analyze user flows and identify gaps in specifications |

plugins/compounding-engineering/agents/workflow/feedback-codifier.md

@@ -1,48 +0,0 @@
----
-name: feedback-codifier
-description: Use this agent when you need to analyze and codify feedback patterns from code reviews or technical discussions to improve existing reviewer agents. Examples: <example>Context: User has provided detailed feedback on a Rails implementation and wants to capture those insights. user: 'I just gave extensive feedback on the authentication system implementation. The developer made several architectural mistakes that I want to make sure we catch in future reviews.' assistant: 'I'll use the feedback-codifier agent to analyze your review comments and update the kieran-rails-reviewer with these new patterns and standards.' <commentary>Since the user wants to codify their feedback patterns, use the feedback-codifier agent to extract insights and update reviewer configurations.</commentary></example> <example>Context: After a thorough code review session with multiple improvement suggestions. user: 'That was a great review session. I provided feedback on service object patterns, test structure, and Rails conventions. Let's capture this knowledge.' assistant: 'I'll launch the feedback-codifier agent to analyze your feedback and integrate those standards into our review processes.' <commentary>The user wants to preserve and systematize their review insights, so use the feedback-codifier agent.</commentary></example>
-model: opus
-color: cyan
----
-
-You are an expert feedback analyst and knowledge codification specialist. Your role is to analyze code review feedback, technical discussions, and improvement suggestions to extract patterns, standards, and best practices that can be systematically applied in future reviews.
-
-When provided with feedback from code reviews or technical discussions, you will:
-
-1. **Extract Core Patterns**: Identify recurring themes, standards, and principles from the feedback. Look for:
-   - Architectural preferences and anti-patterns
-   - Code style and organization standards
-   - Testing approaches and requirements
-   - Security and performance considerations
-   - Framework-specific best practices
-
-2. **Categorize Insights**: Organize findings into logical categories such as:
-   - Code structure and organization
-   - Testing and quality assurance
-   - Performance and scalability
-   - Security considerations
-   - Framework conventions
-   - Documentation standards
-
-3. **Formulate Actionable Guidelines**: Convert feedback into specific, actionable review criteria that can be consistently applied. Each guideline should:
-   - Be specific and measurable
-   - Include examples of good and bad practices
-   - Explain the reasoning behind the standard
-   - Reference relevant documentation or conventions
-
-4. **Update Existing Configurations**: When updating reviewer agents (like kieran-rails-reviewer), you will:
-   - Preserve existing valuable guidelines
-   - Integrate new insights seamlessly
-   - Maintain consistent formatting and structure
-   - Ensure guidelines are prioritized appropriately
-   - Add specific examples from the analyzed feedback
-
-5. **Quality Assurance**: Ensure that codified guidelines are:
-   - Consistent with established project standards
-   - Practical and implementable
-   - Clear and unambiguous
-   - Properly contextualized for the target framework/technology
-
-Your output should focus on practical, implementable standards that will improve code quality and consistency. Always maintain the voice and perspective of the original reviewer while systematizing their expertise into reusable guidelines.
-
-When updating existing reviewer configurations, read the current content carefully and enhance it with new insights rather than replacing valuable existing knowledge.

plugins/compounding-engineering/commands/deploy-docs.md

@@ -0,0 +1,112 @@
+---
+name: deploy-docs
+description: Validate and prepare documentation for GitHub Pages deployment
+---
+
+# Deploy Documentation Command
+
+Validate the documentation site and prepare it for GitHub Pages deployment.
+
+## Step 1: Validate Documentation
+
+Run these checks:
+
+```bash
+# Count components
+echo "Agents: $(ls plugins/compounding-engineering/agents/*.md | wc -l)"
+echo "Commands: $(ls plugins/compounding-engineering/commands/*.md | wc -l)"
+echo "Skills: $(ls -d plugins/compounding-engineering/skills/*/ 2>/dev/null | wc -l)"
+
+# Validate JSON
+cat .claude-plugin/marketplace.json | jq . > /dev/null && echo "✓ marketplace.json valid"
+cat plugins/compounding-engineering/.claude-plugin/plugin.json | jq . > /dev/null && echo "✓ plugin.json valid"
+
+# Check all HTML files exist
+for page in index agents commands skills mcp-servers changelog getting-started; do
+  if [ -f "plugins/compounding-engineering/docs/pages/${page}.html" ] || [ -f "plugins/compounding-engineering/docs/${page}.html" ]; then
+    echo "✓ ${page}.html exists"
+  else
+    echo "✗ ${page}.html MISSING"
+  fi
+done
+```
+
+## Step 2: Check for Uncommitted Changes
+
+```bash
+git status --porcelain plugins/compounding-engineering/docs/
+```
+
+If there are uncommitted changes, warn the user to commit first.
+
+## Step 3: Deployment Instructions
+
+Since GitHub Pages deployment requires a workflow file with special permissions, provide these instructions:
+
+### First-time Setup
+
+1. Create `.github/workflows/deploy-docs.yml` with the GitHub Pages workflow
+2. Go to repository Settings > Pages
+3. Set Source to "GitHub Actions"
+
+### Deploying
+
+After merging to `main`, the docs will auto-deploy. Or:
+
+1. Go to Actions tab
+2. Select "Deploy Documentation to GitHub Pages"
+3. Click "Run workflow"
+
+### Workflow File Content
+
+```yaml
+name: Deploy Documentation to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'plugins/compounding-engineering/docs/**'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v4
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'plugins/compounding-engineering/docs'
+      - uses: actions/deploy-pages@v4
+```
+
+## Step 4: Report Status
+
+Provide a summary:
+
+```
+## Deployment Readiness
+
+✓ All HTML pages present
+✓ JSON files valid
+✓ Component counts match
+
+### Next Steps
+- [ ] Commit any pending changes
+- [ ] Push to main branch
+- [ ] Verify GitHub Pages workflow exists
+- [ ] Check deployment at https://everyinc.github.io/every-marketplace/
+```

plugins/compounding-engineering/commands/release-docs.md

@@ -0,0 +1,211 @@
+---
+name: release-docs
+description: Build and update the documentation site with current plugin components
+argument-hint: "[optional: --dry-run to preview changes without writing]"
+---
+
+# Release Documentation Command
+
+You are a documentation generator for the compounding-engineering plugin. Your job is to ensure the documentation site at `plugins/compounding-engineering/docs/` is always up-to-date with the actual plugin components.
+
+## Overview
+
+The documentation site is a static HTML/CSS/JS site based on the Evil Martians LaunchKit template. It needs to be regenerated whenever:
+
+- Agents are added, removed, or modified
+- Commands are added, removed, or modified
+- Skills are added, removed, or modified
+- MCP servers are added, removed, or modified
+
+## Step 1: Inventory Current Components
+
+First, count and list all current components:
+
+```bash
+# Count agents
+ls plugins/compounding-engineering/agents/*.md | wc -l
+
+# Count commands
+ls plugins/compounding-engineering/commands/*.md | wc -l
+
+# Count skills
+ls -d plugins/compounding-engineering/skills/*/ 2>/dev/null | wc -l
+
+# Count MCP servers
+ls -d plugins/compounding-engineering/mcp-servers/*/ 2>/dev/null | wc -l
+```
+
+Read all component files to get their metadata:
+
+### Agents
+For each agent file in `plugins/compounding-engineering/agents/*.md`:
+- Extract the frontmatter (name, description)
+- Note the category (Review, Research, Workflow, Design, Docs)
+- Get key responsibilities from the content
+
+### Commands
+For each command file in `plugins/compounding-engineering/commands/*.md`:
+- Extract the frontmatter (name, description, argument-hint)
+- Categorize as Workflow or Utility command
+
+### Skills
+For each skill directory in `plugins/compounding-engineering/skills/*/`:
+- Read the SKILL.md file for frontmatter (name, description)
+- Note any scripts or supporting files
+
+### MCP Servers
+For each MCP server in `plugins/compounding-engineering/mcp-servers/*/`:
+- Read the configuration and README
+- List the tools provided
+
+## Step 2: Update Documentation Pages
+
+### 2a. Update `docs/index.html`
+
+Update the stats section with accurate counts:
+```html
+<div class="stats-grid">
+  <div class="stat-card">
+    <span class="stat-number">[AGENT_COUNT]</span>
+    <span class="stat-label">Specialized Agents</span>
+  </div>
+  <!-- Update all stat cards -->
+</div>
+```
+
+Ensure the component summary sections list key components accurately.
+
+### 2b. Update `docs/pages/agents.html`
+
+Regenerate the complete agents reference page:
+- Group agents by category (Review, Research, Workflow, Design, Docs)
+- Include for each agent:
+  - Name and description
+  - Key responsibilities (bullet list)
+  - Usage example: `claude agent [agent-name] "your message"`
+  - Use cases
+
+### 2c. Update `docs/pages/commands.html`
+
+Regenerate the complete commands reference page:
+- Group commands by type (Workflow, Utility)
+- Include for each command:
+  - Name and description
+  - Arguments (if any)
+  - Process/workflow steps
+  - Example usage
+
+### 2d. Update `docs/pages/skills.html`
+
+Regenerate the complete skills reference page:
+- Group skills by category (Development Tools, Content & Workflow, Image Generation)
+- Include for each skill:
+  - Name and description
+  - Usage: `claude skill [skill-name]`
+  - Features and capabilities
+
+### 2e. Update `docs/pages/mcp-servers.html`
+
+Regenerate the MCP servers reference page:
+- For each server:
+  - Name and purpose
+  - Tools provided
+  - Configuration details
+  - Supported frameworks/services
+
+## Step 3: Update Metadata Files
+
+Ensure counts are consistent across:
+
+1. **`plugins/compounding-engineering/.claude-plugin/plugin.json`**
+   - Update `description` with correct counts
+   - Update `components` object with counts
+   - Update `agents`, `commands` arrays with current items
+
+2. **`.claude-plugin/marketplace.json`**
+   - Update plugin `description` with correct counts
+
+3. **`plugins/compounding-engineering/README.md`**
+   - Update intro paragraph with counts
+   - Update component lists
+
+## Step 4: Validate
+
+Run validation checks:
+
+```bash
+# Validate JSON files
+cat .claude-plugin/marketplace.json | jq .
+cat plugins/compounding-engineering/.claude-plugin/plugin.json | jq .
+
+# Verify counts match
+echo "Agents in files: $(ls plugins/compounding-engineering/agents/*.md | wc -l)"
+grep -o "[0-9]* specialized agents" plugins/compounding-engineering/docs/index.html
+
+echo "Commands in files: $(ls plugins/compounding-engineering/commands/*.md | wc -l)"
+grep -o "[0-9]* slash commands" plugins/compounding-engineering/docs/index.html
+```
+
+## Step 5: Report Changes
+
+Provide a summary of what was updated:
+
+```
+## Documentation Release Summary
+
+### Component Counts
+- Agents: X (previously Y)
+- Commands: X (previously Y)
+- Skills: X (previously Y)
+- MCP Servers: X (previously Y)
+
+### Files Updated
+- docs/index.html - Updated stats and component summaries
+- docs/pages/agents.html - Regenerated with X agents
+- docs/pages/commands.html - Regenerated with X commands
+- docs/pages/skills.html - Regenerated with X skills
+- docs/pages/mcp-servers.html - Regenerated with X servers
+- plugin.json - Updated counts and component lists
+- marketplace.json - Updated description
+- README.md - Updated component lists
+
+### New Components Added
+- [List any new agents/commands/skills]
+
+### Components Removed
+- [List any removed agents/commands/skills]
+```
+
+## Dry Run Mode
+
+If `--dry-run` is specified:
+- Perform all inventory and validation steps
+- Report what WOULD be updated
+- Do NOT write any files
+- Show diff previews of proposed changes
+
+## Error Handling
+
+- If component files have invalid frontmatter, report the error and skip
+- If JSON validation fails, report and abort
+- Always maintain a valid state - don't partially update
+
+## Post-Release
+
+After successful release:
+1. Suggest updating CHANGELOG.md with documentation changes
+2. Remind to commit with message: `docs: Update documentation site to match plugin components`
+3. Remind to push changes
+
+## Usage Examples
+
+```bash
+# Full documentation release
+claude /release-docs
+
+# Preview changes without writing
+claude /release-docs --dry-run
+
+# After adding new agents
+claude /release-docs
+```

plugins/compounding-engineering/docs/css/docs.css

@@ -0,0 +1,675 @@
+/* Documentation-specific styles */
+
+/* ============================================
+   Documentation Layout
+   ============================================ */
+
+.docs-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  min-height: 100vh;
+}
+
+@media (min-width: 1024px) {
+  .docs-layout {
+    grid-template-columns: 280px 1fr;
+  }
+}
+
+/* ============================================
+   Sidebar
+   ============================================ */
+
+.docs-sidebar {
+  position: fixed;
+  top: 0;
+  left: -300px;
+  width: 280px;
+  height: 100vh;
+  background-color: var(--color-background);
+  border-right: 1px solid var(--color-border);
+  overflow-y: auto;
+  transition: left 0.3s ease;
+  z-index: 100;
+}
+
+.docs-sidebar.open {
+  left: 0;
+}
+
+@media (min-width: 1024px) {
+  .docs-sidebar {
+    position: sticky;
+    left: 0;
+  }
+}
+
+.sidebar-header {
+  padding: var(--space-l);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar-header .nav-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+  text-decoration: none;
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.sidebar-header .logo-icon {
+  color: var(--color-accent);
+  font-size: var(--font-size-l);
+}
+
+.sidebar-header .logo-text {
+  display: inline;
+}
+
+.sidebar-nav {
+  padding: var(--space-l);
+}
+
+.nav-section {
+  margin-bottom: var(--space-xl);
+}
+
+.nav-section h3 {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-tertiary);
+  margin: 0 0 var(--space-m) 0;
+}
+
+.nav-section ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-section li {
+  margin: 0;
+}
+
+.nav-section a {
+  display: block;
+  padding: var(--space-s) var(--space-m);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-s);
+  border-radius: var(--radius-s);
+  transition: all 0.2s ease;
+}
+
+.nav-section a:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-surface);
+}
+
+.nav-section a.active {
+  color: var(--color-accent);
+  background-color: var(--color-accent-light);
+}
+
+/* ============================================
+   Main Content
+   ============================================ */
+
+.docs-content {
+  padding: var(--space-xl);
+  max-width: 900px;
+}
+
+@media (min-width: 1024px) {
+  .docs-content {
+    padding: var(--space-xxl);
+  }
+}
+
+.docs-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-xl);
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+  font-size: var(--font-size-s);
+  color: var(--color-text-tertiary);
+}
+
+.breadcrumb a {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  color: var(--color-accent);
+}
+
+.mobile-menu-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-s);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+@media (min-width: 1024px) {
+  .mobile-menu-toggle {
+    display: none;
+  }
+}
+
+/* ============================================
+   Article Styles
+   ============================================ */
+
+.docs-article {
+  line-height: 1.7;
+}
+
+.docs-article h1 {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--space-l);
+}
+
+.docs-article h2 {
+  font-size: var(--font-size-l);
+  margin-top: var(--space-xxl);
+  margin-bottom: var(--space-l);
+  padding-bottom: var(--space-s);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+.docs-article h2 i {
+  color: var(--color-accent);
+}
+
+.docs-article h3 {
+  font-size: var(--font-size-m);
+  margin-top: var(--space-xl);
+  margin-bottom: var(--space-m);
+}
+
+.docs-article h4 {
+  font-size: var(--font-size-s);
+  margin-top: var(--space-l);
+  margin-bottom: var(--space-s);
+}
+
+.docs-article p {
+  margin-bottom: var(--space-l);
+}
+
+.docs-article .lead {
+  font-size: var(--font-size-l);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-xl);
+}
+
+.docs-article ul,
+.docs-article ol {
+  margin-bottom: var(--space-l);
+  padding-left: var(--space-xl);
+}
+
+.docs-article li {
+  margin-bottom: var(--space-s);
+}
+
+/* ============================================
+   Code Blocks in Docs
+   ============================================ */
+
+.docs-article .card-code-block {
+  margin: var(--space-l) 0;
+}
+
+.docs-article code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background-color: var(--color-surface);
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  color: var(--color-accent);
+}
+
+.docs-article pre code {
+  background: none;
+  padding: 0;
+  color: var(--color-code-text);
+}
+
+/* ============================================
+   Tables
+   ============================================ */
+
+.docs-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space-l) 0;
+  font-size: var(--font-size-s);
+}
+
+.docs-table th,
+.docs-table td {
+  padding: var(--space-m);
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.docs-table th {
+  font-weight: 600;
+  color: var(--color-text-primary);
+  background-color: var(--color-surface);
+}
+
+.docs-table td {
+  color: var(--color-text-secondary);
+}
+
+.docs-table code {
+  font-size: 0.85em;
+}
+
+/* ============================================
+   Callouts
+   ============================================ */
+
+.callout {
+  display: flex;
+  gap: var(--space-m);
+  padding: var(--space-l);
+  border-radius: var(--radius-m);
+  margin: var(--space-l) 0;
+}
+
+.callout-icon {
+  font-size: var(--font-size-l);
+  flex-shrink: 0;
+}
+
+.callout-content h4 {
+  margin: 0 0 var(--space-s) 0;
+  font-size: var(--font-size-s);
+}
+
+.callout-content p {
+  margin: 0;
+  font-size: var(--font-size-s);
+}
+
+.callout-info {
+  background-color: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.callout-info .callout-icon {
+  color: var(--color-accent);
+}
+
+.callout-info .callout-content h4 {
+  color: var(--color-accent);
+}
+
+.callout-tip {
+  background-color: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.callout-tip .callout-icon {
+  color: var(--color-success);
+}
+
+.callout-tip .callout-content h4 {
+  color: var(--color-success);
+}
+
+.callout-warning {
+  background-color: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.callout-warning .callout-icon {
+  color: var(--color-warning);
+}
+
+.callout-warning .callout-content h4 {
+  color: var(--color-warning);
+}
+
+/* ============================================
+   Badges
+   ============================================ */
+
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  border-radius: var(--radius-s);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.badge-critical {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: var(--color-error);
+}
+
+.badge-important {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: var(--color-warning);
+}
+
+.badge-nice {
+  background-color: rgba(99, 102, 241, 0.15);
+  color: var(--color-accent);
+}
+
+/* ============================================
+   Philosophy Grid
+   ============================================ */
+
+.philosophy-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: var(--space-l);
+  margin: var(--space-xl) 0;
+}
+
+@media (min-width: 640px) {
+  .philosophy-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.philosophy-card {
+  padding: var(--space-xl);
+  background-color: var(--color-surface);
+  border-radius: var(--radius-m);
+  border: 1px solid var(--color-border);
+}
+
+.philosophy-icon {
+  font-size: var(--font-size-xl);
+  color: var(--color-accent);
+  margin-bottom: var(--space-m);
+}
+
+.philosophy-card h4 {
+  margin: 0 0 var(--space-s) 0;
+  color: var(--color-text-primary);
+}
+
+.philosophy-card p {
+  margin: 0;
+  font-size: var(--font-size-s);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   Blockquotes
+   ============================================ */
+
+.highlight-quote {
+  font-size: var(--font-size-l);
+  font-style: italic;
+  color: var(--color-accent);
+  padding: var(--space-xl);
+  margin: var(--space-xl) 0;
+  background: linear-gradient(135deg, var(--color-accent-lighter), transparent);
+  border-left: 4px solid var(--color-accent);
+  border-radius: var(--radius-m);
+}
+
+/* ============================================
+   Navigation Footer
+   ============================================ */
+
+.docs-nav-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-l);
+  margin-top: var(--space-xxl);
+  padding-top: var(--space-xl);
+  border-top: 1px solid var(--color-border);
+}
+
+.nav-prev,
+.nav-next {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-l);
+  background-color: var(--color-surface);
+  border-radius: var(--radius-m);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  flex: 1;
+  max-width: 300px;
+}
+
+.nav-prev:hover,
+.nav-next:hover {
+  background-color: var(--color-surface-hover);
+  border-color: var(--color-accent);
+}
+
+.nav-next {
+  text-align: right;
+  margin-left: auto;
+}
+
+.nav-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.nav-title {
+  font-weight: 600;
+  color: var(--color-accent);
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+.nav-next .nav-title {
+  justify-content: flex-end;
+}
+
+/* ============================================
+   Mobile Sidebar Overlay
+   ============================================ */
+
+@media (max-width: 1023px) {
+  .docs-sidebar.open::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+  }
+}
+
+/* ============================================
+   Changelog Styles
+   ============================================ */
+
+.version-section {
+  margin-bottom: var(--space-xxl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.version-section:last-child {
+  border-bottom: none;
+}
+
+.version-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-m);
+  margin-bottom: var(--space-l);
+  flex-wrap: wrap;
+}
+
+.version-header h2 {
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: var(--font-size-xl);
+  color: var(--color-text-primary);
+}
+
+.version-date {
+  font-size: var(--font-size-s);
+  color: var(--color-text-tertiary);
+  background-color: var(--color-surface);
+  padding: var(--space-xs) var(--space-m);
+  border-radius: var(--radius-s);
+}
+
+.version-badge {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  padding: var(--space-xs) var(--space-m);
+  border-radius: var(--radius-s);
+  background-color: var(--color-accent);
+  color: white;
+}
+
+.version-badge.major {
+  background-color: var(--color-warning);
+}
+
+.version-description {
+  font-size: var(--font-size-m);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-l);
+  font-style: italic;
+}
+
+.changelog-category {
+  margin-bottom: var(--space-l);
+  padding: var(--space-l);
+  background-color: var(--color-surface);
+  border-radius: var(--radius-m);
+  border-left: 4px solid var(--color-border);
+}
+
+.changelog-category h3 {
+  margin: 0 0 var(--space-m) 0;
+  font-size: var(--font-size-m);
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+.changelog-category h3 i {
+  font-size: var(--font-size-s);
+}
+
+.changelog-category h4 {
+  margin: var(--space-l) 0 var(--space-s) 0;
+  font-size: var(--font-size-s);
+  color: var(--color-text-secondary);
+}
+
+.changelog-category ul {
+  margin: 0;
+  padding-left: var(--space-xl);
+}
+
+.changelog-category li {
+  margin-bottom: var(--space-s);
+}
+
+.changelog-category.added {
+  border-left-color: var(--color-success);
+}
+
+.changelog-category.added h3 {
+  color: var(--color-success);
+}
+
+.changelog-category.improved {
+  border-left-color: var(--color-accent);
+}
+
+.changelog-category.improved h3 {
+  color: var(--color-accent);
+}
+
+.changelog-category.changed {
+  border-left-color: var(--color-warning);
+}
+
+.changelog-category.changed h3 {
+  color: var(--color-warning);
+}
+
+.changelog-category.fixed {
+  border-left-color: var(--color-error);
+}
+
+.changelog-category.fixed h3 {
+  color: var(--color-error);
+}
+
+.version-summary {
+  margin-top: var(--space-l);
+}
+
+.version-summary h4 {
+  margin-bottom: var(--space-m);
+}
+
+.version-summary table {
+  width: 100%;
+  max-width: 400px;
+  border-collapse: collapse;
+  font-size: var(--font-size-s);
+}
+
+.version-summary th,
+.version-summary td {
+  padding: var(--space-s) var(--space-m);
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.version-summary th {
+  font-weight: 600;
+  background-color: var(--color-surface);
+}
+
+.version-summary .positive {
+  color: var(--color-success);
+  font-weight: 600;
+}
+
+.version-summary .negative {
+  color: var(--color-error);
+  font-weight: 600;
+}

plugins/compounding-engineering/docs/index.html

@@ -0,0 +1,948 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Compounding Engineering - AI-Powered Development Tools for Claude Code</title>
+  <meta content="AI-powered development tools that get smarter with every use. 23 agents, 16 commands, 11 skills, two MCP servers." name="description" />
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="Compounding Engineering" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:title" content="Compounding Engineering - AI Development Tools" />
+  <meta property="og:description" content="AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last." />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Compounding Engineering" />
+  <meta name="twitter:description" content="AI-powered development tools for Claude Code" />
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link href="css/style.css" rel="stylesheet" type="text/css" />
+  <script src="js/main.js" type="text/javascript" defer></script>
+</head>
+
+<body>
+  <div class="background-gradient"></div>
+  <div class="page-container">
+    <header class="nav-container">
+      <a href="index.html" class="nav-brand">
+        <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+        <span class="logo-text">Compounding Engineering</span>
+      </a>
+      <nav role="navigation" class="nav-menu" data-navigation>
+        <a href="#agents" class="nav-link">Agents</a>
+        <a href="#commands" class="nav-link">Commands</a>
+        <a href="#skills" class="nav-link">Skills</a>
+        <a href="#mcp-servers" class="nav-link">MCP Servers</a>
+        <a href="pages/getting-started.html" class="nav-link">Docs</a>
+        <div class="button-group stacked margin-top-l mobile-only">
+          <a href="#install" class="button primary">Install Plugin</a>
+        </div>
+      </nav>
+      <div class="button-group">
+        <a href="https://github.com/EveryInc/every-marketplace" class="button ghost compact hide-on-mobile">
+          <div class="fa-brands fa-github icon l"></div>
+        </a>
+        <a href="#install" class="button primary compact">Install</a>
+        <button class="button ghost compact nav-hamburger" data-mobile-toggle aria-label="Show menu">
+          <span class="fa-solid fa-bars icon m"></span>
+        </button>
+      </div>
+    </header>
+
+    <main>
+      <!-- Hero Section -->
+      <section class="hero-section">
+        <div class="hero-decoration"></div>
+        <div class="heading hero centered">
+          <a href="https://github.com/EveryInc/every-marketplace/releases" class="eyebrow">
+            <i class="fa-solid fa-rocket"></i> Version 2.6.0 released!
+          </a>
+          <h1 class="balanced" style="margin-bottom: 32px;">
+            AI-Powered Development Tools That Get Smarter With Every Use
+          </h1>
+          <p class="paragraph m secondary balanced" style="margin-bottom: 32px;">
+            Make each unit of engineering work easier than the last. 23 specialized agents, 16 powerful commands,
+            11 intelligent skills, and two MCP servers for code review, research, design, and workflow automation.
+          </p>
+          <div class="button-group margin-paragraph centered">
+            <a href="#install" class="button primary">
+              <i class="fa-solid fa-download"></i> Install Plugin
+            </a>
+            <a href="pages/getting-started.html" class="button tertiary">
+              <i class="fa-solid fa-book"></i> Read the Docs
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <!-- Stats Section -->
+      <section class="stats-section">
+        <div class="stats-container">
+          <div class="stat-card">
+            <div class="stat-icon"><i class="fa-solid fa-users-gear"></i></div>
+            <div class="stat-number">23</div>
+            <div class="stat-label">Specialized Agents</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon"><i class="fa-solid fa-terminal"></i></div>
+            <div class="stat-number">16</div>
+            <div class="stat-label">Slash Commands</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
+            <div class="stat-number">11</div>
+            <div class="stat-label">Intelligent Skills</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon"><i class="fa-solid fa-server"></i></div>
+            <div class="stat-number">2</div>
+            <div class="stat-label">MCP Servers</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Philosophy Section -->
+      <section id="philosophy" class="philosophy-section">
+        <div class="heading centered">
+          <h2 class="no-top-margin" style="font-size: 42px; margin-bottom: 16px;">The Compounding Engineering Philosophy</h2>
+          <p class="paragraph l secondary balanced" style="font-size: 21px; line-height: 1.6; font-weight: 500;">
+            Every unit of engineering work should make subsequent units of work <em style="color: var(--color-accent); font-style: normal;">easier</em>&mdash;not harder.
+          </p>
+        </div>
+
+        <!-- Philosophy Quote -->
+        <div class="philosophy-quote">
+          <blockquote>
+            "Most engineering creates linear value: you build a feature, it works, done.
+            Compounding engineering creates exponential value: each solved problem teaches the system,
+            each pattern becomes reusable, each review strengthens future reviews."
+          </blockquote>
+        </div>
+
+        <!-- The Four Pillars -->
+        <div class="philosophy-pillars">
+          <div class="pillar">
+            <div class="pillar-icon"><i class="fa-solid fa-brain"></i></div>
+            <div class="pillar-content">
+              <h3>Plan</h3>
+              <p class="pillar-tagline">Understand before you build</p>
+              <p class="pillar-description">
+                Before writing a single line of code, gather context. Research agents explore
+                documentation, analyze git history, and find best practices. The <code>/workflows:plan</code>
+                command orchestrates three research agents in parallel to create comprehensive implementation plans.
+              </p>
+              <div class="pillar-tools">
+                <span class="tool-tag">framework-docs-researcher</span>
+                <span class="tool-tag">best-practices-researcher</span>
+                <span class="tool-tag">repo-research-analyst</span>
+                <span class="tool-tag">git-history-analyzer</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="pillar">
+            <div class="pillar-icon"><i class="fa-solid fa-robot"></i></div>
+            <div class="pillar-content">
+              <h3>Delegate</h3>
+              <p class="pillar-tagline">Leverage specialized expertise</p>
+              <p class="pillar-description">
+                Each agent brings deep domain knowledge. The <code>kieran-rails-reviewer</code> knows Rails
+                conventions like an expert. The <code>security-sentinel</code> catches OWASP vulnerabilities.
+                The <code>/workflows:work</code> command executes plans while maintaining quality gates.
+              </p>
+              <div class="pillar-tools">
+                <span class="tool-tag">24 specialized agents</span>
+                <span class="tool-tag">/workflows:work</span>
+                <span class="tool-tag">dhh-ruby-style skill</span>
+                <span class="tool-tag">git-worktree skill</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="pillar">
+            <div class="pillar-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
+            <div class="pillar-content">
+              <h3>Assess</h3>
+              <p class="pillar-tagline">Multiple perspectives, comprehensive coverage</p>
+              <p class="pillar-description">
+                The <code>/workflows:review</code> command launches 12 or more review agents in parallel: security,
+                performance, architecture, data integrity, patterns, and more. Findings are categorized by
+                severity (P1/P2/P3) and stored as actionable todo files.
+              </p>
+              <div class="pillar-tools">
+                <span class="tool-tag">security-sentinel</span>
+                <span class="tool-tag">performance-oracle</span>
+                <span class="tool-tag">architecture-strategist</span>
+                <span class="tool-tag">data-integrity-guardian</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="pillar">
+            <div class="pillar-icon"><i class="fa-solid fa-book"></i></div>
+            <div class="pillar-content">
+              <h3>Codify</h3>
+              <p class="pillar-tagline">Turn solutions into knowledge</p>
+              <p class="pillar-description">
+                Every solved problem should teach the system. The <code>/workflows:codify</code> command
+                captures solutions as searchable documentation with YAML frontmatter for fast lookup.
+              </p>
+              <div class="pillar-tools">
+                <span class="tool-tag">/workflows:codify</span>
+                <span class="tool-tag">codify-docs skill</span>
+                <span class="tool-tag">file-todos skill</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </section>
+
+      <!-- Agents Section -->
+      <section id="agents">
+        <div class="heading">
+          <h2 class="no-top-margin">
+            <i class="fa-solid fa-users-gear color-accent"></i> 23 Specialized Agents
+          </h2>
+          <p class="paragraph m secondary">
+            Each agent brings deep expertise in a specific domain. Run them individually or orchestrate
+            multiple agents in parallel for comprehensive analysis.
+          </p>
+        </div>
+
+        <!-- Review Agents -->
+        <div class="agent-category">
+          <h3><i class="fa-solid fa-code-pull-request"></i> Review Agents (10)</h3>
+          <div class="grid columns-2">
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">kieran-rails-reviewer</span>
+                <span class="agent-badge">Rails</span>
+              </div>
+              <p class="agent-description">Super senior Rails developer with impeccable taste. Applies strict conventions for Turbo Streams, namespacing, and the "duplication over complexity" philosophy.</p>
+              <code class="agent-usage">claude agent kieran-rails-reviewer</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">dhh-rails-reviewer</span>
+                <span class="agent-badge">Rails</span>
+              </div>
+              <p class="agent-description">Reviews code from DHH's perspective. Focus on Rails conventions, simplicity, and avoiding over-engineering.</p>
+              <code class="agent-usage">claude agent dhh-rails-reviewer</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">kieran-python-reviewer</span>
+                <span class="agent-badge">Python</span>
+              </div>
+              <p class="agent-description">Python code review with strict conventions. PEP 8 compliance, type hints, and Pythonic patterns.</p>
+              <code class="agent-usage">claude agent kieran-python-reviewer</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">kieran-typescript-reviewer</span>
+                <span class="agent-badge">TypeScript</span>
+              </div>
+              <p class="agent-description">TypeScript review with focus on type safety, modern patterns, and clean architecture.</p>
+              <code class="agent-usage">claude agent kieran-typescript-reviewer</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">security-sentinel</span>
+                <span class="agent-badge critical">Security</span>
+              </div>
+              <p class="agent-description">Security audits and vulnerability assessments. OWASP top 10, injection attacks, authentication flaws.</p>
+              <code class="agent-usage">claude agent security-sentinel</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">performance-oracle</span>
+                <span class="agent-badge">Performance</span>
+              </div>
+              <p class="agent-description">Performance analysis and optimization recommendations. N+1 queries, caching strategies, bottleneck identification.</p>
+              <code class="agent-usage">claude agent performance-oracle</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">architecture-strategist</span>
+                <span class="agent-badge">Architecture</span>
+              </div>
+              <p class="agent-description">Analyze architectural decisions, compliance, and system design patterns.</p>
+              <code class="agent-usage">claude agent architecture-strategist</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">data-integrity-guardian</span>
+                <span class="agent-badge critical">Data</span>
+              </div>
+              <p class="agent-description">Database migrations and data integrity review. Schema changes, foreign keys, data consistency.</p>
+              <code class="agent-usage">claude agent data-integrity-guardian</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">pattern-recognition-specialist</span>
+                <span class="agent-badge">Patterns</span>
+              </div>
+              <p class="agent-description">Analyze code for patterns and anti-patterns. Design patterns, code smells, refactoring opportunities.</p>
+              <code class="agent-usage">claude agent pattern-recognition-specialist</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">code-simplicity-reviewer</span>
+                <span class="agent-badge">Quality</span>
+              </div>
+              <p class="agent-description">Final pass for simplicity and minimalism. Remove unnecessary complexity, improve readability.</p>
+              <code class="agent-usage">claude agent code-simplicity-reviewer</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Research Agents -->
+        <div class="agent-category">
+          <h3><i class="fa-solid fa-microscope"></i> Research Agents (four)</h3>
+          <div class="grid columns-2">
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">framework-docs-researcher</span>
+                <span class="agent-badge">Research</span>
+              </div>
+              <p class="agent-description">Research framework documentation and best practices. Find official guidance and community patterns.</p>
+              <code class="agent-usage">claude agent framework-docs-researcher</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">best-practices-researcher</span>
+                <span class="agent-badge">Research</span>
+              </div>
+              <p class="agent-description">Gather external best practices and examples from the community and industry standards.</p>
+              <code class="agent-usage">claude agent best-practices-researcher</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">git-history-analyzer</span>
+                <span class="agent-badge">Git</span>
+              </div>
+              <p class="agent-description">Analyze git history and code evolution. Understand how code has changed and why.</p>
+              <code class="agent-usage">claude agent git-history-analyzer</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">repo-research-analyst</span>
+                <span class="agent-badge">Research</span>
+              </div>
+              <p class="agent-description">Research repository structure and conventions. Understand project patterns and organization.</p>
+              <code class="agent-usage">claude agent repo-research-analyst</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Design Agents -->
+        <div class="agent-category">
+          <h3><i class="fa-solid fa-palette"></i> Design Agents (three)</h3>
+          <div class="grid columns-3">
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">design-iterator</span>
+                <span class="agent-badge">Design</span>
+              </div>
+              <p class="agent-description">Iteratively refine UI through systematic design iterations with screenshots and feedback loops.</p>
+              <code class="agent-usage">claude agent design-iterator</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">figma-design-sync</span>
+                <span class="agent-badge">Figma</span>
+              </div>
+              <p class="agent-description">Synchronize web implementations with Figma designs. Pixel-perfect matching.</p>
+              <code class="agent-usage">claude agent figma-design-sync</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">design-implementation-reviewer</span>
+                <span class="agent-badge">Review</span>
+              </div>
+              <p class="agent-description">Verify UI implementations match Figma designs. Catch visual regressions.</p>
+              <code class="agent-usage">claude agent design-implementation-reviewer</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Workflow Agents -->
+        <div class="agent-category">
+          <h3><i class="fa-solid fa-gears"></i> Workflow Agents (five)</h3>
+          <div class="grid columns-2">
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">bug-reproduction-validator</span>
+                <span class="agent-badge">Bugs</span>
+              </div>
+              <p class="agent-description">Systematically reproduce and validate bug reports. Create minimal reproduction cases.</p>
+              <code class="agent-usage">claude agent bug-reproduction-validator</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">pr-comment-resolver</span>
+                <span class="agent-badge">PR</span>
+              </div>
+              <p class="agent-description">Address PR comments and implement fixes. Batch process review feedback.</p>
+              <code class="agent-usage">claude agent pr-comment-resolver</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">lint</span>
+                <span class="agent-badge">Quality</span>
+              </div>
+              <p class="agent-description">Run linting and code quality checks on Ruby and ERB files.</p>
+              <code class="agent-usage">claude agent lint</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">spec-flow-analyzer</span>
+                <span class="agent-badge">Testing</span>
+              </div>
+              <p class="agent-description">Analyze user flows and identify gaps in specifications.</p>
+              <code class="agent-usage">claude agent spec-flow-analyzer</code>
+            </div>
+            <div class="agent-card">
+              <div class="agent-header">
+                <span class="agent-name">every-style-editor</span>
+                <span class="agent-badge">Content</span>
+              </div>
+              <p class="agent-description">Edit content to conform to Every's style guide.</p>
+              <code class="agent-usage">claude agent every-style-editor</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Docs Agent -->
+        <div class="agent-category">
+          <h3><i class="fa-solid fa-file-lines"></i> Documentation Agent (one)</h3>
+          <div class="grid">
+            <div class="agent-card full-width">
+              <div class="agent-header">
+                <span class="agent-name">ankane-readme-writer</span>
+                <span class="agent-badge">Docs</span>
+              </div>
+              <p class="agent-description">Create READMEs following Ankane-style template for Ruby gems. Clean, concise, comprehensive documentation that gets straight to the point.</p>
+              <code class="agent-usage">claude agent ankane-readme-writer</code>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Commands Section -->
+      <section id="commands">
+        <div class="heading">
+          <h2 class="no-top-margin">
+            <i class="fa-solid fa-terminal color-accent"></i> 16 Powerful Commands
+          </h2>
+          <p class="paragraph m secondary">
+            Slash commands for common workflows. From code review to bug triage,
+            these commands automate complex multi-step processes.
+          </p>
+        </div>
+
+        <!-- Workflow Commands -->
+        <div class="command-category">
+          <h3><i class="fa-solid fa-arrows-spin"></i> Workflow Commands</h3>
+          <div class="grid columns-2">
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/workflows:plan</code>
+                <span class="command-type-badge">core</span>
+              </div>
+              <p class="command-description">Create comprehensive implementation plans with research agents and stakeholder analysis.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/workflows:review</code>
+                <span class="command-type-badge">core</span>
+              </div>
+              <p class="command-description">Run exhaustive code reviews using 12 or more parallel agents, ultra-thinking, and worktrees.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/workflows:work</code>
+                <span class="command-type-badge">core</span>
+              </div>
+              <p class="command-description">Execute work items systematically with progress tracking and validation.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/workflows:codify</code>
+                <span class="command-type-badge">core</span>
+              </div>
+              <p class="command-description">Document solved problems for the knowledge base. Turn learnings into reusable patterns.</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Utility Commands -->
+        <div class="command-category">
+          <h3><i class="fa-solid fa-wrench"></i> Utility Commands</h3>
+          <div class="grid columns-3">
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/changelog</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Create engaging changelogs for recent merges.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/create-agent-skill</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Create or edit Claude Code skills with expert guidance.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/generate_command</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Generate new slash commands from templates.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/heal-skill</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Fix skill documentation issues automatically.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/plan_review</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Multi-agent plan review in parallel.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/prime</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Prime/setup command for project initialization.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/report-bug</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Report bugs in the plugin with structured templates.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/reproduce-bug</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Reproduce bugs using logs and console output.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/triage</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Triage and prioritize issues interactively.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/resolve_parallel</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Resolve TODO comments in parallel.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/resolve_pr_parallel</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Resolve PR comments in parallel.</p>
+            </div>
+            <div class="command-card">
+              <div class="command-header">
+                <code class="command-name">/resolve_todo_parallel</code>
+                <span class="command-type-badge">util</span>
+              </div>
+              <p class="command-description">Resolve file-based todos in parallel.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Skills Section -->
+      <section id="skills">
+        <div class="heading">
+          <h2 class="no-top-margin">
+            <i class="fa-solid fa-wand-magic-sparkles color-accent"></i> 11 Intelligent Skills
+          </h2>
+          <p class="paragraph m secondary">
+            Skills provide deep domain expertise that Claude Code can invoke on-demand.
+            From Ruby gem patterns to image generation.
+          </p>
+        </div>
+
+        <!-- Development Tools -->
+        <div class="skill-category">
+          <h3><i class="fa-solid fa-code"></i> Development Tools</h3>
+          <div class="grid columns-2">
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">andrew-kane-gem-writer</span>
+                <span class="skill-badge">Ruby</span>
+              </div>
+              <p class="skill-description">Write Ruby gems following Andrew Kane's patterns. Clean APIs, smart defaults, comprehensive testing.</p>
+              <code class="skill-usage">skill: andrew-kane-gem-writer</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">dhh-ruby-style</span>
+                <span class="skill-badge">Rails</span>
+              </div>
+              <p class="skill-description">Write Ruby/Rails code in DHH's 37signals style. Convention over configuration, beautiful code.</p>
+              <code class="skill-usage">skill: dhh-ruby-style</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">dspy-ruby</span>
+                <span class="skill-badge">AI</span>
+              </div>
+              <p class="skill-description">Build type-safe LLM applications with DSPy.rb. Structured prompting, optimization, providers.</p>
+              <code class="skill-usage">skill: dspy-ruby</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">frontend-design</span>
+                <span class="skill-badge">Design</span>
+              </div>
+              <p class="skill-description">Create production-grade frontend interfaces with modern CSS, responsive design, accessibility.</p>
+              <code class="skill-usage">skill: frontend-design</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">create-agent-skills</span>
+                <span class="skill-badge">Meta</span>
+              </div>
+              <p class="skill-description">Expert guidance for creating Claude Code skills. Templates, best practices, validation.</p>
+              <code class="skill-usage">skill: create-agent-skills</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">skill-creator</span>
+                <span class="skill-badge">Meta</span>
+              </div>
+              <p class="skill-description">Guide for creating effective Claude Code skills with structured workflows.</p>
+              <code class="skill-usage">skill: skill-creator</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">codify-docs</span>
+                <span class="skill-badge">Docs</span>
+              </div>
+              <p class="skill-description">Capture solved problems as categorized documentation with YAML schema.</p>
+              <code class="skill-usage">skill: codify-docs</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Content & Workflow -->
+        <div class="skill-category">
+          <h3><i class="fa-solid fa-pen-fancy"></i> Content & Workflow</h3>
+          <div class="grid columns-3">
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">every-style-editor</span>
+                <span class="skill-badge">Content</span>
+              </div>
+              <p class="skill-description">Review copy for Every's style guide compliance.</p>
+              <code class="skill-usage">skill: every-style-editor</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">file-todos</span>
+                <span class="skill-badge">Workflow</span>
+              </div>
+              <p class="skill-description">File-based todo tracking system with priorities and status.</p>
+              <code class="skill-usage">skill: file-todos</code>
+            </div>
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-name">git-worktree</span>
+                <span class="skill-badge">Git</span>
+              </div>
+              <p class="skill-description">Manage Git worktrees for parallel development on multiple branches.</p>
+              <code class="skill-usage">skill: git-worktree</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Image Generation -->
+        <div class="skill-category">
+          <h3><i class="fa-solid fa-image"></i> Image Generation</h3>
+          <div class="grid">
+            <div class="skill-card featured full-width">
+              <div class="skill-header">
+                <span class="skill-name">gemini-imagegen</span>
+                <span class="skill-badge highlight">AI Images</span>
+              </div>
+              <p class="skill-description">
+                Generate and edit images using Google's Gemini API. Text-to-image, image editing,
+                multi-turn refinement, and composition from up to 14 reference images.
+              </p>
+              <div class="skill-features">
+                <div class="feature-item">
+                  <i class="fa-solid fa-check"></i> Text-to-image generation
+                </div>
+                <div class="feature-item">
+                  <i class="fa-solid fa-check"></i> Image editing & manipulation
+                </div>
+                <div class="feature-item">
+                  <i class="fa-solid fa-check"></i> Multi-turn refinement
+                </div>
+                <div class="feature-item">
+                  <i class="fa-solid fa-check"></i> Multiple reference images (up to 14)
+                </div>
+                <div class="feature-item">
+                  <i class="fa-solid fa-check"></i> Google Search grounding (Pro)
+                </div>
+              </div>
+              <code class="skill-usage">skill: gemini-imagegen</code>
+              <p class="skill-note">Requires: GEMINI_API_KEY environment variable</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- MCP Servers Section -->
+      <section id="mcp-servers">
+        <div class="heading">
+          <h2 class="no-top-margin">
+            <i class="fa-solid fa-server color-accent"></i> Two MCP Servers
+          </h2>
+          <p class="paragraph m secondary">
+            Model Context Protocol servers extend Claude Code's capabilities with
+            browser automation and framework documentation lookup.
+          </p>
+        </div>
+
+        <div class="grid columns-2">
+          <div class="mcp-card mcp-card-browser">
+            <div class="mcp-header">
+              <i class="fa-brands fa-chrome mcp-icon"></i>
+              <span class="mcp-name">Playwright</span>
+            </div>
+            <p class="mcp-description">Browser automation for testing, screenshots, and web interactions.</p>
+            <div class="mcp-tools">
+              <h4>Tools Provided: <span class="tools-count">6 tools</span></h4>
+              <ul>
+                <li><code>browser_navigate</code> - Navigate to URLs</li>
+                <li><code>browser_take_screenshot</code> - Take screenshots</li>
+                <li><code>browser_click</code> - Click elements</li>
+                <li><code>browser_fill_form</code> - Fill form fields</li>
+                <li><code>browser_snapshot</code> - Get accessibility snapshot</li>
+                <li><code>browser_evaluate</code> - Execute JavaScript</li>
+              </ul>
+            </div>
+          </div>
+          <div class="mcp-card mcp-card-docs">
+            <div class="mcp-header">
+              <i class="fa-solid fa-book-open mcp-icon"></i>
+              <span class="mcp-name">Context7</span>
+            </div>
+            <p class="mcp-description">Framework documentation lookup for more than 100 frameworks.</p>
+            <div class="mcp-tools">
+              <h4>Tools Provided: <span class="tools-count">2 tools</span></h4>
+              <ul>
+                <li><code>resolve-library-id</code> - Find library ID</li>
+                <li><code>get-library-docs</code> - Get documentation</li>
+              </ul>
+              <p class="mcp-note">Supports: Rails, React, Next.js, Vue, Django, Laravel, and more than 100 others</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Installation Section -->
+      <section id="install" class="install-section">
+        <div class="heading centered">
+          <h2 class="no-top-margin">Get Started in Seconds</h2>
+          <p class="paragraph m secondary">
+            Install the plugin and start using AI-powered development tools immediately.
+          </p>
+        </div>
+
+        <div class="install-steps">
+          <div class="install-step">
+            <div class="step-number">1</div>
+            <div class="step-content">
+              <h3>Add the Marketplace</h3>
+              <div class="card-code-block">
+                <pre><code>claude /plugin marketplace add https://github.com/EveryInc/every-marketplace</code></pre>
+              </div>
+            </div>
+          </div>
+          <div class="install-step">
+            <div class="step-number">2</div>
+            <div class="step-content">
+              <h3>Install the Plugin</h3>
+              <div class="card-code-block">
+                <pre><code>claude /plugin install compounding-engineering</code></pre>
+              </div>
+            </div>
+          </div>
+          <div class="install-step">
+            <div class="step-number">3</div>
+            <div class="step-content">
+              <h3>Start Using</h3>
+              <div class="card-code-block">
+                <pre><code># Run a code review
+/workflows:review PR#123
+
+# Use an agent
+claude agent kieran-rails-reviewer
+
+# Invoke a skill
+skill: gemini-imagegen</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- FAQ Section -->
+      <section id="faq">
+        <div class="heading centered">
+          <h2 class="no-top-margin">Frequently Asked Questions</h2>
+        </div>
+        <div class="accordion-container">
+          <details class="accordion-item" name="faq">
+            <summary class="accordion-toggle">
+              <p class="paragraph m bold">What is Compounding Engineering?</p>
+              <span class="accordion-chevron fa-solid fa-chevron-down"></span>
+            </summary>
+            <div class="accordion-content">
+              <p>
+                Compounding Engineering is a philosophy that every unit of engineering work should make subsequent
+                units easier&mdash;not harder. This plugin embodies that philosophy with tools that learn from patterns,
+                automate repetitive tasks, and build institutional knowledge.
+              </p>
+            </div>
+          </details>
+          <details class="accordion-item" name="faq">
+            <summary class="accordion-toggle">
+              <p class="paragraph m bold">How do agents differ from skills?</p>
+              <span class="accordion-chevron fa-solid fa-chevron-down"></span>
+            </summary>
+            <div class="accordion-content">
+              <p>
+                <strong>Agents</strong> are specialized personas that can be invoked to perform specific tasks
+                (e.g., code review, research). They're called with <code>claude agent [name]</code>.
+              </p>
+              <p>
+                <strong>Skills</strong> provide domain expertise that Claude Code can use on-demand. They include
+                reference materials, templates, and workflows. They're invoked with <code>skill: [name]</code>.
+              </p>
+            </div>
+          </details>
+          <details class="accordion-item" name="faq">
+            <summary class="accordion-toggle">
+              <p class="paragraph m bold">Why aren't MCP servers loading automatically?</p>
+              <span class="accordion-chevron fa-solid fa-chevron-down"></span>
+            </summary>
+            <div class="accordion-content">
+              <p>
+                This is a known issue. As a workaround, manually add the MCP servers to your
+                <code>.claude/settings.json</code> file. See the README for the exact configuration.
+              </p>
+            </div>
+          </details>
+          <details class="accordion-item" name="faq">
+            <summary class="accordion-toggle">
+              <p class="paragraph m bold">Can I use this with languages other than Ruby/Rails?</p>
+              <span class="accordion-chevron fa-solid fa-chevron-down"></span>
+            </summary>
+            <div class="accordion-content">
+              <p>
+                Yes! While many agents are specialized for Rails, we also have Python and TypeScript reviewers.
+                The workflow commands, research agents, and skills like gemini-imagegen work with any language.
+              </p>
+            </div>
+          </details>
+          <details class="accordion-item" name="faq">
+            <summary class="accordion-toggle">
+              <p class="paragraph m bold">How do I create my own agents or skills?</p>
+              <span class="accordion-chevron fa-solid fa-chevron-down"></span>
+            </summary>
+            <div class="accordion-content">
+              <p>
+                Use the <code>/create-agent-skill</code> command or the <code>create-agent-skills</code> skill
+                for expert guidance. The skill includes templates, best practices, and validation workflows.
+              </p>
+            </div>
+          </details>
+        </div>
+      </section>
+
+      <!-- CTA Section -->
+      <section class="promo-cta">
+        <div class="heading centered">
+          <span class="cta-badge"><i class="fa-solid fa-bolt"></i> Free & Open Source</span>
+          <h2>Transform Your Development Workflow in Minutes</h2>
+          <p class="paragraph m cta-subheading">
+            <strong>Install once. Compound forever.</strong> Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you—starting now.
+          </p>
+          <div class="button-group margin-paragraph centered">
+            <a href="#install" class="button primary cta-primary">
+              <i class="fa-solid fa-download"></i> Install Plugin Now
+              <span class="button-arrow">→</span>
+            </a>
+            <a href="https://github.com/EveryInc/every-marketplace" class="button tertiary cta-secondary">
+              <i class="fa-brands fa-github"></i> View on GitHub
+            </a>
+          </div>
+          <p class="cta-trust">Join 1,000+ developers building smarter with AI-powered workflows</p>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-menu">
+        <div>
+          <p class="paragraph s">
+            &copy; 2025 Every, Inc.<br />
+            Built with <a href="https://launchkit.evilmartians.io" target="_blank">LaunchKit</a> template by
+            <a href="https://evilmartians.com" target="_blank">Evil Martians</a>
+          </p>
+        </div>
+        <div>
+          <div class="link-list">
+            <a href="#agents" class="ui s">Agents</a>
+            <a href="#commands" class="ui s">Commands</a>
+            <a href="#skills" class="ui s">Skills</a>
+            <a href="pages/getting-started.html" class="ui s">Documentation</a>
+          </div>
+        </div>
+        <div>
+          <div class="link-list">
+            <a href="https://github.com/EveryInc/every-marketplace" class="icon-link ui s" target="_blank">
+              <div class="fa-brands fa-github icon m color-accent"></div>
+              <div class="pseudo-link">GitHub</div>
+            </a>
+            <a href="https://every.to" class="icon-link ui s" target="_blank">
+              <div class="fa-solid fa-globe icon m color-accent"></div>
+              <div class="pseudo-link">Every.to</div>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="link-list-horizontal">
+        <a href="https://every.to/legal/privacy" class="ui s tertiary">Privacy Policy</a>
+        <a href="https://every.to/legal/terms" class="ui s tertiary">Terms of Service</a>
+      </div>
+    </footer>
+  </div>
+</body>
+
+</html>

plugins/compounding-engineering/docs/js/main.js

@@ -0,0 +1,225 @@
+/**
+ * Compounding Engineering Documentation
+ * Main JavaScript functionality
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  initMobileNav();
+  initSmoothScroll();
+  initCopyCode();
+  initThemeToggle();
+});
+
+/**
+ * Mobile Navigation Toggle
+ */
+function initMobileNav() {
+  const mobileToggle = document.querySelector('[data-mobile-toggle]');
+  const navigation = document.querySelector('[data-navigation]');
+
+  if (!mobileToggle || !navigation) return;
+
+  mobileToggle.addEventListener('click', () => {
+    navigation.classList.toggle('open');
+    mobileToggle.classList.toggle('active');
+
+    // Update aria-expanded
+    const isOpen = navigation.classList.contains('open');
+    mobileToggle.setAttribute('aria-expanded', isOpen);
+  });
+
+  // Close menu when clicking outside
+  document.addEventListener('click', (event) => {
+    if (!mobileToggle.contains(event.target) && !navigation.contains(event.target)) {
+      navigation.classList.remove('open');
+      mobileToggle.classList.remove('active');
+      mobileToggle.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  // Close menu when clicking a nav link
+  navigation.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', () => {
+      navigation.classList.remove('open');
+      mobileToggle.classList.remove('active');
+      mobileToggle.setAttribute('aria-expanded', 'false');
+    });
+  });
+}
+
+/**
+ * Smooth Scroll for Anchor Links
+ */
+function initSmoothScroll() {
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+      const targetId = this.getAttribute('href');
+      if (targetId === '#') return;
+
+      const targetElement = document.querySelector(targetId);
+      if (!targetElement) return;
+
+      e.preventDefault();
+
+      const navHeight = document.querySelector('.nav-container')?.offsetHeight || 0;
+      const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 24;
+
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
+      });
+
+      // Update URL without jumping
+      history.pushState(null, null, targetId);
+    });
+  });
+}
+
+/**
+ * Copy Code Functionality
+ */
+function initCopyCode() {
+  document.querySelectorAll('.card-code-block').forEach(block => {
+    // Create copy button
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'copy-btn';
+    copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
+    copyBtn.setAttribute('aria-label', 'Copy code');
+    copyBtn.setAttribute('title', 'Copy to clipboard');
+
+    // Style the button
+    copyBtn.style.cssText = `
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      padding: 6px 10px;
+      background: rgba(255, 255, 255, 0.1);
+      border: none;
+      border-radius: 6px;
+      color: #94a3b8;
+      cursor: pointer;
+      opacity: 0;
+      transition: all 0.2s ease;
+      font-size: 14px;
+    `;
+
+    // Make parent relative for positioning
+    block.style.position = 'relative';
+    block.appendChild(copyBtn);
+
+    // Show/hide on hover
+    block.addEventListener('mouseenter', () => {
+      copyBtn.style.opacity = '1';
+    });
+
+    block.addEventListener('mouseleave', () => {
+      copyBtn.style.opacity = '0';
+    });
+
+    // Copy functionality
+    copyBtn.addEventListener('click', async () => {
+      const code = block.querySelector('code');
+      if (!code) return;
+
+      try {
+        await navigator.clipboard.writeText(code.textContent);
+        copyBtn.innerHTML = '<i class="fa-solid fa-check"></i>';
+        copyBtn.style.color = '#34d399';
+
+        setTimeout(() => {
+          copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
+          copyBtn.style.color = '#94a3b8';
+        }, 2000);
+      } catch (err) {
+        console.error('Failed to copy:', err);
+        copyBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
+        copyBtn.style.color = '#f87171';
+
+        setTimeout(() => {
+          copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
+          copyBtn.style.color = '#94a3b8';
+        }, 2000);
+      }
+    });
+  });
+}
+
+/**
+ * Theme Toggle (Light/Dark)
+ */
+function initThemeToggle() {
+  // Check for saved theme preference or default to dark
+  const savedTheme = localStorage.getItem('theme') || 'dark';
+  document.documentElement.className = `theme-${savedTheme}`;
+
+  // Create theme toggle button if it doesn't exist
+  const existingToggle = document.querySelector('[data-theme-toggle]');
+  if (existingToggle) {
+    existingToggle.addEventListener('click', toggleTheme);
+    updateThemeToggleIcon(existingToggle, savedTheme);
+  }
+}
+
+function toggleTheme() {
+  const html = document.documentElement;
+  const currentTheme = html.classList.contains('theme-dark') ? 'dark' : 'light';
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+  html.className = `theme-${newTheme}`;
+  localStorage.setItem('theme', newTheme);
+
+  const toggle = document.querySelector('[data-theme-toggle]');
+  if (toggle) {
+    updateThemeToggleIcon(toggle, newTheme);
+  }
+}
+
+function updateThemeToggleIcon(toggle, theme) {
+  const icon = toggle.querySelector('i');
+  if (icon) {
+    icon.className = theme === 'dark' ? 'fa-solid fa-sun' : 'fa-solid fa-moon';
+  }
+}
+
+/**
+ * Intersection Observer for Animation on Scroll
+ */
+function initScrollAnimations() {
+  const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, observerOptions);
+
+  document.querySelectorAll('.agent-card, .command-card, .skill-card, .mcp-card, .stat-card').forEach(card => {
+    card.style.opacity = '0';
+    card.style.transform = 'translateY(20px)';
+    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+    observer.observe(card);
+  });
+}
+
+// Add visible class styles
+const style = document.createElement('style');
+style.textContent = `
+  .agent-card.visible,
+  .command-card.visible,
+  .skill-card.visible,
+  .mcp-card.visible,
+  .stat-card.visible {
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize scroll animations after a short delay
+setTimeout(initScrollAnimations, 100);

plugins/compounding-engineering/docs/pages/agents.html

@@ -0,0 +1,667 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Agent Reference - Compounding Engineering</title>
+  <meta content="Complete reference for all 23 specialized AI agents in the Compounding Engineering plugin." name="description" />
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link href="../css/style.css" rel="stylesheet" type="text/css" />
+  <link href="../css/docs.css" rel="stylesheet" type="text/css" />
+  <script src="../js/main.js" type="text/javascript" defer></script>
+</head>
+
+<body>
+  <div class="background-gradient"></div>
+  <div class="docs-layout">
+    <aside class="docs-sidebar">
+      <div class="sidebar-header">
+        <a href="../index.html" class="nav-brand">
+          <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+          <span class="logo-text">CE Docs</span>
+        </a>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section">
+          <h3>Getting Started</h3>
+          <ul>
+            <li><a href="getting-started.html">Installation</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Reference</h3>
+          <ul>
+            <li><a href="agents.html" class="active">Agents (23)</a></li>
+            <li><a href="commands.html">Commands (13)</a></li>
+            <li><a href="skills.html">Skills (11)</a></li>
+            <li><a href="mcp-servers.html">MCP Servers (2)</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="changelog.html">Changelog</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>On This Page</h3>
+          <ul>
+            <li><a href="#review-agents">Review (10)</a></li>
+            <li><a href="#research-agents">Research (4)</a></li>
+            <li><a href="#workflow-agents">Workflow (5)</a></li>
+            <li><a href="#design-agents">Design (3)</a></li>
+            <li><a href="#docs-agents">Docs (1)</a></li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
+
+    <main class="docs-content">
+      <div class="docs-header">
+        <nav class="breadcrumb">
+          <a href="../index.html">Home</a>
+          <span>/</span>
+          <a href="getting-started.html">Docs</a>
+          <span>/</span>
+          <span>Agents</span>
+        </nav>
+        <button class="mobile-menu-toggle" data-sidebar-toggle>
+          <i class="fa-solid fa-bars"></i>
+        </button>
+      </div>
+
+      <article class="docs-article">
+        <h1><i class="fa-solid fa-users-gear color-accent"></i> Agent Reference</h1>
+        <p class="lead">
+          Complete documentation for all 23 specialized AI agents. Each agent brings deep expertise
+          in a specific domain and can be invoked individually or orchestrated together.
+        </p>
+
+        <div class="usage-box">
+          <h3>How to Use Agents</h3>
+          <div class="card-code-block">
+            <pre><code># Basic invocation
+claude agent [agent-name]
+
+# With a specific message
+claude agent [agent-name] "Your message here"
+
+# Examples
+claude agent kieran-rails-reviewer
+claude agent security-sentinel "Audit the payment flow"</code></pre>
+          </div>
+        </div>
+
+        <!-- Review Agents -->
+        <section id="review-agents">
+          <h2><i class="fa-solid fa-code-pull-request"></i> Review Agents (10)</h2>
+          <p>Code review agents that examine changes from multiple perspectives: conventions, security, performance, architecture, and quality.</p>
+
+          <div class="agent-detail" id="kieran-rails-reviewer">
+            <div class="agent-detail-header">
+              <h3>kieran-rails-reviewer</h3>
+              <span class="agent-badge">Rails</span>
+            </div>
+            <p class="agent-detail-description">
+              Super senior Rails developer with impeccable taste and an exceptionally high bar for Rails code quality.
+              Reviews with strict conventions while being pragmatic on new isolated code.
+            </p>
+            <h4>Key Principles</h4>
+            <ul>
+              <li><strong>Existing Code Modifications</strong> - Very strict. Added complexity needs strong justification.</li>
+              <li><strong>New Code</strong> - Pragmatic. If it's isolated and works, it's acceptable.</li>
+              <li><strong>Turbo Streams</strong> - Simple turbo streams MUST be inline arrays in controllers.</li>
+              <li><strong>Testing as Quality</strong> - Hard-to-test code = poor structure that needs refactoring.</li>
+              <li><strong>Naming (5-Second Rule)</strong> - Must understand what a view/component does in 5 seconds from its name.</li>
+              <li><strong>Namespacing</strong> - Always use <code>class Module::ClassName</code> pattern.</li>
+              <li><strong>Duplication > Complexity</strong> - Simple duplicated code is better than complex DRY abstractions.</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent kieran-rails-reviewer "Review the UserController"</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="dhh-rails-reviewer">
+            <div class="agent-detail-header">
+              <h3>dhh-rails-reviewer</h3>
+              <span class="agent-badge">Rails</span>
+            </div>
+            <p class="agent-detail-description">
+              Brutally honest Rails code review from David Heinemeier Hansson's perspective.
+              Focuses on Rails conventions, simplicity, and avoiding over-engineering.
+            </p>
+            <h4>Key Focus Areas</h4>
+            <ul>
+              <li>Identifies deviations from Rails conventions</li>
+              <li>Spots JavaScript framework patterns infiltrating Rails</li>
+              <li>Tears apart unnecessary abstractions</li>
+              <li>Challenges overengineering and microservices mentality</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent dhh-rails-reviewer</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="kieran-python-reviewer">
+            <div class="agent-detail-header">
+              <h3>kieran-python-reviewer</h3>
+              <span class="agent-badge">Python</span>
+            </div>
+            <p class="agent-detail-description">
+              Reviews Python code with an exceptionally high quality bar. Enforces type hints, Pythonic patterns,
+              and modern Python 3.10+ syntax.
+            </p>
+            <h4>Key Focus Areas</h4>
+            <ul>
+              <li>Type hints for all functions</li>
+              <li>Pythonic patterns and idioms</li>
+              <li>Modern Python syntax</li>
+              <li>Import organization</li>
+              <li>Module extraction signals</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent kieran-python-reviewer</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="kieran-typescript-reviewer">
+            <div class="agent-detail-header">
+              <h3>kieran-typescript-reviewer</h3>
+              <span class="agent-badge">TypeScript</span>
+            </div>
+            <p class="agent-detail-description">
+              Reviews TypeScript code with an exceptionally high quality bar. Enforces type safety,
+              modern patterns, and clean architecture.
+            </p>
+            <h4>Key Focus Areas</h4>
+            <ul>
+              <li>No <code>any</code> without justification</li>
+              <li>Component/module extraction signals</li>
+              <li>Import organization</li>
+              <li>Modern TypeScript patterns</li>
+              <li>Testability assessment</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent kieran-typescript-reviewer</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="security-sentinel">
+            <div class="agent-detail-header">
+              <h3>security-sentinel</h3>
+              <span class="agent-badge critical">Security</span>
+            </div>
+            <p class="agent-detail-description">
+              Performs security audits, vulnerability assessments, and OWASP compliance checks.
+              Essential for any code handling authentication, payments, or sensitive data.
+            </p>
+            <h4>Security Checks</h4>
+            <ul>
+              <li>Input validation analysis</li>
+              <li>SQL injection risk assessment</li>
+              <li>XSS vulnerability detection</li>
+              <li>Authentication/authorization audit</li>
+              <li>Sensitive data exposure scanning</li>
+              <li>OWASP Top 10 compliance</li>
+              <li>Hardcoded secrets search</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent security-sentinel "Audit the payment flow"</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="performance-oracle">
+            <div class="agent-detail-header">
+              <h3>performance-oracle</h3>
+              <span class="agent-badge">Performance</span>
+            </div>
+            <p class="agent-detail-description">
+              Analyzes code for performance issues, bottlenecks, and scalability concerns.
+              Projects performance at 10x, 100x, and 1000x scale.
+            </p>
+            <h4>Analysis Areas</h4>
+            <ul>
+              <li>Algorithmic complexity (Big O notation)</li>
+              <li>N+1 query pattern detection</li>
+              <li>Proper index usage verification</li>
+              <li>Memory management review</li>
+              <li>Caching opportunity identification</li>
+              <li>Network usage optimization</li>
+              <li>Frontend bundle impact</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent performance-oracle</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="architecture-strategist">
+            <div class="agent-detail-header">
+              <h3>architecture-strategist</h3>
+              <span class="agent-badge">Architecture</span>
+            </div>
+            <p class="agent-detail-description">
+              Analyzes code changes from an architectural perspective. Evaluates system structure,
+              SOLID principles, and API contracts.
+            </p>
+            <h4>Analysis Areas</h4>
+            <ul>
+              <li>Overall system structure understanding</li>
+              <li>Change context within architecture</li>
+              <li>Architectural violation identification</li>
+              <li>SOLID principles compliance</li>
+              <li>Microservice boundary assessment</li>
+              <li>API contract evaluation</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent architecture-strategist</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="data-integrity-guardian">
+            <div class="agent-detail-header">
+              <h3>data-integrity-guardian</h3>
+              <span class="agent-badge critical">Data</span>
+            </div>
+            <p class="agent-detail-description">
+              Reviews database migrations, data models, and data persistence code.
+              Ensures data safety and privacy compliance.
+            </p>
+            <h4>Review Areas</h4>
+            <ul>
+              <li>Migration safety and reversibility</li>
+              <li>Data constraint validation</li>
+              <li>Transaction boundary review</li>
+              <li>Referential integrity preservation</li>
+              <li>Privacy compliance (GDPR, CCPA)</li>
+              <li>Data corruption scenario checking</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent data-integrity-guardian</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="pattern-recognition-specialist">
+            <div class="agent-detail-header">
+              <h3>pattern-recognition-specialist</h3>
+              <span class="agent-badge">Patterns</span>
+            </div>
+            <p class="agent-detail-description">
+              Analyzes code for design patterns, anti-patterns, naming conventions, and duplication.
+              Uses tools like jscpd for duplication detection.
+            </p>
+            <h4>Detection Areas</h4>
+            <ul>
+              <li>Design patterns (Factory, Singleton, Observer, etc.)</li>
+              <li>Anti-patterns and code smells</li>
+              <li>TODO/FIXME comments</li>
+              <li>God objects and circular dependencies</li>
+              <li>Naming consistency</li>
+              <li>Code duplication</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent pattern-recognition-specialist</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="code-simplicity-reviewer">
+            <div class="agent-detail-header">
+              <h3>code-simplicity-reviewer</h3>
+              <span class="agent-badge">Quality</span>
+            </div>
+            <p class="agent-detail-description">
+              Ensures code is as simple and minimal as possible. Applies YAGNI rigorously
+              and challenges unnecessary abstractions.
+            </p>
+            <h4>Simplification Checks</h4>
+            <ul>
+              <li>Analyze every line for necessity</li>
+              <li>Simplify complex logic</li>
+              <li>Remove redundancy and duplication</li>
+              <li>Challenge abstractions</li>
+              <li>Optimize for readability</li>
+              <li>Eliminate premature generalization</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent code-simplicity-reviewer</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Research Agents -->
+        <section id="research-agents">
+          <h2><i class="fa-solid fa-microscope"></i> Research Agents (4)</h2>
+          <p>Research agents that gather information from documentation, repositories, and git history to inform development decisions.</p>
+
+          <div class="agent-detail" id="framework-docs-researcher">
+            <div class="agent-detail-header">
+              <h3>framework-docs-researcher</h3>
+              <span class="agent-badge">Research</span>
+            </div>
+            <p class="agent-detail-description">
+              Gathers comprehensive documentation and best practices for frameworks, libraries, or dependencies.
+            </p>
+            <h4>Capabilities</h4>
+            <ul>
+              <li>Fetch official framework and library documentation</li>
+              <li>Identify version-specific constraints and deprecations</li>
+              <li>Search GitHub for real-world usage examples</li>
+              <li>Analyze gem/library source code using <code>bundle show</code></li>
+              <li>Synthesize findings with practical examples</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent framework-docs-researcher "Research Hotwire Turbo patterns"</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="best-practices-researcher">
+            <div class="agent-detail-header">
+              <h3>best-practices-researcher</h3>
+              <span class="agent-badge">Research</span>
+            </div>
+            <p class="agent-detail-description">
+              Researches and gathers external best practices, documentation, and examples for any technology.
+            </p>
+            <h4>Capabilities</h4>
+            <ul>
+              <li>Leverage multiple sources (Context7 MCP, web search, GitHub)</li>
+              <li>Evaluate information quality and recency</li>
+              <li>Synthesize into actionable guidance</li>
+              <li>Provide code examples and templates</li>
+              <li>Research issue templates and community engagement</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent best-practices-researcher "Find pagination patterns"</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="git-history-analyzer">
+            <div class="agent-detail-header">
+              <h3>git-history-analyzer</h3>
+              <span class="agent-badge">Git</span>
+            </div>
+            <p class="agent-detail-description">
+              Archaeological analysis of code repositories to understand evolution and patterns.
+            </p>
+            <h4>Analysis Techniques</h4>
+            <ul>
+              <li>Trace file evolution using <code>git log --follow</code></li>
+              <li>Determine code origins using <code>git blame -w -C -C -C</code></li>
+              <li>Identify patterns from commit history</li>
+              <li>Map key contributors and expertise areas</li>
+              <li>Extract historical patterns of issues and fixes</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent git-history-analyzer "Analyze changes to User model"</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="repo-research-analyst">
+            <div class="agent-detail-header">
+              <h3>repo-research-analyst</h3>
+              <span class="agent-badge">Research</span>
+            </div>
+            <p class="agent-detail-description">
+              Conducts thorough research on repository structure, documentation, and patterns.
+            </p>
+            <h4>Analysis Areas</h4>
+            <ul>
+              <li>Architecture and documentation files (ARCHITECTURE.md, README.md, CLAUDE.md)</li>
+              <li>GitHub issues for patterns and conventions</li>
+              <li>Issue/PR templates and guidelines</li>
+              <li>Implementation patterns using ast-grep or rg</li>
+              <li>Project-specific conventions</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent repo-research-analyst</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Workflow Agents -->
+        <section id="workflow-agents">
+          <h2><i class="fa-solid fa-gears"></i> Workflow Agents (5)</h2>
+          <p>Workflow agents that automate common development tasks like bug reproduction, PR resolution, and linting.</p>
+
+          <div class="agent-detail" id="bug-reproduction-validator">
+            <div class="agent-detail-header">
+              <h3>bug-reproduction-validator</h3>
+              <span class="agent-badge">Bugs</span>
+            </div>
+            <p class="agent-detail-description">
+              Verifies whether bug reports are actual bugs through systematic reproduction.
+              Classifies bugs and provides severity assessment.
+            </p>
+            <h4>Classification Types</h4>
+            <ul>
+              <li><strong>Confirmed</strong> - Bug reproduced successfully</li>
+              <li><strong>Cannot Reproduce</strong> - Unable to reproduce</li>
+              <li><strong>Not a Bug</strong> - Expected behavior</li>
+              <li><strong>Environmental</strong> - Environment-specific issue</li>
+              <li><strong>Data</strong> - Data-related issue</li>
+              <li><strong>User Error</strong> - User misunderstanding</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent bug-reproduction-validator</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="pr-comment-resolver">
+            <div class="agent-detail-header">
+              <h3>pr-comment-resolver</h3>
+              <span class="agent-badge">PR</span>
+            </div>
+            <p class="agent-detail-description">
+              Addresses code review comments by implementing requested changes and reporting resolutions.
+            </p>
+            <h4>Workflow</h4>
+            <ul>
+              <li>Analyze code review comments</li>
+              <li>Plan the resolution before implementation</li>
+              <li>Implement requested modifications</li>
+              <li>Verify resolution doesn't break functionality</li>
+              <li>Provide clear resolution reports</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent pr-comment-resolver</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="lint">
+            <div class="agent-detail-header">
+              <h3>lint</h3>
+              <span class="agent-badge">Quality</span>
+            </div>
+            <p class="agent-detail-description">
+              Runs linting and code quality checks on Ruby and ERB files.
+              Uses Haiku model for efficiency.
+            </p>
+            <h4>Tools Run</h4>
+            <ul>
+              <li><code>bundle exec standardrb</code> - Ruby file checking/fixing</li>
+              <li><code>bundle exec erblint --lint-all</code> - ERB templates</li>
+              <li><code>bin/brakeman</code> - Security scanning</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent lint</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="spec-flow-analyzer">
+            <div class="agent-detail-header">
+              <h3>spec-flow-analyzer</h3>
+              <span class="agent-badge">Testing</span>
+            </div>
+            <p class="agent-detail-description">
+              Analyzes specifications and plans for user flows and gap identification.
+              Uses Sonnet model for analysis.
+            </p>
+            <h4>Analysis Areas</h4>
+            <ul>
+              <li>Map all possible user flows and permutations</li>
+              <li>Identify gaps, ambiguities, and missing specifications</li>
+              <li>Consider different user types, roles, permissions</li>
+              <li>Analyze error states and edge cases</li>
+              <li>Generate critical questions requiring clarification</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent spec-flow-analyzer</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="every-style-editor">
+            <div class="agent-detail-header">
+              <h3>every-style-editor</h3>
+              <span class="agent-badge">Content</span>
+            </div>
+            <p class="agent-detail-description">
+              Reviews and edits text content to conform to Every's specific style guide.
+            </p>
+            <h4>Style Checks</h4>
+            <ul>
+              <li>Title case in headlines, sentence case elsewhere</li>
+              <li>Company singular/plural usage</li>
+              <li>Remove overused words (actually, very, just)</li>
+              <li>Enforce active voice</li>
+              <li>Apply formatting rules (Oxford commas, em dashes)</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent every-style-editor</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Design Agents -->
+        <section id="design-agents">
+          <h2><i class="fa-solid fa-palette"></i> Design Agents (3)</h2>
+          <p>Design agents that help with UI implementation, Figma synchronization, and iterative design refinement.</p>
+
+          <div class="agent-detail" id="design-iterator">
+            <div class="agent-detail-header">
+              <h3>design-iterator</h3>
+              <span class="agent-badge">Design</span>
+            </div>
+            <p class="agent-detail-description">
+              Systematic UI/UX design refinement through iterative improvements.
+              Takes screenshots, analyzes, implements changes, and repeats.
+            </p>
+            <h4>Process</h4>
+            <ul>
+              <li>Take focused screenshots of target elements</li>
+              <li>Analyze current state and identify 3-5 improvements</li>
+              <li>Implement targeted CSS/design changes</li>
+              <li>Document changes made</li>
+              <li>Repeat for specified iterations (default 10)</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent design-iterator</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="figma-design-sync">
+            <div class="agent-detail-header">
+              <h3>figma-design-sync</h3>
+              <span class="agent-badge">Figma</span>
+            </div>
+            <p class="agent-detail-description">
+              Automatically detects and fixes visual differences between Figma designs and web implementations.
+              Uses Sonnet model.
+            </p>
+            <h4>Workflow</h4>
+            <ul>
+              <li>Extract design specifications from Figma</li>
+              <li>Capture implementation screenshots</li>
+              <li>Conduct systematic visual comparison</li>
+              <li>Make precise code changes to fix discrepancies</li>
+              <li>Verify implementation matches design</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent figma-design-sync</code></pre>
+            </div>
+          </div>
+
+          <div class="agent-detail" id="design-implementation-reviewer">
+            <div class="agent-detail-header">
+              <h3>design-implementation-reviewer</h3>
+              <span class="agent-badge">Review</span>
+            </div>
+            <p class="agent-detail-description">
+              Verifies UI implementations match Figma design specifications.
+              Uses Opus model for detailed analysis.
+            </p>
+            <h4>Comparison Areas</h4>
+            <ul>
+              <li>Layouts and structure</li>
+              <li>Typography (fonts, sizes, weights)</li>
+              <li>Colors and themes</li>
+              <li>Spacing and alignment</li>
+              <li>Different viewport sizes</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent design-implementation-reviewer</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Docs Agents -->
+        <section id="docs-agents">
+          <h2><i class="fa-solid fa-file-lines"></i> Documentation Agent (1)</h2>
+
+          <div class="agent-detail" id="ankane-readme-writer">
+            <div class="agent-detail-header">
+              <h3>ankane-readme-writer</h3>
+              <span class="agent-badge">Docs</span>
+            </div>
+            <p class="agent-detail-description">
+              Creates/updates README files following Ankane-style template for Ruby gems.
+              Optimized for conciseness with every sentence kept to 15 words or less.
+            </p>
+            <h4>Section Order</h4>
+            <ol>
+              <li>Header (title + description)</li>
+              <li>Installation</li>
+              <li>Quick Start</li>
+              <li>Usage</li>
+              <li>Options</li>
+              <li>Upgrading</li>
+              <li>Contributing</li>
+              <li>License</li>
+            </ol>
+            <h4>Style Guidelines</h4>
+            <ul>
+              <li>Imperative voice throughout</li>
+              <li>15 words max per sentence</li>
+              <li>Single-purpose code fences</li>
+              <li>Up to 4 badges maximum</li>
+              <li>No HTML comments</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>claude agent ankane-readme-writer</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Navigation -->
+        <nav class="docs-nav-footer">
+          <a href="getting-started.html" class="nav-prev">
+            <span class="nav-label">Previous</span>
+            <span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Getting Started</span>
+          </a>
+          <a href="commands.html" class="nav-next">
+            <span class="nav-label">Next</span>
+            <span class="nav-title">Commands <i class="fa-solid fa-arrow-right"></i></span>
+          </a>
+        </nav>
+      </article>
+    </main>
+  </div>
+
+  <script>
+    document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
+      document.querySelector('.docs-sidebar').classList.toggle('open');
+    });
+  </script>
+</body>
+
+</html>

plugins/compounding-engineering/docs/pages/changelog.html

@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Changelog - Compounding Engineering</title>
+  <meta content="Version history and release notes for the Compounding Engineering plugin." name="description" />
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link href="../css/style.css" rel="stylesheet" type="text/css" />
+  <link href="../css/docs.css" rel="stylesheet" type="text/css" />
+  <script src="../js/main.js" type="text/javascript" defer></script>
+</head>
+
+<body>
+  <div class="background-gradient"></div>
+  <div class="docs-layout">
+    <aside class="docs-sidebar">
+      <div class="sidebar-header">
+        <a href="../index.html" class="nav-brand">
+          <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+          <span class="logo-text">CE Docs</span>
+        </a>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section">
+          <h3>Getting Started</h3>
+          <ul>
+            <li><a href="getting-started.html">Installation</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Reference</h3>
+          <ul>
+            <li><a href="agents.html">Agents (23)</a></li>
+            <li><a href="commands.html">Commands (13)</a></li>
+            <li><a href="skills.html">Skills (11)</a></li>
+            <li><a href="mcp-servers.html">MCP Servers (two)</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="changelog.html" class="active">Changelog</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>On This Page</h3>
+          <ul>
+            <li><a href="#v2.6.0">v2.6.0</a></li>
+            <li><a href="#v2.5.0">v2.5.0</a></li>
+            <li><a href="#v2.4.1">v2.4.1</a></li>
+            <li><a href="#v2.4.0">v2.4.0</a></li>
+            <li><a href="#v2.3.0">v2.3.0</a></li>
+            <li><a href="#v2.2.1">v2.2.1</a></li>
+            <li><a href="#v2.2.0">v2.2.0</a></li>
+            <li><a href="#v2.1.0">v2.1.0</a></li>
+            <li><a href="#v2.0.0">v2.0.0</a></li>
+            <li><a href="#v1.1.0">v1.1.0</a></li>
+            <li><a href="#v1.0.0">v1.0.0</a></li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
+
+    <main class="docs-content">
+      <div class="docs-header">
+        <nav class="breadcrumb">
+          <a href="../index.html">Home</a>
+          <span>/</span>
+          <a href="getting-started.html">Docs</a>
+          <span>/</span>
+          <span>Changelog</span>
+        </nav>
+        <button class="mobile-menu-toggle" data-sidebar-toggle>
+          <i class="fa-solid fa-bars"></i>
+        </button>
+      </div>
+
+      <article class="docs-article">
+        <h1><i class="fa-solid fa-clock-rotate-left color-accent"></i> Changelog</h1>
+        <p class="lead">
+          All notable changes to the compounding-engineering plugin. This project follows
+          <a href="https://semver.org/">Semantic Versioning</a> and
+          <a href="https://keepachangelog.com/">Keep a Changelog</a> conventions.
+        </p>
+
+        <!-- Version 2.6.0 -->
+        <section id="v2.6.0" class="version-section">
+          <div class="version-header">
+            <h2>v2.6.0</h2>
+            <span class="version-date">2024-11-26</span>
+          </div>
+
+          <div class="changelog-category removed">
+            <h3><i class="fa-solid fa-minus"></i> Removed</h3>
+            <ul>
+              <li>
+                <strong><code>feedback-codifier</code> agent</strong> - Removed from workflow agents.
+                Agent count reduced from 24 to 23.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.5.0 -->
+        <section id="v2.5.0" class="version-section">
+          <div class="version-header">
+            <h2>v2.5.0</h2>
+            <span class="version-date">2024-11-25</span>
+          </div>
+
+          <div class="changelog-category added">
+            <h3><i class="fa-solid fa-plus"></i> Added</h3>
+            <ul>
+              <li>
+                <strong><code>/report-bug</code> command</strong> - New slash command for reporting bugs in the
+                compounding-engineering plugin. Provides a structured workflow that gathers bug information
+                through guided questions, collects environment details automatically, and creates a GitHub
+                issue in the EveryInc/every-marketplace repository.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.4.1 -->
+        <section id="v2.4.1" class="version-section">
+          <div class="version-header">
+            <h2>v2.4.1</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category improved">
+            <h3><i class="fa-solid fa-arrow-up"></i> Improved</h3>
+            <ul>
+              <li>
+                <strong>design-iterator agent</strong> - Added focused screenshot guidance: always capture
+                only the target element/area instead of full page screenshots. Includes browser_resize
+                recommendations, element-targeted screenshot workflow using browser_snapshot refs, and
+                explicit instruction to never use fullPage mode.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.4.0 -->
+        <section id="v2.4.0" class="version-section">
+          <div class="version-header">
+            <h2>v2.4.0</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category fixed">
+            <h3><i class="fa-solid fa-bug"></i> Fixed</h3>
+            <ul>
+              <li>
+                <strong>MCP Configuration</strong> - Moved MCP servers back to <code>plugin.json</code>
+                following working examples from anthropics/life-sciences plugins.
+              </li>
+              <li>
+                <strong>Context7 URL</strong> - Updated to use HTTP type with correct endpoint URL.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.3.0 -->
+        <section id="v2.3.0" class="version-section">
+          <div class="version-header">
+            <h2>v2.3.0</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category changed">
+            <h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
+            <ul>
+              <li>
+                <strong>MCP Configuration</strong> - Moved MCP servers from inline <code>plugin.json</code>
+                to separate <code>.mcp.json</code> file per Claude Code best practices.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.2.1 -->
+        <section id="v2.2.1" class="version-section">
+          <div class="version-header">
+            <h2>v2.2.1</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category fixed">
+            <h3><i class="fa-solid fa-bug"></i> Fixed</h3>
+            <ul>
+              <li>
+                <strong>Playwright MCP Server</strong> - Added missing <code>"type": "stdio"</code> field
+                required for MCP server configuration to load properly.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.2.0 -->
+        <section id="v2.2.0" class="version-section">
+          <div class="version-header">
+            <h2>v2.2.0</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category added">
+            <h3><i class="fa-solid fa-plus"></i> Added</h3>
+            <ul>
+              <li>
+                <strong>Context7 MCP Server</strong> - Bundled Context7 for instant framework documentation
+                lookup. Provides up-to-date docs for Rails, React, Next.js, and more than 100 other frameworks.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.1.0 -->
+        <section id="v2.1.0" class="version-section">
+          <div class="version-header">
+            <h2>v2.1.0</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category added">
+            <h3><i class="fa-solid fa-plus"></i> Added</h3>
+            <ul>
+              <li>
+                <strong>Playwright MCP Server</strong> - Bundled <code>@playwright/mcp</code> for browser
+                automation across all projects. Provides screenshot, navigation, click, fill, and evaluate tools.
+              </li>
+            </ul>
+          </div>
+
+          <div class="changelog-category changed">
+            <h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
+            <ul>
+              <li>Replaced all Puppeteer references with Playwright across agents and commands:
+                <ul>
+                  <li><code>bug-reproduction-validator</code> agent</li>
+                  <li><code>design-iterator</code> agent</li>
+                  <li><code>design-implementation-reviewer</code> agent</li>
+                  <li><code>figma-design-sync</code> agent</li>
+                  <li><code>generate_command</code> command</li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.0.2 -->
+        <section id="v2.0.2" class="version-section">
+          <div class="version-header">
+            <h2>v2.0.2</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category changed">
+            <h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
+            <ul>
+              <li>
+                <strong>design-iterator agent</strong> - Updated description to emphasize proactive usage
+                when design work isn't coming together on first attempt.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.0.1 -->
+        <section id="v2.0.1" class="version-section">
+          <div class="version-header">
+            <h2>v2.0.1</h2>
+            <span class="version-date">2024-11-24</span>
+          </div>
+
+          <div class="changelog-category added">
+            <h3><i class="fa-solid fa-plus"></i> Added</h3>
+            <ul>
+              <li><strong>CLAUDE.md</strong> - Project instructions with versioning requirements</li>
+              <li><strong>docs/solutions/plugin-versioning-requirements.md</strong> - Workflow documentation</li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 2.0.0 -->
+        <section id="v2.0.0" class="version-section">
+          <div class="version-header">
+            <h2>v2.0.0</h2>
+            <span class="version-date">2024-11-24</span>
+            <span class="version-badge major">Major Release</span>
+          </div>
+
+          <p class="version-description">
+            Major reorganization consolidating agents, commands, and skills from multiple sources into
+            a single, well-organized plugin.
+          </p>
+
+          <div class="changelog-category added">
+            <h3><i class="fa-solid fa-plus"></i> Added</h3>
+
+            <h4>New Agents (seven)</h4>
+            <ul>
+              <li><code>design-iterator</code> - Iteratively refine UI components through systematic design iterations</li>
+              <li><code>design-implementation-reviewer</code> - Verify UI implementations match Figma design specifications</li>
+              <li><code>figma-design-sync</code> - Synchronize web implementations with Figma designs</li>
+              <li><code>bug-reproduction-validator</code> - Systematically reproduce and validate bug reports</li>
+              <li><code>spec-flow-analyzer</code> - Analyze user flows and identify gaps in specifications</li>
+              <li><code>lint</code> - Run linting and code quality checks on Ruby and ERB files</li>
+              <li><code>ankane-readme-writer</code> - Create READMEs following Ankane-style template for Ruby gems</li>
+            </ul>
+
+            <h4>New Commands (nine)</h4>
+            <ul>
+              <li><code>/changelog</code> - Create engaging changelogs for recent merges</li>
+              <li><code>/plan_review</code> - Multi-agent plan review in parallel</li>
+              <li><code>/resolve_parallel</code> - Resolve TODO comments in parallel</li>
+              <li><code>/resolve_pr_parallel</code> - Resolve PR comments in parallel</li>
+              <li><code>/reproduce-bug</code> - Reproduce bugs using logs and console</li>
+              <li><code>/prime</code> - Prime/setup command</li>
+              <li><code>/create-agent-skill</code> - Create or edit Claude Code skills</li>
+              <li><code>/heal-skill</code> - Fix skill documentation issues</li>
+              <li><code>/workflows:codify</code> - Document solved problems for knowledge base</li>
+            </ul>
+
+            <h4>New Skills (10)</h4>
+            <ul>
+              <li><code>andrew-kane-gem-writer</code> - Write Ruby gems following Andrew Kane's patterns</li>
+              <li><code>codify-docs</code> - Capture solved problems as categorized documentation</li>
+              <li><code>create-agent-skills</code> - Expert guidance for creating Claude Code skills</li>
+              <li><code>dhh-ruby-style</code> - Write Ruby/Rails code in DHH's 37signals style</li>
+              <li><code>dspy-ruby</code> - Build type-safe LLM applications with DSPy.rb</li>
+              <li><code>every-style-editor</code> - Review copy for Every's style guide compliance</li>
+              <li><code>file-todos</code> - File-based todo tracking system</li>
+              <li><code>frontend-design</code> - Create production-grade frontend interfaces</li>
+              <li><code>git-worktree</code> - Manage Git worktrees for parallel development</li>
+              <li><code>skill-creator</code> - Guide for creating effective Claude Code skills</li>
+            </ul>
+          </div>
+
+          <div class="changelog-category changed">
+            <h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
+            <h4>Agents Reorganized by Category</h4>
+            <ul>
+              <li><code>review/</code> (10 agents) - Code quality, security, performance reviewers</li>
+              <li><code>research/</code> (four agents) - Documentation, patterns, history analysis</li>
+              <li><code>design/</code> (three agents) - UI/design review and iteration</li>
+              <li><code>workflow/</code> (six agents) - PR resolution, bug validation, linting</li>
+              <li><code>docs/</code> (one agent) - README generation</li>
+            </ul>
+          </div>
+
+          <div class="version-summary">
+            <h4>Summary</h4>
+            <table>
+              <thead>
+                <tr>
+                  <th>Component</th>
+                  <th>v1.1.0</th>
+                  <th>v2.0.0</th>
+                  <th>Change</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Agents</td>
+                  <td>17</td>
+                  <td>24</td>
+                  <td class="positive">+7</td>
+                </tr>
+                <tr>
+                  <td>Commands</td>
+                  <td>6</td>
+                  <td>15</td>
+                  <td class="positive">+9</td>
+                </tr>
+                <tr>
+                  <td>Skills</td>
+                  <td>1</td>
+                  <td>11</td>
+                  <td class="positive">+10</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <!-- Version 1.1.0 -->
+        <section id="v1.1.0" class="version-section">
+          <div class="version-header">
+            <h2>v1.1.0</h2>
+            <span class="version-date">2024-11-22</span>
+          </div>
+
+          <div class="changelog-category added">
+            <h3><i class="fa-solid fa-plus"></i> Added</h3>
+            <ul>
+              <li>
+                <strong>gemini-imagegen Skill</strong>
+                <ul>
+                  <li>Text-to-image generation with Google's Gemini API</li>
+                  <li>Image editing and manipulation</li>
+                  <li>Multi-turn refinement via chat interface</li>
+                  <li>Multiple reference image composition (up to 14 images)</li>
+                  <li>Model support: <code>gemini-2.5-flash-image</code> and <code>gemini-3-pro-image-preview</code></li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+
+          <div class="changelog-category fixed">
+            <h3><i class="fa-solid fa-bug"></i> Fixed</h3>
+            <ul>
+              <li>Corrected component counts in documentation (17 agents, not 15)</li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Version 1.0.0 -->
+        <section id="v1.0.0" class="version-section">
+          <div class="version-header">
+            <h2>v1.0.0</h2>
+            <span class="version-date">2024-10-09</span>
+            <span class="version-badge">Initial Release</span>
+          </div>
+
+          <p class="version-description">
+            Initial release of the compounding-engineering plugin.
+          </p>
+
+          <div class="changelog-category added">
+            <h3><i class="fa-solid fa-plus"></i> Added</h3>
+
+            <h4>17 Specialized Agents</h4>
+
+            <p><strong>Code Review (five)</strong></p>
+            <ul>
+              <li><code>kieran-rails-reviewer</code> - Rails code review with strict conventions</li>
+              <li><code>kieran-python-reviewer</code> - Python code review with quality standards</li>
+              <li><code>kieran-typescript-reviewer</code> - TypeScript code review</li>
+              <li><code>dhh-rails-reviewer</code> - Rails review from DHH's perspective</li>
+              <li><code>code-simplicity-reviewer</code> - Final pass for simplicity and minimalism</li>
+            </ul>
+
+            <p><strong>Analysis & Architecture (four)</strong></p>
+            <ul>
+              <li><code>architecture-strategist</code> - Architectural decisions and compliance</li>
+              <li><code>pattern-recognition-specialist</code> - Design pattern analysis</li>
+              <li><code>security-sentinel</code> - Security audits and vulnerability assessments</li>
+              <li><code>performance-oracle</code> - Performance analysis and optimization</li>
+            </ul>
+
+            <p><strong>Research (four)</strong></p>
+            <ul>
+              <li><code>framework-docs-researcher</code> - Framework documentation research</li>
+              <li><code>best-practices-researcher</code> - External best practices gathering</li>
+              <li><code>git-history-analyzer</code> - Git history and code evolution analysis</li>
+              <li><code>repo-research-analyst</code> - Repository structure and conventions</li>
+            </ul>
+
+            <p><strong>Workflow (three)</strong></p>
+            <ul>
+              <li><code>every-style-editor</code> - Every's style guide compliance</li>
+              <li><code>pr-comment-resolver</code> - PR comment resolution</li>
+              <li><code>feedback-codifier</code> - Feedback pattern codification</li>
+            </ul>
+
+            <h4>Six Slash Commands</h4>
+            <ul>
+              <li><code>/plan</code> - Create implementation plans</li>
+              <li><code>/review</code> - Comprehensive code reviews</li>
+              <li><code>/work</code> - Execute work items systematically</li>
+              <li><code>/triage</code> - Triage and prioritize issues</li>
+              <li><code>/resolve_todo_parallel</code> - Resolve TODOs in parallel</li>
+              <li><code>/generate_command</code> - Generate new slash commands</li>
+            </ul>
+
+            <h4>Infrastructure</h4>
+            <ul>
+              <li>MIT license</li>
+              <li>Plugin manifest (<code>plugin.json</code>)</li>
+              <li>Pre-configured permissions for Rails development</li>
+            </ul>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  </div>
+</body>
+
+</html>

plugins/compounding-engineering/docs/pages/commands.html

@@ -0,0 +1,524 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Command Reference - Compounding Engineering</title>
+  <meta content="Complete reference for all 16 slash commands in the Compounding Engineering plugin." name="description" />
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link href="../css/style.css" rel="stylesheet" type="text/css" />
+  <link href="../css/docs.css" rel="stylesheet" type="text/css" />
+  <script src="../js/main.js" type="text/javascript" defer></script>
+</head>
+
+<body>
+  <div class="background-gradient"></div>
+  <div class="docs-layout">
+    <aside class="docs-sidebar">
+      <div class="sidebar-header">
+        <a href="../index.html" class="nav-brand">
+          <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+          <span class="logo-text">CE Docs</span>
+        </a>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section">
+          <h3>Getting Started</h3>
+          <ul>
+            <li><a href="getting-started.html">Installation</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Reference</h3>
+          <ul>
+            <li><a href="agents.html">Agents (23)</a></li>
+            <li><a href="commands.html" class="active">Commands (13)</a></li>
+            <li><a href="skills.html">Skills (11)</a></li>
+            <li><a href="mcp-servers.html">MCP Servers (two)</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="changelog.html">Changelog</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>On This Page</h3>
+          <ul>
+            <li><a href="#workflow-commands">Workflow (four)</a></li>
+            <li><a href="#utility-commands">Utility (12)</a></li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
+
+    <main class="docs-content">
+      <div class="docs-header">
+        <nav class="breadcrumb">
+          <a href="../index.html">Home</a>
+          <span>/</span>
+          <a href="getting-started.html">Docs</a>
+          <span>/</span>
+          <span>Commands</span>
+        </nav>
+        <button class="mobile-menu-toggle" data-sidebar-toggle>
+          <i class="fa-solid fa-bars"></i>
+        </button>
+      </div>
+
+      <article class="docs-article">
+        <h1><i class="fa-solid fa-terminal color-accent"></i> Command Reference</h1>
+        <p class="lead">
+          Complete documentation for all 16 slash commands. Commands automate complex multi-step workflows
+          by orchestrating multiple agents, tools, and processes.
+        </p>
+
+        <!-- Workflow Commands -->
+        <section id="workflow-commands">
+          <h2><i class="fa-solid fa-arrows-spin"></i> Workflow Commands (four)</h2>
+          <p>Core workflow commands that embody the Plan-Delegate-Assess-Codify philosophy.</p>
+
+          <div class="command-detail" id="workflows-plan">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/workflows:plan</code>
+            </div>
+            <p class="command-detail-description">
+              Transform feature descriptions into well-structured project plans following conventions.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[feature description, bug report, or improvement idea]</code></p>
+            <h4>Workflow</h4>
+            <ol>
+              <li><strong>Repository Research (Parallel)</strong> - Launch three agents simultaneously:
+                <ul>
+                  <li><code>repo-research-analyst</code> - Project patterns</li>
+                  <li><code>best-practices-researcher</code> - Industry standards</li>
+                  <li><code>framework-docs-researcher</code> - Framework documentation</li>
+                </ul>
+              </li>
+              <li><strong>SpecFlow Analysis</strong> - Run <code>spec-flow-analyzer</code> for user flows</li>
+              <li><strong>Choose Detail Level</strong>:
+                <ul>
+                  <li><strong>MINIMAL</strong> - Simple bugs/small improvements</li>
+                  <li><strong>MORE</strong> - Standard features</li>
+                  <li><strong>A LOT</strong> - Major features with phases</li>
+                </ul>
+              </li>
+              <li><strong>Write Plan</strong> - Save as <code>plans/&lt;issue_title&gt;.md</code></li>
+              <li><strong>Review</strong> - Call <code>/plan_review</code> for multi-agent feedback</li>
+            </ol>
+            <div class="callout callout-info">
+              <div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
+              <div class="callout-content">
+                <p>This command does NOT write code. It only researches and creates the plan.</p>
+              </div>
+            </div>
+            <div class="card-code-block">
+              <pre><code>/workflows:plan Add OAuth integration for third-party auth
+/workflows:plan Fix N+1 query in user dashboard</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="workflows-review">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/workflows:review</code>
+            </div>
+            <p class="command-detail-description">
+              Perform exhaustive code reviews using multi-agent analysis, ultra-thinking, and worktrees.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[PR number, GitHub URL, branch name, or "latest"]</code></p>
+            <h4>Workflow</h4>
+            <ol>
+              <li><strong>Setup</strong> - Detect review target, optionally use git-worktree for isolation</li>
+              <li><strong>Launch 12 Parallel Review Agents</strong>:
+                <ul>
+                  <li><code>kieran-rails-reviewer</code>, <code>dhh-rails-reviewer</code></li>
+                  <li><code>security-sentinel</code>, <code>performance-oracle</code></li>
+                  <li><code>architecture-strategist</code>, <code>data-integrity-guardian</code></li>
+                  <li><code>pattern-recognition-specialist</code>, <code>git-history-analyzer</code></li>
+                  <li>And more...</li>
+                </ul>
+              </li>
+              <li><strong>Ultra-Thinking Analysis</strong> - Stakeholder perspectives, scenario exploration</li>
+              <li><strong>Simplification Review</strong> - Run <code>code-simplicity-reviewer</code></li>
+              <li><strong>Synthesize Findings</strong> - Categorize by severity (P1/P2/P3)</li>
+              <li><strong>Create Todo Files</strong> - Using file-todos skill for all findings</li>
+            </ol>
+            <div class="callout callout-warning">
+              <div class="callout-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
+              <div class="callout-content">
+                <p><strong>P1 (Critical) findings BLOCK MERGE.</strong> Address these before merging.</p>
+              </div>
+            </div>
+            <div class="card-code-block">
+              <pre><code>/workflows:review 42
+/workflows:review https://github.com/owner/repo/pull/42
+/workflows:review feature-branch-name
+/workflows:review latest</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="workflows-work">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/workflows:work</code>
+            </div>
+            <p class="command-detail-description">
+              Execute work plans efficiently while maintaining quality and finishing features.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[plan file, specification, or todo file path]</code></p>
+            <h4>Phases</h4>
+            <ol>
+              <li><strong>Quick Start</strong>
+                <ul>
+                  <li>Read plan & clarify requirements</li>
+                  <li>Setup environment (live or worktree)</li>
+                  <li>Create TodoWrite task list</li>
+                </ul>
+              </li>
+              <li><strong>Execute</strong>
+                <ul>
+                  <li>Task execution loop with progress tracking</li>
+                  <li>Follow existing patterns</li>
+                  <li>Test continuously</li>
+                  <li>Figma sync if applicable</li>
+                </ul>
+              </li>
+              <li><strong>Quality Check</strong>
+                <ul>
+                  <li>Run test suite</li>
+                  <li>Run linting</li>
+                  <li>Optional reviewer agents for complex changes</li>
+                </ul>
+              </li>
+              <li><strong>Ship It</strong>
+                <ul>
+                  <li>Create commit with conventional format</li>
+                  <li>Create pull request</li>
+                  <li>Notify with summary</li>
+                </ul>
+              </li>
+            </ol>
+            <div class="card-code-block">
+              <pre><code>/workflows:work plans/user-authentication.md
+/workflows:work todos/042-ready-p1-performance-issue.md</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="workflows-codify">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/workflows:codify</code>
+            </div>
+            <p class="command-detail-description">
+              Document a recently solved problem for the knowledge base.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[optional: brief context about the fix]</code></p>
+            <h4>Workflow</h4>
+            <ol>
+              <li><strong>Preconditions</strong> - Verify problem is solved and verified working</li>
+              <li><strong>Launch seven parallel subagents</strong>:
+                <ul>
+                  <li>Context Analyzer - Extract YAML frontmatter skeleton</li>
+                  <li>Solution Extractor - Identify root cause and solution</li>
+                  <li>Related Docs Finder - Find cross-references</li>
+                  <li>Prevention Strategist - Develop prevention strategies</li>
+                  <li>Category Classifier - Determine docs category</li>
+                  <li>Documentation Writer - Create the file</li>
+                  <li>Optional Specialized Agent - Based on problem type</li>
+                </ul>
+              </li>
+              <li><strong>Create Documentation</strong> - File in <code>docs/solutions/[category]/</code></li>
+            </ol>
+            <h4>Auto-Triggers</h4>
+            <p>Phrases: "that worked", "it's fixed", "working now", "problem solved"</p>
+            <div class="card-code-block">
+              <pre><code>/workflows:codify
+/workflows:codify N+1 query optimization</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Utility Commands -->
+        <section id="utility-commands">
+          <h2><i class="fa-solid fa-wrench"></i> Utility Commands (12)</h2>
+          <p>Specialized commands for specific tasks like changelog generation, bug reporting, and parallel resolution.</p>
+
+          <div class="command-detail" id="changelog">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/changelog</code>
+            </div>
+            <p class="command-detail-description">
+              Create engaging changelogs for recent merges to main branch.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[optional: daily|weekly, or time period in days]</code></p>
+            <h4>Output Sections</h4>
+            <ul>
+              <li>Breaking Changes (top priority)</li>
+              <li>New Features</li>
+              <li>Bug Fixes</li>
+              <li>Other Improvements</li>
+              <li>Shoutouts</li>
+              <li>Fun Fact</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>/changelog daily
+/changelog weekly
+/changelog 7</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="create-agent-skill">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/create-agent-skill</code>
+            </div>
+            <p class="command-detail-description">
+              Create or edit Claude Code skills with expert guidance on structure and best practices.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[skill description or requirements]</code></p>
+            <div class="card-code-block">
+              <pre><code>/create-agent-skill PDF processing for document analysis
+/create-agent-skill Web scraping with error handling</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="generate-command">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/generate_command</code>
+            </div>
+            <p class="command-detail-description">
+              Create a new custom slash command following conventions and best practices.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[command purpose and requirements]</code></p>
+            <div class="card-code-block">
+              <pre><code>/generate_command Security audit for codebase
+/generate_command Automated performance testing</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="heal-skill">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/heal-skill</code>
+            </div>
+            <p class="command-detail-description">
+              Heal skill documentation by applying corrections discovered during execution.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[optional: specific issue to fix]</code></p>
+            <h4>Approval Options</h4>
+            <ol>
+              <li>Apply and commit</li>
+              <li>Apply without commit</li>
+              <li>Revise changes</li>
+              <li>Cancel</li>
+            </ol>
+            <div class="card-code-block">
+              <pre><code>/heal-skill API endpoint URL changed
+/heal-skill parameter validation error</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="plan-review">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/plan_review</code>
+            </div>
+            <p class="command-detail-description">
+              Have multiple specialized agents review a plan in parallel.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[plan file path or plan content]</code></p>
+            <h4>Review Agents</h4>
+            <ul>
+              <li><code>dhh-rails-reviewer</code> - Rails conventions</li>
+              <li><code>kieran-rails-reviewer</code> - Rails best practices</li>
+              <li><code>code-simplicity-reviewer</code> - Simplicity and clarity</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>/plan_review plans/user-authentication.md</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="report-bug">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/report-bug</code>
+            </div>
+            <p class="command-detail-description">
+              Report a bug in the compounding-engineering plugin.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[optional: brief description of the bug]</code></p>
+            <h4>Information Collected</h4>
+            <ul>
+              <li>Bug category (Agent/Command/Skill/MCP/Installation)</li>
+              <li>Specific component name</li>
+              <li>Actual vs expected behavior</li>
+              <li>Steps to reproduce</li>
+              <li>Error messages</li>
+              <li>Environment info (auto-gathered)</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>/report-bug Agent not working
+/report-bug Command failing with timeout</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="reproduce-bug">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/reproduce-bug</code>
+            </div>
+            <p class="command-detail-description">
+              Reproduce and investigate a bug using logs and console inspection.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[GitHub issue number]</code></p>
+            <h4>Investigation Process</h4>
+            <ol>
+              <li>Read GitHub issue details</li>
+              <li>Launch parallel investigation agents</li>
+              <li>Analyze code for failure points</li>
+              <li>Iterate until root cause found</li>
+              <li>Post findings to GitHub issue</li>
+            </ol>
+            <div class="card-code-block">
+              <pre><code>/reproduce-bug 142</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="triage">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/triage</code>
+            </div>
+            <p class="command-detail-description">
+              Triage and categorize findings for the CLI todo system.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[findings list or source type]</code></p>
+            <h4>User Decisions</h4>
+            <ul>
+              <li><strong>"yes"</strong> - Create/update todo file, change status to ready</li>
+              <li><strong>"next"</strong> - Skip and delete from todos</li>
+              <li><strong>"custom"</strong> - Modify and re-present</li>
+            </ul>
+            <div class="callout callout-info">
+              <div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
+              <div class="callout-content">
+                <p>This command does NOT write code. It only categorizes and creates todo files.</p>
+              </div>
+            </div>
+            <div class="card-code-block">
+              <pre><code>/triage code-review-findings.txt
+/triage security-audit-results</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="resolve-parallel">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/resolve_parallel</code>
+            </div>
+            <p class="command-detail-description">
+              Resolve all TODO comments using parallel processing.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[optional: specific TODO pattern or file]</code></p>
+            <h4>Process</h4>
+            <ol>
+              <li>Analyze TODO comments from codebase</li>
+              <li>Create dependency graph (mermaid diagram)</li>
+              <li>Spawn parallel <code>pr-comment-resolver</code> agents</li>
+              <li>Commit and push after completion</li>
+            </ol>
+            <div class="card-code-block">
+              <pre><code>/resolve_parallel
+/resolve_parallel authentication
+/resolve_parallel src/auth/</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="resolve-pr-parallel">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/resolve_pr_parallel</code>
+            </div>
+            <p class="command-detail-description">
+              Resolve all PR comments using parallel processing.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[optional: PR number or current PR]</code></p>
+            <h4>Process</h4>
+            <ol>
+              <li>Get all unresolved PR comments</li>
+              <li>Create TodoWrite list</li>
+              <li>Launch parallel <code>pr-comment-resolver</code> agents</li>
+              <li>Commit, resolve threads, and push</li>
+            </ol>
+            <div class="card-code-block">
+              <pre><code>/resolve_pr_parallel
+/resolve_pr_parallel 123</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="resolve-todo-parallel">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/resolve_todo_parallel</code>
+            </div>
+            <p class="command-detail-description">
+              Resolve all pending CLI todos using parallel processing.
+            </p>
+            <h4>Arguments</h4>
+            <p><code>[optional: specific todo ID or pattern]</code></p>
+            <h4>Process</h4>
+            <ol>
+              <li>Get unresolved TODOs from <code>/todos/*.md</code></li>
+              <li>Analyze dependencies</li>
+              <li>Spawn parallel agents</li>
+              <li>Commit, mark as resolved, push</li>
+            </ol>
+            <div class="card-code-block">
+              <pre><code>/resolve_todo_parallel
+/resolve_todo_parallel 042
+/resolve_todo_parallel p1</code></pre>
+            </div>
+          </div>
+
+          <div class="command-detail" id="prime">
+            <div class="command-detail-header">
+              <code class="command-detail-name">/prime</code>
+            </div>
+            <p class="command-detail-description">
+              Prime/setup command for project initialization.
+            </p>
+            <div class="card-code-block">
+              <pre><code>/prime</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Navigation -->
+        <nav class="docs-nav-footer">
+          <a href="agents.html" class="nav-prev">
+            <span class="nav-label">Previous</span>
+            <span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Agents</span>
+          </a>
+          <a href="skills.html" class="nav-next">
+            <span class="nav-label">Next</span>
+            <span class="nav-title">Skills <i class="fa-solid fa-arrow-right"></i></span>
+          </a>
+        </nav>
+      </article>
+    </main>
+  </div>
+
+  <script>
+    document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
+      document.querySelector('.docs-sidebar').classList.toggle('open');
+    });
+  </script>
+</body>
+
+</html>

plugins/compounding-engineering/docs/pages/getting-started.html

@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Getting Started - Compounding Engineering</title>
+  <meta content="Complete guide to installing and using the Compounding Engineering plugin for Claude Code." name="description" />
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link href="../css/style.css" rel="stylesheet" type="text/css" />
+  <link href="../css/docs.css" rel="stylesheet" type="text/css" />
+  <script src="../js/main.js" type="text/javascript" defer></script>
+</head>
+
+<body>
+  <div class="background-gradient"></div>
+  <div class="docs-layout">
+    <!-- Sidebar -->
+    <aside class="docs-sidebar">
+      <div class="sidebar-header">
+        <a href="../index.html" class="nav-brand">
+          <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+          <span class="logo-text">CE Docs</span>
+        </a>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section">
+          <h3>Getting Started</h3>
+          <ul>
+            <li><a href="#installation" class="active">Installation</a></li>
+            <li><a href="#quick-start">Quick Start</a></li>
+            <li><a href="#configuration">Configuration</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Core Concepts</h3>
+          <ul>
+            <li><a href="#philosophy">Philosophy</a></li>
+            <li><a href="#agents">Using Agents</a></li>
+            <li><a href="#commands">Using Commands</a></li>
+            <li><a href="#skills">Using Skills</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Guides</h3>
+          <ul>
+            <li><a href="#code-review">Code Review Workflow</a></li>
+            <li><a href="#creating-agents">Creating Custom Agents</a></li>
+            <li><a href="#creating-skills">Creating Custom Skills</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Reference</h3>
+          <ul>
+            <li><a href="agents.html">Agent Reference</a></li>
+            <li><a href="commands.html">Command Reference</a></li>
+            <li><a href="skills.html">Skill Reference</a></li>
+            <li><a href="mcp-servers.html">MCP Servers</a></li>
+            <li><a href="changelog.html">Changelog</a></li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="docs-content">
+      <div class="docs-header">
+        <nav class="breadcrumb">
+          <a href="../index.html">Home</a>
+          <span>/</span>
+          <span>Getting Started</span>
+        </nav>
+        <button class="mobile-menu-toggle" data-sidebar-toggle>
+          <i class="fa-solid fa-bars"></i>
+        </button>
+      </div>
+
+      <article class="docs-article">
+        <h1>Getting Started with Compounding Engineering</h1>
+        <p class="lead">
+          This guide will help you install, configure, and start using the Compounding Engineering plugin
+          for Claude Code. In about five minutes, you'll have access to 23 specialized agents, 16 commands,
+          11 skills, and two MCP servers.
+        </p>
+
+        <!-- Installation Section -->
+        <section id="installation">
+          <h2><i class="fa-solid fa-download"></i> Installation</h2>
+
+          <h3>Prerequisites</h3>
+          <ul>
+            <li><a href="https://claude.ai/claude-code" target="_blank">Claude Code</a> installed and configured</li>
+            <li>A GitHub account (for marketplace access)</li>
+            <li>Node.js 18+ (for MCP servers)</li>
+          </ul>
+
+          <h3>Step 1: Add the Marketplace</h3>
+          <p>First, add the Every Marketplace to your Claude Code installation:</p>
+          <div class="card-code-block">
+            <pre><code>claude /plugin marketplace add https://github.com/EveryInc/every-marketplace</code></pre>
+          </div>
+
+          <h3>Step 2: Install the Plugin</h3>
+          <p>Install the compounding-engineering plugin from the marketplace:</p>
+          <div class="card-code-block">
+            <pre><code>claude /plugin install compounding-engineering</code></pre>
+          </div>
+
+          <h3>Step 3: Verify Installation</h3>
+          <p>Verify the plugin is installed correctly:</p>
+          <div class="card-code-block">
+            <pre><code>claude /plugin list</code></pre>
+          </div>
+          <p>You should see <code>compounding-engineering</code> in the list of installed plugins.</p>
+
+          <div class="callout callout-info">
+            <div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
+            <div class="callout-content">
+              <h4>Known Issue: MCP Servers</h4>
+              <p>
+                The bundled MCP servers (Playwright and Context7) may not load automatically.
+                See the <a href="#mcp-configuration">MCP Configuration</a> section for the workaround.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Quick Start Section -->
+        <section id="quick-start">
+          <h2><i class="fa-solid fa-rocket"></i> Quick Start</h2>
+
+          <p>Here are the most common ways to use the plugin:</p>
+
+          <h3>Run a Code Review</h3>
+          <p>The <code>/workflows:review</code> command runs a comprehensive code review using multiple agents in parallel:</p>
+          <div class="card-code-block">
+            <pre><code># Review a PR by number
+/workflows:review 123
+
+# Review the current branch
+/workflows:review
+
+# Review a specific branch
+/workflows:review feature/my-feature</code></pre>
+          </div>
+
+          <h3>Use a Specialized Agent</h3>
+          <p>Invoke agents directly for specific tasks:</p>
+          <div class="card-code-block">
+            <pre><code># Rails code review with Kieran's conventions
+claude agent kieran-rails-reviewer "Review the UserController"
+
+# Security audit
+claude agent security-sentinel "Audit authentication flow"
+
+# Research best practices
+claude agent best-practices-researcher "Find pagination patterns for Rails"</code></pre>
+          </div>
+
+          <h3>Invoke a Skill</h3>
+          <p>Skills provide domain expertise on demand:</p>
+          <div class="card-code-block">
+            <pre><code># Generate images with Gemini
+skill: gemini-imagegen
+
+# Write Ruby in DHH's style
+skill: dhh-ruby-style
+
+# Create a new Claude Code skill
+skill: create-agent-skills</code></pre>
+          </div>
+        </section>
+
+        <!-- Configuration Section -->
+        <section id="configuration">
+          <h2><i class="fa-solid fa-gear"></i> Configuration</h2>
+
+          <h3 id="mcp-configuration">MCP Server Configuration</h3>
+          <p>
+            If MCP servers don't auto-load, add them manually to your <code>.claude/settings.json</code>:
+          </p>
+          <div class="card-code-block">
+            <pre><code>{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}</code></pre>
+          </div>
+
+          <h3>Environment Variables</h3>
+          <p>Some skills require environment variables:</p>
+          <table class="docs-table">
+            <thead>
+              <tr>
+                <th>Variable</th>
+                <th>Required For</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>GEMINI_API_KEY</code></td>
+                <td>gemini-imagegen</td>
+                <td>Google Gemini API key for image generation</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <!-- Philosophy Section -->
+        <section id="philosophy">
+          <h2><i class="fa-solid fa-lightbulb"></i> The Compounding Engineering Philosophy</h2>
+
+          <blockquote class="highlight-quote">
+            Every unit of engineering work should make subsequent units of work easier&mdash;not harder.
+          </blockquote>
+
+          <p>This philosophy manifests in four key practices:</p>
+
+          <div class="philosophy-grid">
+            <div class="philosophy-card">
+              <div class="philosophy-icon"><i class="fa-solid fa-brain"></i></div>
+              <h4>Plan</h4>
+              <p>
+                Understand the change needed and its impact before writing code.
+                Use research agents to gather context, best practices, and examples.
+              </p>
+            </div>
+            <div class="philosophy-card">
+              <div class="philosophy-icon"><i class="fa-solid fa-robot"></i></div>
+              <h4>Delegate</h4>
+              <p>
+                Use specialized AI agents to help with implementation.
+                Each agent brings deep expertise in its domain.
+              </p>
+            </div>
+            <div class="philosophy-card">
+              <div class="philosophy-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
+              <h4>Assess</h4>
+              <p>
+                Run comprehensive reviews with multiple perspectives.
+                Security, performance, architecture&mdash;all covered by specialized agents.
+              </p>
+            </div>
+            <div class="philosophy-card">
+              <div class="philosophy-icon"><i class="fa-solid fa-book"></i></div>
+              <h4>Codify</h4>
+              <p>
+                Document learnings and patterns for future use.
+                Each solved problem becomes reusable knowledge.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Using Agents Section -->
+        <section id="agents">
+          <h2><i class="fa-solid fa-users-gear"></i> Using Agents</h2>
+
+          <p>
+            Agents are specialized personas that can be invoked to perform specific tasks.
+            They're designed to bring deep expertise in their domain.
+          </p>
+
+          <h3>Invoking Agents</h3>
+          <div class="card-code-block">
+            <pre><code># Basic syntax
+claude agent [agent-name] "[optional message]"
+
+# Examples
+claude agent kieran-rails-reviewer
+claude agent security-sentinel "Audit the payment flow"
+claude agent git-history-analyzer "Show changes to user model"</code></pre>
+          </div>
+
+          <h3>Agent Categories</h3>
+          <table class="docs-table">
+            <thead>
+              <tr>
+                <th>Category</th>
+                <th>Count</th>
+                <th>Purpose</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Review</td>
+                <td>10</td>
+                <td>Code review, security audits, performance analysis</td>
+              </tr>
+              <tr>
+                <td>Research</td>
+                <td>four</td>
+                <td>Best practices, documentation, git history</td>
+              </tr>
+              <tr>
+                <td>Design</td>
+                <td>three</td>
+                <td>UI iteration, Figma sync, design review</td>
+              </tr>
+              <tr>
+                <td>Workflow</td>
+                <td>five</td>
+                <td>Bug reproduction, PR resolution, linting</td>
+              </tr>
+              <tr>
+                <td>Docs</td>
+                <td>one</td>
+                <td>README generation</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <p>
+            <a href="agents.html" class="button secondary">
+              <i class="fa-solid fa-arrow-right"></i> View All Agents
+            </a>
+          </p>
+        </section>
+
+        <!-- Using Commands Section -->
+        <section id="commands">
+          <h2><i class="fa-solid fa-terminal"></i> Using Commands</h2>
+
+          <p>
+            Slash commands automate complex multi-step workflows. They orchestrate
+            multiple agents, tools, and processes into a single command.
+          </p>
+
+          <h3>Running Commands</h3>
+          <div class="card-code-block">
+            <pre><code># Workflow commands (prefix: /workflows:)
+/workflows:plan
+/workflows:review 123
+/workflows:work
+/workflows:codify
+
+# Utility commands
+/changelog
+/triage
+/reproduce-bug</code></pre>
+          </div>
+
+          <h3>The Review Workflow</h3>
+          <p>The <code>/workflows:review</code> command is the most comprehensive. It:</p>
+          <ol>
+            <li>Detects the review target (PR, branch, or current changes)</li>
+            <li>Sets up a git worktree for isolated analysis</li>
+            <li>Runs 10 or more review agents in parallel</li>
+            <li>Synthesizes findings by severity (P1/P2/P3)</li>
+            <li>Creates structured todo files for each finding</li>
+            <li>Generates a summary report</li>
+          </ol>
+
+          <p>
+            <a href="commands.html" class="button secondary">
+              <i class="fa-solid fa-arrow-right"></i> View All Commands
+            </a>
+          </p>
+        </section>
+
+        <!-- Using Skills Section -->
+        <section id="skills">
+          <h2><i class="fa-solid fa-wand-magic-sparkles"></i> Using Skills</h2>
+
+          <p>
+            Skills provide domain expertise that Claude Code can invoke on-demand.
+            Unlike agents (which are personas), skills are bodies of knowledge with
+            templates, references, and workflows.
+          </p>
+
+          <h3>Invoking Skills</h3>
+          <div class="card-code-block">
+            <pre><code># In your prompt, reference the skill
+skill: gemini-imagegen
+
+# Or ask Claude to use it
+"Use the dhh-ruby-style skill to refactor this code"</code></pre>
+          </div>
+
+          <h3>Skill Structure</h3>
+          <p>Skills typically contain:</p>
+          <ul>
+            <li><strong>SKILL.md</strong> - Main documentation and instructions</li>
+            <li><strong>references/</strong> - Supporting documentation</li>
+            <li><strong>templates/</strong> - Code templates and patterns</li>
+            <li><strong>workflows/</strong> - Step-by-step procedures</li>
+            <li><strong>scripts/</strong> - Executable scripts (if needed)</li>
+          </ul>
+
+          <p>
+            <a href="skills.html" class="button secondary">
+              <i class="fa-solid fa-arrow-right"></i> View All Skills
+            </a>
+          </p>
+        </section>
+
+        <!-- Code Review Workflow Guide -->
+        <section id="code-review">
+          <h2><i class="fa-solid fa-code-pull-request"></i> Code Review Workflow Guide</h2>
+
+          <p>
+            The code review workflow is the heart of Compounding Engineering.
+            Here's how to get the most out of it.
+          </p>
+
+          <h3>Basic Review</h3>
+          <div class="card-code-block">
+            <pre><code># Review a PR
+/workflows:review 123
+
+# Review current branch
+/workflows:review</code></pre>
+          </div>
+
+          <h3>Understanding Findings</h3>
+          <p>Findings are categorized by severity:</p>
+          <ul>
+            <li><span class="badge badge-critical">P1 Critical</span> - Blocks merge. Security vulnerabilities, data corruption risks, breaking changes.</li>
+            <li><span class="badge badge-important">P2 Important</span> - Should fix. Performance issues, architectural concerns, reliability problems.</li>
+            <li><span class="badge badge-nice">P3 Nice-to-Have</span> - Enhancements. Minor improvements, cleanup, documentation.</li>
+          </ul>
+
+          <h3>Working with Todo Files</h3>
+          <p>Review findings are stored as todo files in the <code>todos/</code> directory:</p>
+          <div class="card-code-block">
+            <pre><code># List all pending todos
+ls todos/*-pending-*.md
+
+# Triage findings
+/triage
+
+# Resolve todos in parallel
+/resolve_todo_parallel</code></pre>
+          </div>
+        </section>
+
+        <!-- Creating Custom Agents -->
+        <section id="creating-agents">
+          <h2><i class="fa-solid fa-plus"></i> Creating Custom Agents</h2>
+
+          <p>
+            You can create custom agents tailored to your team's needs.
+            Agents are defined as markdown files with YAML frontmatter.
+          </p>
+
+          <h3>Agent File Structure</h3>
+          <div class="card-code-block">
+            <pre><code>---
+name: my-custom-agent
+description: Brief description of what this agent does
+---
+
+# Agent Instructions
+
+You are [role description].
+
+## Your Responsibilities
+1. First responsibility
+2. Second responsibility
+
+## Guidelines
+- Guideline one
+- Guideline two</code></pre>
+          </div>
+
+          <h3>Agent Location</h3>
+          <p>Place custom agents in:</p>
+          <ul>
+            <li><code>.claude/agents/</code> - Project-specific agents</li>
+            <li><code>~/.claude/agents/</code> - User-wide agents</li>
+          </ul>
+
+          <div class="callout callout-tip">
+            <div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
+            <div class="callout-content">
+              <h4>Use the Command</h4>
+              <p>
+                The easiest way to create agents is with the <code>/create-agent-skill</code> command
+                or the <code>create-agent-skills</code> skill.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Creating Custom Skills -->
+        <section id="creating-skills">
+          <h2><i class="fa-solid fa-plus"></i> Creating Custom Skills</h2>
+
+          <p>
+            Skills are more complex than agents. They can include references,
+            templates, workflows, and scripts.
+          </p>
+
+          <h3>Skill Directory Structure</h3>
+          <div class="card-code-block">
+            <pre><code>my-skill/
+  SKILL.md           # Main skill file (required)
+  references/        # Supporting documentation
+    concept-one.md
+    concept-two.md
+  templates/         # Code templates
+    basic-template.md
+  workflows/         # Step-by-step procedures
+    workflow-one.md
+  scripts/           # Executable scripts
+    helper.py</code></pre>
+          </div>
+
+          <h3>SKILL.md Format</h3>
+          <div class="card-code-block">
+            <pre><code>---
+name: my-skill
+description: Brief description shown when skill is invoked
+---
+
+# Skill Title
+
+Detailed instructions for using this skill.
+
+## Quick Start
+...
+
+## Reference Materials
+The skill includes references in the `references/` directory.
+
+## Templates
+Use templates from the `templates/` directory.</code></pre>
+          </div>
+
+          <div class="callout callout-tip">
+            <div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
+            <div class="callout-content">
+              <h4>Expert Guidance</h4>
+              <p>
+                Use <code>skill: create-agent-skills</code> for comprehensive guidance
+                on creating effective skills, including best practices and validation.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Navigation -->
+        <nav class="docs-nav-footer">
+          <a href="../index.html" class="nav-prev">
+            <span class="nav-label">Previous</span>
+            <span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Home</span>
+          </a>
+          <a href="agents.html" class="nav-next">
+            <span class="nav-label">Next</span>
+            <span class="nav-title">Agent Reference <i class="fa-solid fa-arrow-right"></i></span>
+          </a>
+        </nav>
+      </article>
+    </main>
+  </div>
+
+  <script>
+    // Sidebar toggle for mobile
+    document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
+      document.querySelector('.docs-sidebar').classList.toggle('open');
+    });
+
+    // Active link highlighting
+    const sections = document.querySelectorAll('section[id]');
+    const navLinks = document.querySelectorAll('.sidebar-nav a');
+
+    window.addEventListener('scroll', () => {
+      let current = '';
+      sections.forEach(section => {
+        const sectionTop = section.offsetTop;
+        if (pageYOffset >= sectionTop - 100) {
+          current = section.getAttribute('id');
+        }
+      });
+
+      navLinks.forEach(link => {
+        link.classList.remove('active');
+        if (link.getAttribute('href') === `#${current}`) {
+          link.classList.add('active');
+        }
+      });
+    });
+  </script>
+</body>
+
+</html>

plugins/compounding-engineering/docs/pages/mcp-servers.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>MCP Servers Reference - Compounding Engineering</title>
+  <meta content="Complete reference for the two MCP servers in the Compounding Engineering plugin." name="description" />
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link href="../css/style.css" rel="stylesheet" type="text/css" />
+  <link href="../css/docs.css" rel="stylesheet" type="text/css" />
+  <script src="../js/main.js" type="text/javascript" defer></script>
+</head>
+
+<body>
+  <div class="background-gradient"></div>
+  <div class="docs-layout">
+    <aside class="docs-sidebar">
+      <div class="sidebar-header">
+        <a href="../index.html" class="nav-brand">
+          <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+          <span class="logo-text">CE Docs</span>
+        </a>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section">
+          <h3>Getting Started</h3>
+          <ul>
+            <li><a href="getting-started.html">Installation</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Reference</h3>
+          <ul>
+            <li><a href="agents.html">Agents (23)</a></li>
+            <li><a href="commands.html">Commands (13)</a></li>
+            <li><a href="skills.html">Skills (11)</a></li>
+            <li><a href="mcp-servers.html" class="active">MCP Servers (two)</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="changelog.html">Changelog</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>On This Page</h3>
+          <ul>
+            <li><a href="#playwright">Playwright</a></li>
+            <li><a href="#context7">Context7</a></li>
+            <li><a href="#manual-config">Manual Configuration</a></li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
+
+    <main class="docs-content">
+      <div class="docs-header">
+        <nav class="breadcrumb">
+          <a href="../index.html">Home</a>
+          <span>/</span>
+          <a href="getting-started.html">Docs</a>
+          <span>/</span>
+          <span>MCP Servers</span>
+        </nav>
+        <button class="mobile-menu-toggle" data-sidebar-toggle>
+          <i class="fa-solid fa-bars"></i>
+        </button>
+      </div>
+
+      <article class="docs-article">
+        <h1><i class="fa-solid fa-server color-accent"></i> MCP Servers Reference</h1>
+        <p class="lead">
+          Model Context Protocol (MCP) servers extend Claude Code's capabilities with
+          browser automation and framework documentation lookup. The plugin bundles
+          two MCP servers that start automatically when enabled.
+        </p>
+
+        <div class="callout callout-warning">
+          <div class="callout-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
+          <div class="callout-content">
+            <h4>Known Issue: Auto-Loading</h4>
+            <p>
+              MCP servers may not load automatically when the plugin is installed.
+              See <a href="#manual-config">Manual Configuration</a> for the workaround.
+            </p>
+          </div>
+        </div>
+
+        <!-- Playwright -->
+        <section id="playwright">
+          <h2><i class="fa-brands fa-chrome"></i> Playwright</h2>
+          <p>
+            Browser automation via <code>@playwright/mcp</code>. Enables taking screenshots,
+            clicking elements, filling forms, and executing JavaScript in a real browser.
+          </p>
+
+          <h3>Tools Provided</h3>
+          <table class="docs-table">
+            <thead>
+              <tr>
+                <th>Tool</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>browser_navigate</code></td>
+                <td>Navigate to a URL in the browser</td>
+              </tr>
+              <tr>
+                <td><code>browser_take_screenshot</code></td>
+                <td>Capture a screenshot of the current page or element</td>
+              </tr>
+              <tr>
+                <td><code>browser_click</code></td>
+                <td>Click on an element using CSS selector or text</td>
+              </tr>
+              <tr>
+                <td><code>browser_fill_form</code></td>
+                <td>Fill form fields with values</td>
+              </tr>
+              <tr>
+                <td><code>browser_snapshot</code></td>
+                <td>Get an accessibility tree snapshot of the page</td>
+              </tr>
+              <tr>
+                <td><code>browser_evaluate</code></td>
+                <td>Execute JavaScript code in the browser context</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Use Cases</h3>
+          <ul>
+            <li><strong>Design Iteration</strong> - Take screenshots for UI comparison</li>
+            <li><strong>Testing</strong> - Automate browser interactions</li>
+            <li><strong>Debugging</strong> - Inspect page state and DOM</li>
+            <li><strong>Data Extraction</strong> - Scrape content from web pages</li>
+          </ul>
+
+          <h3>Example Usage</h3>
+          <div class="card-code-block">
+            <pre><code># The tools are available when the MCP server is running
+# Claude Code will use them automatically when appropriate
+
+# Example: Taking a screenshot for design review
+"Take a screenshot of the login page"
+
+# Example: Testing a form
+"Navigate to /signup and fill in the email field with test@example.com"</code></pre>
+          </div>
+
+          <h3>Configuration</h3>
+          <div class="card-code-block">
+            <pre><code>{
+  "playwright": {
+    "type": "stdio",
+    "command": "npx",
+    "args": ["-y", "@playwright/mcp@latest"],
+    "env": {}
+  }
+}</code></pre>
+          </div>
+        </section>
+
+        <!-- Context7 -->
+        <section id="context7">
+          <h2><i class="fa-solid fa-book-open"></i> Context7</h2>
+          <p>
+            Framework documentation lookup via Context7 MCP. Provides access to
+            documentation for more than 100 frameworks and libraries.
+          </p>
+
+          <h3>Tools Provided</h3>
+          <table class="docs-table">
+            <thead>
+              <tr>
+                <th>Tool</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>resolve-library-id</code></td>
+                <td>Find the library ID for a framework or package</td>
+              </tr>
+              <tr>
+                <td><code>get-library-docs</code></td>
+                <td>Get documentation for a specific library</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Supported Frameworks</h3>
+          <p>Context7 supports more than 100 frameworks including:</p>
+          <div class="framework-grid">
+            <div class="framework-category">
+              <h4>Backend</h4>
+              <ul>
+                <li>Ruby on Rails</li>
+                <li>Django</li>
+                <li>Laravel</li>
+                <li>Express</li>
+                <li>FastAPI</li>
+                <li>Spring Boot</li>
+              </ul>
+            </div>
+            <div class="framework-category">
+              <h4>Frontend</h4>
+              <ul>
+                <li>React</li>
+                <li>Vue.js</li>
+                <li>Angular</li>
+                <li>Svelte</li>
+                <li>Next.js</li>
+                <li>Nuxt</li>
+              </ul>
+            </div>
+            <div class="framework-category">
+              <h4>Mobile</h4>
+              <ul>
+                <li>React Native</li>
+                <li>Flutter</li>
+                <li>SwiftUI</li>
+                <li>Kotlin</li>
+              </ul>
+            </div>
+            <div class="framework-category">
+              <h4>Tools & Libraries</h4>
+              <ul>
+                <li>Tailwind CSS</li>
+                <li>PostgreSQL</li>
+                <li>Redis</li>
+                <li>GraphQL</li>
+                <li>Prisma</li>
+                <li>And many more...</li>
+              </ul>
+            </div>
+          </div>
+
+          <h3>Example Usage</h3>
+          <div class="card-code-block">
+            <pre><code># Claude Code will use Context7 automatically for documentation lookups
+"Look up the Rails ActionCable documentation"
+
+"How does the useEffect hook work in React?"
+
+"What are the best practices for PostgreSQL indexes?"</code></pre>
+          </div>
+
+          <h3>Configuration</h3>
+          <div class="card-code-block">
+            <pre><code>{
+  "context7": {
+    "type": "http",
+    "url": "https://mcp.context7.com/mcp"
+  }
+}</code></pre>
+          </div>
+        </section>
+
+        <!-- Manual Configuration -->
+        <section id="manual-config">
+          <h2><i class="fa-solid fa-gear"></i> Manual Configuration</h2>
+          <p>
+            If MCP servers don't auto-load with the plugin, add them manually to your
+            <code>.claude/settings.json</code> file.
+          </p>
+
+          <h3>Project-Level Configuration</h3>
+          <p>Add to <code>.claude/settings.json</code> in your project:</p>
+          <div class="card-code-block">
+            <pre><code>{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}</code></pre>
+          </div>
+
+          <h3>Global Configuration</h3>
+          <p>Add to <code>~/.claude/settings.json</code> to enable for all projects:</p>
+          <div class="card-code-block">
+            <pre><code>{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}</code></pre>
+          </div>
+
+          <h3>Requirements</h3>
+          <table class="docs-table">
+            <thead>
+              <tr>
+                <th>Server</th>
+                <th>Requirement</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Playwright</td>
+                <td>Node.js 18+ and npx</td>
+              </tr>
+              <tr>
+                <td>Context7</td>
+                <td>Internet connection (HTTP endpoint)</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Verifying MCP Servers</h3>
+          <p>After configuration, restart Claude Code and verify the servers are loaded:</p>
+          <div class="card-code-block">
+            <pre><code># Check if MCP tools are available
+"What MCP tools do you have access to?"
+
+# Test Playwright
+"Take a screenshot of the current directory listing"
+
+# Test Context7
+"Look up Rails Active Record documentation"</code></pre>
+          </div>
+        </section>
+
+        <!-- Navigation -->
+        <nav class="docs-nav-footer">
+          <a href="skills.html" class="nav-prev">
+            <span class="nav-label">Previous</span>
+            <span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Skills</span>
+          </a>
+          <a href="getting-started.html" class="nav-next">
+            <span class="nav-label">Back to</span>
+            <span class="nav-title">Getting Started <i class="fa-solid fa-arrow-right"></i></span>
+          </a>
+        </nav>
+      </article>
+    </main>
+  </div>
+
+  <style>
+    .framework-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--space-l);
+      margin: var(--space-l) 0;
+    }
+
+    @media (min-width: 768px) {
+      .framework-grid {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+
+    .framework-category {
+      background-color: var(--color-surface);
+      padding: var(--space-l);
+      border-radius: var(--radius-m);
+      border: 1px solid var(--color-border);
+    }
+
+    .framework-category h4 {
+      margin: 0 0 var(--space-s) 0;
+      color: var(--color-accent);
+      font-size: var(--font-size-s);
+    }
+
+    .framework-category ul {
+      margin: 0;
+      padding-left: var(--space-l);
+    }
+
+    .framework-category li {
+      margin: var(--space-xs) 0;
+      font-size: var(--font-size-s);
+      color: var(--color-text-secondary);
+    }
+  </style>
+
+  <script>
+    document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
+      document.querySelector('.docs-sidebar').classList.toggle('open');
+    });
+  </script>
+</body>
+
+</html>

plugins/compounding-engineering/docs/pages/skills.html

@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-dark">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Skill Reference - Compounding Engineering</title>
+  <meta content="Complete reference for all 11 intelligent skills in the Compounding Engineering plugin." name="description" />
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link href="../css/style.css" rel="stylesheet" type="text/css" />
+  <link href="../css/docs.css" rel="stylesheet" type="text/css" />
+  <script src="../js/main.js" type="text/javascript" defer></script>
+</head>
+
+<body>
+  <div class="background-gradient"></div>
+  <div class="docs-layout">
+    <aside class="docs-sidebar">
+      <div class="sidebar-header">
+        <a href="../index.html" class="nav-brand">
+          <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+          <span class="logo-text">CE Docs</span>
+        </a>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section">
+          <h3>Getting Started</h3>
+          <ul>
+            <li><a href="getting-started.html">Installation</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Reference</h3>
+          <ul>
+            <li><a href="agents.html">Agents (23)</a></li>
+            <li><a href="commands.html">Commands (13)</a></li>
+            <li><a href="skills.html" class="active">Skills (11)</a></li>
+            <li><a href="mcp-servers.html">MCP Servers (2)</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="changelog.html">Changelog</a></li>
+          </ul>
+        </div>
+        <div class="nav-section">
+          <h3>On This Page</h3>
+          <ul>
+            <li><a href="#development-tools">Development (7)</a></li>
+            <li><a href="#content-workflow">Content & Workflow (3)</a></li>
+            <li><a href="#image-generation">Image Generation (1)</a></li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
+
+    <main class="docs-content">
+      <div class="docs-header">
+        <nav class="breadcrumb">
+          <a href="../index.html">Home</a>
+          <span>/</span>
+          <a href="getting-started.html">Docs</a>
+          <span>/</span>
+          <span>Skills</span>
+        </nav>
+        <button class="mobile-menu-toggle" data-sidebar-toggle>
+          <i class="fa-solid fa-bars"></i>
+        </button>
+      </div>
+
+      <article class="docs-article">
+        <h1><i class="fa-solid fa-wand-magic-sparkles color-accent"></i> Skill Reference</h1>
+        <p class="lead">
+          Complete documentation for all 11 intelligent skills. Skills provide deep domain expertise
+          that Claude Code can invoke on-demand, including references, templates, and workflows.
+        </p>
+
+        <div class="usage-box">
+          <h3>How to Use Skills</h3>
+          <div class="card-code-block">
+            <pre><code># In your prompt, reference the skill
+skill: [skill-name]
+
+# Examples
+skill: gemini-imagegen
+skill: dhh-ruby-style
+skill: create-agent-skills</code></pre>
+          </div>
+        </div>
+
+        <div class="callout callout-info">
+          <div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
+          <div class="callout-content">
+            <h4>Skills vs Agents</h4>
+            <p>
+              <strong>Agents</strong> are specialized personas invoked with <code>claude agent [name]</code>.
+              <strong>Skills</strong> are bodies of knowledge (references, templates, workflows) invoked with <code>skill: [name]</code>.
+            </p>
+          </div>
+        </div>
+
+        <!-- Development Tools -->
+        <section id="development-tools">
+          <h2><i class="fa-solid fa-code"></i> Development Tools (7)</h2>
+          <p>Skills for code generation, gem writing, and development patterns.</p>
+
+          <div class="skill-detail" id="create-agent-skills">
+            <div class="skill-detail-header">
+              <h3>create-agent-skills</h3>
+              <span class="skill-badge">Meta</span>
+            </div>
+            <p class="skill-detail-description">
+              Expert guidance for creating, writing, building, and refining Claude Code Skills.
+              Use when working with SKILL.md files or authoring new skills.
+            </p>
+            <h4>Capabilities</h4>
+            <ul>
+              <li>Skill architecture and best practices</li>
+              <li>Router pattern for complex multi-step skills</li>
+              <li>Progressive disclosure design principles</li>
+              <li>SKILL.md structure guidance</li>
+              <li>Asset management (workflows, references, templates, scripts)</li>
+              <li>XML structure patterns</li>
+            </ul>
+            <h4>Workflows Included</h4>
+            <ul>
+              <li><code>create-new-skill</code> - Start from scratch</li>
+              <li><code>add-reference</code> - Add reference documentation</li>
+              <li><code>add-template</code> - Add code templates</li>
+              <li><code>add-workflow</code> - Add step-by-step procedures</li>
+              <li><code>add-script</code> - Add executable scripts</li>
+              <li><code>audit-skill</code> - Validate skill structure</li>
+              <li><code>verify-skill</code> - Test skill functionality</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>skill: create-agent-skills</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="skill-creator">
+            <div class="skill-detail-header">
+              <h3>skill-creator</h3>
+              <span class="skill-badge">Meta</span>
+            </div>
+            <p class="skill-detail-description">
+              Guide for creating effective skills with a 6-step process.
+            </p>
+            <h4>6-Step Process</h4>
+            <ol>
+              <li>Understand skill usage patterns with examples</li>
+              <li>Plan reusable skill contents</li>
+              <li>Initialize skill using template</li>
+              <li>Edit skill with clear instructions</li>
+              <li>Package skill into distributable zip</li>
+              <li>Iterate based on testing feedback</li>
+            </ol>
+            <div class="card-code-block">
+              <pre><code>skill: skill-creator</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="dhh-ruby-style">
+            <div class="skill-detail-header">
+              <h3>dhh-ruby-style</h3>
+              <span class="skill-badge">Rails</span>
+            </div>
+            <p class="skill-detail-description">
+              Write Ruby and Rails code in DHH's distinctive 37signals style.
+              Triggers on Ruby/Rails code generation or when mentioning DHH, 37signals, Basecamp, HEY.
+            </p>
+            <h4>Key Patterns</h4>
+            <ul>
+              <li><strong>REST Purity</strong> - 7 REST actions only</li>
+              <li><strong>Fat Models</strong> - Business logic, authorization, broadcasting in models</li>
+              <li><strong>Thin Controllers</strong> - 1-5 line actions</li>
+              <li><strong>Current Attributes</strong> - Request context</li>
+              <li><strong>Hotwire/Turbo</strong> - Model-level broadcasting</li>
+            </ul>
+            <h4>Ruby Syntax Preferences</h4>
+            <ul>
+              <li>Symbol arrays <code>%i[...]</code></li>
+              <li>Modern hash syntax</li>
+              <li>Ternaries for simple conditionals</li>
+              <li>Bang methods for mutations</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>skill: dhh-ruby-style</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="andrew-kane-gem-writer">
+            <div class="skill-detail-header">
+              <h3>andrew-kane-gem-writer</h3>
+              <span class="skill-badge">Ruby</span>
+            </div>
+            <p class="skill-detail-description">
+              Write Ruby gems following Andrew Kane's proven patterns and philosophy.
+              Based on 100+ gems with 374M+ downloads.
+            </p>
+            <h4>Philosophy</h4>
+            <ul>
+              <li>Simplicity over cleverness</li>
+              <li>Zero or minimal dependencies</li>
+              <li>Explicit code over metaprogramming</li>
+              <li>Rails integration without Rails coupling</li>
+            </ul>
+            <h4>Key Patterns</h4>
+            <ul>
+              <li>Class macro DSL for configuration</li>
+              <li><code>ActiveSupport.on_load</code> for Rails integration</li>
+              <li><code>class << self</code> with <code>attr_accessor</code></li>
+              <li>Railtie pattern for hooks</li>
+              <li>Minitest (no RSpec)</li>
+            </ul>
+            <h4>Reference Files</h4>
+            <ul>
+              <li><code>references/module-organization.md</code></li>
+              <li><code>references/rails-integration.md</code></li>
+              <li><code>references/database-adapters.md</code></li>
+              <li><code>references/testing-patterns.md</code></li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>skill: andrew-kane-gem-writer</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="dspy-ruby">
+            <div class="skill-detail-header">
+              <h3>dspy-ruby</h3>
+              <span class="skill-badge">AI</span>
+            </div>
+            <p class="skill-detail-description">
+              Build type-safe, composable LLM applications with DSPy.rb.
+              Use when implementing predictable AI features in Ruby.
+            </p>
+            <h4>Predictor Types</h4>
+            <ul>
+              <li><strong>Predict</strong> - Basic inference</li>
+              <li><strong>ChainOfThought</strong> - Reasoning with explanations</li>
+              <li><strong>ReAct</strong> - Tool-using agents with iteration</li>
+              <li><strong>CodeAct</strong> - Dynamic code generation</li>
+            </ul>
+            <h4>Supported Providers</h4>
+            <ul>
+              <li>OpenAI (GPT-4, GPT-4o-mini)</li>
+              <li>Anthropic Claude</li>
+              <li>Google Gemini</li>
+              <li>Ollama (free, local)</li>
+              <li>OpenRouter</li>
+            </ul>
+            <h4>Requirements</h4>
+            <table class="docs-table">
+              <tr>
+                <td><code>OPENAI_API_KEY</code></td>
+                <td>For OpenAI provider</td>
+              </tr>
+              <tr>
+                <td><code>ANTHROPIC_API_KEY</code></td>
+                <td>For Anthropic provider</td>
+              </tr>
+              <tr>
+                <td><code>GOOGLE_API_KEY</code></td>
+                <td>For Gemini provider</td>
+              </tr>
+            </table>
+            <div class="card-code-block">
+              <pre><code>skill: dspy-ruby</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="frontend-design">
+            <div class="skill-detail-header">
+              <h3>frontend-design</h3>
+              <span class="skill-badge">Design</span>
+            </div>
+            <p class="skill-detail-description">
+              Create distinctive, production-grade frontend interfaces.
+              Generates creative, polished code that avoids generic AI aesthetics.
+            </p>
+            <h4>Design Thinking</h4>
+            <ul>
+              <li><strong>Purpose</strong> - What is the interface for?</li>
+              <li><strong>Tone</strong> - What feeling should it evoke?</li>
+              <li><strong>Constraints</strong> - Technical and brand limitations</li>
+              <li><strong>Differentiation</strong> - How to stand out</li>
+            </ul>
+            <h4>Focus Areas</h4>
+            <ul>
+              <li>Typography with distinctive font choices</li>
+              <li>Color & theme coherence with CSS variables</li>
+              <li>Motion and animation patterns</li>
+              <li>Spatial composition with asymmetry</li>
+              <li>Backgrounds (gradients, textures, patterns)</li>
+            </ul>
+            <div class="callout callout-tip">
+              <div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
+              <div class="callout-content">
+                <p>Avoids generic AI aesthetics like Inter fonts, purple gradients, and rounded corners everywhere.</p>
+              </div>
+            </div>
+            <div class="card-code-block">
+              <pre><code>skill: frontend-design</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="codify-docs">
+            <div class="skill-detail-header">
+              <h3>codify-docs</h3>
+              <span class="skill-badge">Docs</span>
+            </div>
+            <p class="skill-detail-description">
+              Capture solved problems as categorized documentation with YAML frontmatter for fast lookup.
+            </p>
+            <h4>Auto-Triggers</h4>
+            <p>Phrases: "that worked", "it's fixed", "working now", "problem solved"</p>
+            <h4>7-Step Process</h4>
+            <ol>
+              <li>Detect confirmation phrase</li>
+              <li>Gather context (module, symptom, investigation, root cause)</li>
+              <li>Check existing docs for similar issues</li>
+              <li>Generate filename</li>
+              <li>Validate YAML frontmatter</li>
+              <li>Create documentation in category directory</li>
+              <li>Cross-reference related issues</li>
+            </ol>
+            <h4>Categories</h4>
+            <ul>
+              <li><code>build-errors/</code></li>
+              <li><code>test-failures/</code></li>
+              <li><code>runtime-errors/</code></li>
+              <li><code>performance-issues/</code></li>
+              <li><code>database-issues/</code></li>
+              <li><code>security-issues/</code></li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>skill: codify-docs</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Content & Workflow -->
+        <section id="content-workflow">
+          <h2><i class="fa-solid fa-pen-fancy"></i> Content & Workflow (3)</h2>
+          <p>Skills for content editing, task tracking, and parallel development.</p>
+
+          <div class="skill-detail" id="every-style-editor">
+            <div class="skill-detail-header">
+              <h3>every-style-editor</h3>
+              <span class="skill-badge">Content</span>
+            </div>
+            <p class="skill-detail-description">
+              Review and edit copy to ensure adherence to Every's style guide.
+              Provides systematic line-by-line review.
+            </p>
+            <h4>Four-Phase Review</h4>
+            <ol>
+              <li><strong>Initial Assessment</strong> - Context, type, audience, tone</li>
+              <li><strong>Detailed Line Edit</strong> - Sentence structure, punctuation, capitalization</li>
+              <li><strong>Mechanical Review</strong> - Spacing, formatting, consistency</li>
+              <li><strong>Recommendations</strong> - Actionable improvement suggestions</li>
+            </ol>
+            <h4>Style Checks</h4>
+            <ul>
+              <li>Grammar and punctuation</li>
+              <li>Style guide compliance</li>
+              <li>Capitalization rules</li>
+              <li>Word choice optimization</li>
+              <li>Formatting consistency</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>skill: every-style-editor</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="file-todos">
+            <div class="skill-detail-header">
+              <h3>file-todos</h3>
+              <span class="skill-badge">Workflow</span>
+            </div>
+            <p class="skill-detail-description">
+              File-based todo tracking system in the <code>todos/</code> directory.
+              Integrates with code review and slash commands.
+            </p>
+            <h4>File Format</h4>
+            <div class="card-code-block">
+              <pre><code># Naming convention
+{issue_id}-{status}-{priority}-{description}.md
+
+# Examples
+001-pending-p1-security-vulnerability.md
+002-ready-p2-performance-optimization.md
+003-complete-p3-code-cleanup.md</code></pre>
+            </div>
+            <h4>Status Values</h4>
+            <ul>
+              <li><code>pending</code> - Needs triage</li>
+              <li><code>ready</code> - Approved for work</li>
+              <li><code>complete</code> - Done</li>
+            </ul>
+            <h4>Priority Values</h4>
+            <ul>
+              <li><code>p1</code> - Critical</li>
+              <li><code>p2</code> - Important</li>
+              <li><code>p3</code> - Nice-to-have</li>
+            </ul>
+            <h4>YAML Frontmatter</h4>
+            <div class="card-code-block">
+              <pre><code>---
+status: pending
+priority: p1
+issue_id: "001"
+tags: [security, authentication]
+dependencies: []
+---</code></pre>
+            </div>
+            <div class="card-code-block">
+              <pre><code>skill: file-todos</code></pre>
+            </div>
+          </div>
+
+          <div class="skill-detail" id="git-worktree">
+            <div class="skill-detail-header">
+              <h3>git-worktree</h3>
+              <span class="skill-badge">Git</span>
+            </div>
+            <p class="skill-detail-description">
+              Manage Git worktrees for isolated parallel development.
+              Handles creating, listing, switching, and cleaning up worktrees.
+            </p>
+            <h4>Commands</h4>
+            <div class="card-code-block">
+              <pre><code># Create new worktree
+bash scripts/worktree-manager.sh create feature-login
+
+# List worktrees
+bash scripts/worktree-manager.sh list
+
+# Switch to worktree
+bash scripts/worktree-manager.sh switch feature-login
+
+# Clean up completed worktrees
+bash scripts/worktree-manager.sh cleanup</code></pre>
+            </div>
+            <h4>Integration</h4>
+            <ul>
+              <li>Works with <code>/workflows:review</code> for isolated PR analysis</li>
+              <li>Works with <code>/workflows:work</code> for parallel feature development</li>
+            </ul>
+            <h4>Requirements</h4>
+            <ul>
+              <li>Git 2.8+ (for worktree support)</li>
+              <li>Worktrees stored in <code>.worktrees/</code> directory</li>
+            </ul>
+            <div class="card-code-block">
+              <pre><code>skill: git-worktree</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Image Generation -->
+        <section id="image-generation">
+          <h2><i class="fa-solid fa-image"></i> Image Generation (1)</h2>
+          <p>AI-powered image generation and editing.</p>
+
+          <div class="skill-detail featured" id="gemini-imagegen">
+            <div class="skill-detail-header">
+              <h3>gemini-imagegen</h3>
+              <span class="skill-badge highlight">AI Images</span>
+            </div>
+            <p class="skill-detail-description">
+              Generate and edit images using Google's Gemini API (Nano Banana).
+              Supports text-to-image, image editing, multi-turn refinement, and composition.
+            </p>
+
+            <h4>Features</h4>
+            <div class="skill-features">
+              <div class="feature-item"><i class="fa-solid fa-check"></i> Text-to-image generation</div>
+              <div class="feature-item"><i class="fa-solid fa-check"></i> Image editing & manipulation</div>
+              <div class="feature-item"><i class="fa-solid fa-check"></i> Multi-turn iterative refinement</div>
+              <div class="feature-item"><i class="fa-solid fa-check"></i> Multiple reference images (up to 14)</div>
+              <div class="feature-item"><i class="fa-solid fa-check"></i> Google Search grounding (Pro)</div>
+            </div>
+
+            <h4>Available Models</h4>
+            <table class="docs-table">
+              <thead>
+                <tr>
+                  <th>Model</th>
+                  <th>Resolution</th>
+                  <th>Best For</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>gemini-2.5-flash-image</code></td>
+                  <td>1024px</td>
+                  <td>Speed, high-volume tasks</td>
+                </tr>
+                <tr>
+                  <td><code>gemini-3-pro-image-preview</code></td>
+                  <td>Up to 4K</td>
+                  <td>Professional assets, complex instructions</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <h4>Quick Start</h4>
+            <div class="card-code-block">
+              <pre><code># Text-to-image
+python scripts/generate_image.py "A cat wearing a wizard hat" output.png
+
+# Edit existing image
+python scripts/edit_image.py input.png "Add a rainbow in the background" output.png
+
+# Multi-turn chat
+python scripts/multi_turn_chat.py</code></pre>
+            </div>
+
+            <h4>Image Configuration</h4>
+            <div class="card-code-block">
+              <pre><code>from google.genai import types
+
+response = client.models.generate_content(
+    model="gemini-3-pro-image-preview",
+    contents=[prompt],
+    config=types.GenerateContentConfig(
+        response_modalities=['TEXT', 'IMAGE'],
+        image_config=types.ImageConfig(
+            aspect_ratio="16:9",  # 1:1, 2:3, 3:2, 4:3, 16:9, 21:9
+            image_size="2K"       # 1K, 2K, 4K (Pro only)
+        ),
+    )
+)</code></pre>
+            </div>
+
+            <h4>Prompting Best Practices</h4>
+            <ul>
+              <li><strong>Photorealistic</strong> - Include camera details: lens type, lighting, angle, mood</li>
+              <li><strong>Stylized Art</strong> - Specify style explicitly: kawaii, cel-shading, bold outlines</li>
+              <li><strong>Text in Images</strong> - Be explicit about font style and placement (use Pro model)</li>
+              <li><strong>Product Mockups</strong> - Describe lighting setup and surface</li>
+            </ul>
+
+            <h4>Requirements</h4>
+            <table class="docs-table">
+              <tr>
+                <td><code>GEMINI_API_KEY</code></td>
+                <td>Required environment variable</td>
+              </tr>
+              <tr>
+                <td><code>google-genai</code></td>
+                <td>Python package</td>
+              </tr>
+              <tr>
+                <td><code>pillow</code></td>
+                <td>Python package for image handling</td>
+              </tr>
+            </table>
+
+            <div class="callout callout-info">
+              <div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
+              <div class="callout-content">
+                <p>All generated images include SynthID watermarks. Image-only mode won't work with Google Search grounding.</p>
+              </div>
+            </div>
+
+            <div class="card-code-block">
+              <pre><code>skill: gemini-imagegen</code></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- Navigation -->
+        <nav class="docs-nav-footer">
+          <a href="commands.html" class="nav-prev">
+            <span class="nav-label">Previous</span>
+            <span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Commands</span>
+          </a>
+          <a href="mcp-servers.html" class="nav-next">
+            <span class="nav-label">Next</span>
+            <span class="nav-title">MCP Servers <i class="fa-solid fa-arrow-right"></i></span>
+          </a>
+        </nav>
+      </article>
+    </main>
+  </div>
+
+  <script>
+    document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
+      document.querySelector('.docs-sidebar').classList.toggle('open');
+    });
+  </script>
+</body>
+
+</html>