92d0e23768
- Add /release-docs command for regenerating documentation site - Add commands/README.md with usage instructions for all commands - Add changelog.html page rendering CHANGELOG.md in HTML format - Add changelog CSS styles to docs.css - Update navigation in all docs pages to include changelog link - Fix command count from 16 to 13 in navigation - Update CLAUDE.md with: - Documentation Site section explaining structure - /release-docs command in update checklist - Instructions for keeping docs up-to-date 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
599 lines
20 KiB
HTML
599 lines
20 KiB
HTML
<!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 5 minutes, you'll have access to 24 specialized agents, 16 commands,
|
|
11 skills, and 2 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—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—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>4</td>
|
|
<td>Best practices, documentation, git history</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Design</td>
|
|
<td>3</td>
|
|
<td>UI iteration, Figma sync, design review</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Workflow</td>
|
|
<td>6</td>
|
|
<td>Bug reproduction, PR resolution, linting</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Docs</td>
|
|
<td>1</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+ 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>
|