Files
claude-engineering-plugin/docs/index.html
Kieran Klaassen ab38e2ffd0 chore: bump to v2.28.0 and fix repo URLs
- Bump version to 2.28.0 in plugin.json and marketplace.json
  (CHANGELOG was updated but version numbers were missed)
- Fix all repo URLs from kieranklaassen/* to EveryInc/compound-engineering-plugin
- Update component counts in docs: 28 agents, 24 commands, 15 skills, 1 MCP

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-22 07:44:08 -08:00

1047 lines
51 KiB
HTML

<!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="Your code reviews just got 12 expert opinions in 30 seconds. 28 specialized agents, 24 workflow commands, and 15 skills that make today's work easier than yesterday's." 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="Get 12 expert code reviews in 30 seconds. 28 specialized agents that make today's work easier than yesterday's." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Compounding Engineering" />
<meta name="twitter:description" content="12 expert code reviews in 30 seconds. Make today's work easier than yesterday's." />
<!-- 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>
<!-- Pillar styles (inline for reliability) -->
<style>
.philosophy-pillars {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-xxl);
}
@media (min-width: 768px) {
.philosophy-pillars { grid-template-columns: repeat(2, 1fr); }
}
.pillar {
display: flex;
gap: var(--space-l);
padding: var(--space-xl);
background: var(--color-background);
border-radius: var(--radius-l);
border: 1.5px solid transparent;
background-image: linear-gradient(var(--color-background), var(--color-background)), linear-gradient(135deg, var(--color-accent-light), var(--color-border));
background-origin: border-box;
background-clip: padding-box, border-box;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.pillar:hover {
transform: translateY(-2px);
border-color: var(--color-accent);
box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2);
}
.pillar-icon {
flex-shrink: 0;
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
border-radius: var(--radius-l);
font-size: 36px;
color: var(--color-on-accent);
box-shadow: 0 8px 20px rgba(129, 140, 248, 0.3);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar:hover .pillar-icon {
transform: scale(1.1);
box-shadow: 0 12px 30px rgba(129, 140, 248, 0.5);
}
.pillar-content h3 {
margin: 0 0 var(--space-xs) 0;
font-size: 28px;
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
.pillar-tagline {
margin: 0 0 var(--space-m) 0;
font-size: 16px;
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
font-style: italic;
}
.pillar-description {
margin: 0 0 var(--space-l) 0;
font-size: 15px;
color: var(--color-text-secondary);
line-height: 1.7;
}
.pillar-tools {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
}
.tool-tag {
font-family: var(--font-mono);
font-size: 11px;
padding: 6px 12px;
background-color: var(--color-surface-hover);
color: var(--color-text-secondary);
border-radius: var(--radius-s);
border: 1px solid var(--color-border);
transition: all 0.25s ease;
font-weight: 500;
}
.tool-tag:hover {
background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface-hover));
border-color: var(--color-accent);
color: var(--color-accent);
}
@media (max-width: 767px) {
.pillar { flex-direction: column; text-align: center; }
.pillar-icon { margin: 0 auto; }
.pillar-tools { justify-content: center; }
}
</style>
</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>
</nav>
<div class="button-group">
<a href="https://github.com/EveryInc/compound-engineering-plugin" 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/compound-engineering-plugin/releases" class="eyebrow">
<i class="fa-solid fa-rocket"></i> Version 2.28.0 released!
</a>
<h1 class="balanced" style="margin-bottom: 32px;">
Your Code Reviews Just Got 12 Expert Opinions. In 30 Seconds.
</h1>
<p class="paragraph m secondary balanced" style="margin-bottom: 32px;">
Here's what happened when we shipped yesterday: security audit, performance analysis, architectural review, pattern detection, and eight more specialized checks—all running in parallel. No meetings. No waiting. Just answers. That's compounding engineering: 28 specialized agents, 24 workflow commands, and 15 skills that make today's work easier than yesterday's.
</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">28</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">24</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">15</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">1</div>
<div class="stat-label">MCP Server</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;">Why Your Third Code Review Should Be Easier Than Your First</h2>
<p class="paragraph l secondary balanced" style="font-size: 21px; line-height: 1.6; font-weight: 500;">
Think about the last time you fixed a Rails N+1 query. You found it. You fixed it. Then next month, different developer, same bug, same investigation. That's <em style="color: var(--color-accent); font-style: normal;">linear</em> engineering—you solved it, but the solution evaporated.
</p>
</div>
<!-- Philosophy Quote -->
<div class="philosophy-quote">
<blockquote>
"Most engineering work is amnesia. You solve a problem on Tuesday, forget the solution by Friday, and re-solve it next quarter. Compounding engineering is different: each solved problem teaches the system. The security review you run today makes tomorrow's review smarter. The pattern you codify this sprint prevents bugs in the next three."
</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">Stop starting over from scratch</p>
<p class="pillar-description">
You know that moment when you open a ticket and think "how did we solve this last time?" The framework-docs-researcher already knows. The git-history-analyzer remembers what worked in March. Run <code>/plan</code> and three research agents work in parallel—one reading docs, one analyzing your repo's history, one finding community patterns. In 60 seconds, you have a plan built on institutional memory instead of starting cold.
</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">Work with experts who never forget</p>
<p class="pillar-description">
The <code>security-sentinel</code> has checked 10,000 PRs for SQL injection. The <code>kieran-rails-reviewer</code> never approves a controller with business logic. They don't get tired, don't skip Friday afternoon reviews, don't forget the conventions you agreed on in March. Run <code>/work</code> and watch your plan execute with quality gates that actually enforce your standards—every single time.
</p>
<div class="pillar-tools">
<span class="tool-tag">27 specialized agents</span>
<span class="tool-tag">/work</span>
<span class="tool-tag">dhh-rails-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">Get twelve opinions without twelve meetings</p>
<p class="pillar-description">
Type <code>/review PR#123</code> and go get coffee. When you come back, you'll have a security audit (did you sanitize that user input?), performance analysis (N+1 spotted on line 47), architecture review (this breaks the pattern from v2.3), data integrity check (that migration will fail in production), and eight more specialized reviews. All running in parallel. All categorized by severity. All stored as actionable P1/P2/P3 todos you can knock out in order.
</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>Compound</h3>
<p class="pillar-tagline">Make sure you never solve the same bug twice</p>
<p class="pillar-description">
Remember that CORS issue you debugged for three hours last month? Neither do I. That's the problem. Run <code>/compound</code> right after you fix something and it captures the solution as searchable documentation with YAML frontmatter. Next time someone hits the same issue, they grep for "CORS production" and find your answer in five seconds instead of re-debugging for three hours. That's how you compound.
</p>
<div class="pillar-tools">
<span class="tool-tag">/compound</span>
<span class="tool-tag">compound-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> 27 Specialized Agents
</h2>
<p class="paragraph m secondary">
Think of them as coworkers who never quit. The security-sentinel has seen every SQL injection variant. The kieran-rails-reviewer enforces conventions with zero compromise. The performance-oracle spots N+1 queries while you're still reading the PR. Run them solo or launch twelve in parallel—your choice.
</p>
</div>
<!-- Review Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-code-pull-request"></i> Review Agents (11)</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 class="agent-card">
<div class="agent-header">
<span class="agent-name">julik-frontend-races-reviewer</span>
<span class="agent-badge">JavaScript</span>
</div>
<p class="agent-description">Review JavaScript and Stimulus code for race conditions, DOM event handling, promise management, and timer cleanup.</p>
<code class="agent-usage">claude agent julik-frontend-races-reviewer</code>
</div>
</div>
</div>
<!-- Research Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-microscope"></i> Research Agents (4)</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 (3)</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 (5)</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 (1)</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> 19 Powerful Commands
</h2>
<p class="paragraph m secondary">
Slash commands that replace entire workflows. <code>/review</code> is your code review committee. <code>/plan</code> is your research team. <code>/triage</code> sorts 50 todos in the time it takes you to read five. Each one automates hours of work into a single line.
</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">/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">/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">/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">/compound</code>
<span class="command-type-badge">core</span>
</div>
<p class="command-description">Document solved problems to compound team knowledge. 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 class="command-card">
<div class="command-header">
<code class="command-name">/release-docs</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Build and update the documentation site with current plugin components.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/deploy-docs</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Validate and prepare documentation for GitHub Pages deployment.</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> 12 Intelligent Skills
</h2>
<p class="paragraph m secondary">
Domain expertise on tap. Need to write a Ruby gem? The andrew-kane-gem-writer knows the patterns Andrew uses in 50+ popular gems. Building a Rails app? The dhh-rails-style enforces 37signals conventions. Generating images? The gemini-imagegen has Google's AI on speed dial. Just invoke the skill and watch it work.
</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-rails-style</span>
<span class="skill-badge">Rails</span>
</div>
<p class="skill-description">Write Ruby/Rails code in DHH's 37signals style. REST purity, fat models, thin controllers, Hotwire patterns.</p>
<code class="skill-usage">skill: dhh-rails-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">compound-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: compound-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">
Playwright gives Claude a browser—it can click buttons, take screenshots, fill forms, and validate what your users actually see. Context7 gives it instant access to docs for 100+ frameworks. Need to know how Next.js handles dynamic routes? Context7 fetches the answer in real-time instead of hallucinating from outdated training data.
</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">Your AI can now see and click like a user. Test flows, grab screenshots, debug what's actually rendering.</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">Stop getting outdated answers. Context7 fetches current docs from 100+ frameworks in real-time.</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">Three Commands. Zero Configuration.</h2>
<p class="paragraph m secondary">
You're literally 30 seconds from running your first 12-agent code review. No config files. No API keys (except for image generation). Just copy, paste, go.
</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/compound-engineering-plugin</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 compound-engineering</code></pre>
</div>
</div>
</div>
<div class="install-step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Ship Faster</h3>
<div class="card-code-block">
<pre><code># Run a 12-agent code review
/review PR#123
# Get a security audit
claude agent security-sentinel
# Generate an image
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>
It's the opposite of how most teams work. Normally, you fix a bug, ship it, and forget it. Next month someone hits the same bug and re-solves it from scratch. Compounding engineering means each fix teaches the system. Your third code review is faster than your first because the agents learned patterns. Your tenth security audit catches issues you missed in audit #2. The work accumulates instead of evaporating.
</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 coworkers with specific jobs. The security-sentinel does security reviews. The kieran-rails-reviewer enforces Rails conventions. You call them directly: <code>claude agent security-sentinel</code>.
</p>
<p>
<strong>Skills</strong> are expertise Claude can tap into when needed. The dhh-rails-style knows 37signals Rails patterns. The gemini-imagegen knows how to generate images. Claude invokes them automatically when relevant, or you can explicitly call them: <code>skill: dhh-rails-style</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>
Yeah, we know. It's a current limitation. The workaround is simple: manually add the MCP servers to your <code>.claude/settings.json</code> file. Check the README for copy-paste config. Takes 30 seconds and you're done.
</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>
Absolutely. We've got Python and TypeScript reviewers alongside the Rails ones. And the workflow commands, research agents, and skills like gemini-imagegen don't care what language you write. The security-sentinel finds SQL injection whether it's in Rails, Django, or Laravel.
</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>
Run <code>/create-agent-skill</code> or invoke the <code>create-agent-skills</code> skill. Both give you templates, enforce best practices, and walk you through the structure. You'll have a working agent or skill in minutes instead of reverse-engineering from examples.
</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>Install Once. Compound Forever.</h2>
<p class="paragraph m cta-subheading">
<strong>Your next code review takes 30 seconds.</strong> The one after that? Even faster. That's compounding. Get 27 expert agents, 19 workflow commands, and 12 specialized skills working for you right 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/compound-engineering-plugin" class="button tertiary cta-secondary">
<i class="fa-brands fa-github"></i> View on GitHub
</a>
</div>
<p class="cta-trust">Join developers who ship faster because yesterday's work makes today easier</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/compound-engineering-plugin" 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>