4b2820bdce
Update all documentation to show the correct command syntax: - `/plan`, `/review`, `/work`, `/codify` (short form, autocompletes) Previously showed `/workflows:plan` etc. which doesn't work. The `name:` field in frontmatter determines the short command name. Fixes #19 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
583 lines
22 KiB
HTML
583 lines
22 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">
|
|
Five minutes from now, you'll run a single command that spins up 10 AI agents—each with a different specialty—to review your pull request in parallel. Security, performance, architecture, accessibility, all happening at once. That's the plugin. Let's get you set up.
|
|
</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>Think of the marketplace as an app store. You're adding it to Claude Code's list of places to look for plugins:</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>Now grab the plugin itself:</p>
|
|
<div class="card-code-block">
|
|
<pre><code>claude /plugin install compounding-engineering</code></pre>
|
|
</div>
|
|
|
|
<h3>Step 3: Verify Installation</h3>
|
|
<p>Check that it worked:</p>
|
|
<div class="card-code-block">
|
|
<pre><code>claude /plugin list</code></pre>
|
|
</div>
|
|
<p>You'll see <code>compounding-engineering</code> in the list. If you do, you're ready.</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 for browser automation, Context7 for docs) don't always auto-load. If you need them, there's a manual config step below. Otherwise, ignore this—everything else works fine.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Start Section -->
|
|
<section id="quick-start">
|
|
<h2><i class="fa-solid fa-rocket"></i> Quick Start</h2>
|
|
|
|
<p>Let's see what this thing can actually do. I'll show you three workflows you'll use constantly:</p>
|
|
|
|
<h3>Run a Code Review</h3>
|
|
<p>This is the big one. Type <code>/review</code> and watch it spawn 10+ specialized reviewers:</p>
|
|
<div class="card-code-block">
|
|
<pre><code># Review a PR by number
|
|
/review 123
|
|
|
|
# Review the current branch
|
|
/review
|
|
|
|
# Review a specific branch
|
|
/review feature/my-feature</code></pre>
|
|
</div>
|
|
|
|
<h3>Use a Specialized Agent</h3>
|
|
<p>Sometimes you just need one expert. Call them directly:</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 are like loading a reference book into Claude's brain. When you need deep knowledge in a specific domain:</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 the MCP servers didn't load automatically, paste this into <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>Right now, only one skill needs an API key. If you use Gemini's image generation:</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>Here's how it works in practice—the four-step loop you'll run over and over:</p>
|
|
|
|
<div class="philosophy-grid">
|
|
<div class="philosophy-card">
|
|
<div class="philosophy-icon"><i class="fa-solid fa-brain"></i></div>
|
|
<h4>1. Plan</h4>
|
|
<p>
|
|
Before you write a single line, figure out what you're building and why. Use research agents to gather examples, patterns, and context. Think of it as Google Search meets expert consultation.
|
|
</p>
|
|
</div>
|
|
<div class="philosophy-card">
|
|
<div class="philosophy-icon"><i class="fa-solid fa-robot"></i></div>
|
|
<h4>2. Delegate</h4>
|
|
<p>
|
|
Now build it—with help. Each agent specializes in something (Rails, security, design). You stay in the driver's seat, but you've got a team of specialists riding shotgun.
|
|
</p>
|
|
</div>
|
|
<div class="philosophy-card">
|
|
<div class="philosophy-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
|
|
<h4>3. Assess</h4>
|
|
<p>
|
|
Before you ship, run the gauntlet. Security agent checks for vulnerabilities. Performance agent flags N+1 queries. Architecture agent questions your design choices. All at once, all in parallel.
|
|
</p>
|
|
</div>
|
|
<div class="philosophy-card">
|
|
<div class="philosophy-icon"><i class="fa-solid fa-book"></i></div>
|
|
<h4>4. Codify</h4>
|
|
<p>
|
|
You just solved a problem. Write it down. Next time you (or your teammate) face this, you'll have a runbook. That's the "compounding" part—each solution makes the next one faster.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Using Agents Section -->
|
|
<section id="agents">
|
|
<h2><i class="fa-solid fa-users-gear"></i> Using Agents</h2>
|
|
|
|
<p>
|
|
Think of agents as coworkers with different job titles. You wouldn't ask your security engineer to design your UI, right? Same concept here—each agent has a specialty, and you call the one you need.
|
|
</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>
|
|
Commands are macros that run entire workflows for you. One command can spin up a dozen agents, coordinate their work, collect results, and hand you a summary. It's automation all the way down.
|
|
</p>
|
|
|
|
<h3>Running Commands</h3>
|
|
<div class="card-code-block">
|
|
<pre><code># Workflow commands
|
|
/plan
|
|
/review 123
|
|
/work
|
|
/codify
|
|
|
|
# Utility commands
|
|
/changelog
|
|
/triage
|
|
/reproduce-bug</code></pre>
|
|
</div>
|
|
|
|
<h3>The Review Workflow</h3>
|
|
<p>Let me show you what happens when you run <code>/review</code>. Here's the sequence:</p>
|
|
<ol>
|
|
<li><strong>Detection</strong> - Figures out what you want reviewed (PR number, branch name, or current changes)</li>
|
|
<li><strong>Isolation</strong> - Spins up a git worktree so the review doesn't mess with your working directory</li>
|
|
<li><strong>Parallel execution</strong> - Launches 10+ agents simultaneously (security, performance, architecture, accessibility...)</li>
|
|
<li><strong>Synthesis</strong> - Sorts findings by severity (P1 = blocks merge, P2 = should fix, P3 = nice-to-have)</li>
|
|
<li><strong>Persistence</strong> - Creates todo files so you don't lose track of issues</li>
|
|
<li><strong>Summary</strong> - Hands you a readable report with action items</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>
|
|
Here's the difference: agents are <em>who</em> does the work, skills are <em>what they know</em>. When you invoke a skill, you're loading a reference library into Claude's context—patterns, templates, examples, workflows. It's like handing Claude a technical manual.
|
|
</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>Peek inside a skill directory and you'll usually find:</p>
|
|
<ul>
|
|
<li><strong>SKILL.md</strong> - The main instructions (what Claude reads first)</li>
|
|
<li><strong>references/</strong> - Deep dives on concepts and patterns</li>
|
|
<li><strong>templates/</strong> - Copy-paste code snippets</li>
|
|
<li><strong>workflows/</strong> - Step-by-step "how to" guides</li>
|
|
<li><strong>scripts/</strong> - Actual executable code (when words aren't enough)</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>
|
|
You'll spend most of your time here. This workflow is why the plugin exists—to turn code review from a bottleneck into a superpower.
|
|
</p>
|
|
|
|
<h3>Basic Review</h3>
|
|
<div class="card-code-block">
|
|
<pre><code># Review a PR
|
|
/review 123
|
|
|
|
# Review current branch
|
|
/review</code></pre>
|
|
</div>
|
|
|
|
<h3>Understanding Findings</h3>
|
|
<p>Every finding gets a priority label. Here's what they mean:</p>
|
|
<ul>
|
|
<li><span class="badge badge-critical">P1 Critical</span> - Don't merge until this is fixed. Think: SQL injection, data loss, crashes in production.</li>
|
|
<li><span class="badge badge-important">P2 Important</span> - Fix before shipping. Performance regressions, N+1 queries, shaky architecture.</li>
|
|
<li><span class="badge badge-nice">P3 Nice-to-Have</span> - Would be better, but ship without it if you need to. Documentation, minor cleanup, style issues.</li>
|
|
</ul>
|
|
|
|
<h3>Working with Todo Files</h3>
|
|
<p>After a review, you'll have a <code>todos/</code> directory full of markdown files. Each one is a single issue to fix:</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>
|
|
The built-in agents cover a lot of ground, but every team has unique needs. Maybe you want a "rails-api-reviewer" that enforces your company's API standards. That's 10 minutes of work.
|
|
</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>Drop your agent file in one of these directories:</p>
|
|
<ul>
|
|
<li><code>.claude/agents/</code> - Just for this project (committed to git)</li>
|
|
<li><code>~/.claude/agents/</code> - Available in all your projects (stays on your machine)</li>
|
|
</ul>
|
|
|
|
<div class="callout callout-tip">
|
|
<div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
|
|
<div class="callout-content">
|
|
<h4>The Easy Way</h4>
|
|
<p>
|
|
Don't write the YAML by hand. Just run <code>/create-agent-skill</code> and answer a few questions. The command generates the file, validates the format, and puts it in the right place.
|
|
</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 heavier than agents—they're knowledge bases, not just prompts. You're building a mini library that Claude can reference. Worth the effort for things you do repeatedly.
|
|
</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>Get Help Building Skills</h4>
|
|
<p>
|
|
Type <code>skill: create-agent-skills</code> and Claude loads expert guidance on skill architecture, best practices, file organization, and validation. It's like having a senior engineer walk you through it.
|
|
</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>
|