Move docs to /docs for GitHub Pages
GitHub Pages is configured to serve from /docs in main branch. Moved documentation site from plugins/compounding-engineering/docs/ to repository root /docs folder. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kieran Klaassen
598
docs/pages/getting-started.html
Normal file
598
docs/pages/getting-started.html
Normal file
@@ -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—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>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>
|
||||
Reference in New Issue
Block a user