john/claude-engineering-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite all docs copy in Pragmatic Technical Writing style

Browse Source 
Applied Hunt/Thomas and Joel Spolsky writing principles:
- Concrete before abstract (stories and examples first)
- Physical analogies for technical concepts
- Conversational voice with "you" and contractions
- Removed passive voice and weasel words
- Added memorable metaphors and hooks

Pages updated:
- index.html: New hero, philosophy section with N+1 query story
- agents.html: Each agent described with concrete scenarios
- commands.html: Action-oriented descriptions
- getting-started.html: Direct, conversational guide
- skills.html: Clear "when to use this" for each skill
- mcp-servers.html: Concrete examples of what each tool does

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kieran Klaassen
2025-11-26 15:50:29 -08:00
parent 13d317029f
commit d367b2574d
6 changed files with 196 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
docs/index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<title>Compounding Engineering - AI-Powered Development Tools for Claude Code</title>
<meta content="AI-powered development tools that get smarter with every use. 23 agents, 16 commands, 11 skills, two MCP servers." name="description" />
<meta content="Your code reviews just got 12 expert opinions in 30 seconds. 23 specialized agents, 16 workflow commands, and 11 skills that make today's work easier than yesterday's." name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<!-- Open Graph -->
@@ -12,10 +12,10 @@
<meta property="og:site_name" content="Compounding Engineering" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="Compounding Engineering - AI Development Tools" />
<meta property="og:description" content="AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last." />
<meta property="og:description" content="Get 12 expert code reviews in 30 seconds. 23 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="AI-powered development tools for Claude Code" />
<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" />
@@ -61,11 +61,10 @@
<i class="fa-solid fa-rocket"></i> Version 2.6.0 released!
</a>
<h1 class="balanced" style="margin-bottom: 32px;">
AI-Powered Development Tools That Get Smarter With Every Use
Your Code Reviews Just Got 12 Expert Opinions. In 30 Seconds.
</h1>
<p class="paragraph m secondary balanced" style="margin-bottom: 32px;">
Make each unit of engineering work easier than the last. 23 specialized agents, 16 powerful commands,
11 intelligent skills, and two MCP servers for code review, research, design, and workflow automation.
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: 23 specialized agents, 16 workflow commands, and 11 skills that make today's work easier than yesterday's.
</p>
<div class="button-group margin-paragraph centered">
<a href="#install" class="button primary">
@@ -107,18 +106,16 @@
<!-- Philosophy Section -->
<section id="philosophy" class="philosophy-section">
<div class="heading centered">
<h2 class="no-top-margin" style="font-size: 42px; margin-bottom: 16px;">The Compounding Engineering Philosophy</h2>
<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;">
Every unit of engineering work should make subsequent units of work <em style="color: var(--color-accent); font-style: normal;">easier</em>&mdash;not harder.
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 creates linear value: you build a feature, it works, done.
Compounding engineering creates exponential value: each solved problem teaches the system,
each pattern becomes reusable, each review strengthens future reviews."
"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>
@@ -128,11 +125,9 @@
<div class="pillar-icon"><i class="fa-solid fa-brain"></i></div>
<div class="pillar-content">
<h3>Plan</h3>
<p class="pillar-tagline">Understand before you build</p>
<p class="pillar-tagline">Stop starting over from scratch</p>
<p class="pillar-description">
Before writing a single line of code, gather context. Research agents explore
documentation, analyze git history, and find best practices. The <code>/workflows:plan</code>
command orchestrates three research agents in parallel to create comprehensive implementation plans.
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>/workflows: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>
@@ -147,11 +142,9 @@
<div class="pillar-icon"><i class="fa-solid fa-robot"></i></div>
<div class="pillar-content">
<h3>Delegate</h3>
<p class="pillar-tagline">Leverage specialized expertise</p>
<p class="pillar-tagline">Work with experts who never forget</p>
<p class="pillar-description">
Each agent brings deep domain knowledge. The <code>kieran-rails-reviewer</code> knows Rails
conventions like an expert. The <code>security-sentinel</code> catches OWASP vulnerabilities.
The <code>/workflows:work</code> command executes plans while maintaining quality gates.
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>/workflows: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">24 specialized agents</span>
@@ -166,11 +159,9 @@
<div class="pillar-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
<div class="pillar-content">
<h3>Assess</h3>
<p class="pillar-tagline">Multiple perspectives, comprehensive coverage</p>
<p class="pillar-tagline">Get twelve opinions without twelve meetings</p>
<p class="pillar-description">
The <code>/workflows:review</code> command launches 12 or more review agents in parallel: security,
performance, architecture, data integrity, patterns, and more. Findings are categorized by
severity (P1/P2/P3) and stored as actionable todo files.
Type <code>/workflows: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>
@@ -185,10 +176,9 @@
<div class="pillar-icon"><i class="fa-solid fa-book"></i></div>
<div class="pillar-content">
<h3>Codify</h3>
<p class="pillar-tagline">Turn solutions into knowledge</p>
<p class="pillar-tagline">Make sure you never solve the same bug twice</p>
<p class="pillar-description">
Every solved problem should teach the system. The <code>/workflows:codify</code> command
captures solutions as searchable documentation with YAML frontmatter for fast lookup.
Remember that CORS issue you debugged for three hours last month? Neither do I. That's the problem. Run <code>/workflows:codify</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">/workflows:codify</span>
@@ -208,8 +198,7 @@
<i class="fa-solid fa-users-gear color-accent"></i> 23 Specialized Agents
</h2>
<p class="paragraph m secondary">
Each agent brings deep expertise in a specific domain. Run them individually or orchestrate
multiple agents in parallel for comprehensive analysis.
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>
@@ -440,8 +429,7 @@
<i class="fa-solid fa-terminal color-accent"></i> 16 Powerful Commands
</h2>
<p class="paragraph m secondary">
Slash commands for common workflows. From code review to bug triage,
these commands automate complex multi-step processes.
Slash commands that replace entire workflows. <code>/workflows:review</code> is your code review committee. <code>/workflows: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>
@@ -579,8 +567,7 @@
<i class="fa-solid fa-wand-magic-sparkles color-accent"></i> 11 Intelligent Skills
</h2>
<p class="paragraph m secondary">
Skills provide deep domain expertise that Claude Code can invoke on-demand.
From Ruby gem patterns to image generation.
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-ruby-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>
@@ -722,8 +709,7 @@
<i class="fa-solid fa-server color-accent"></i> Two MCP Servers
</h2>
<p class="paragraph m secondary">
Model Context Protocol servers extend Claude Code's capabilities with
browser automation and framework documentation lookup.
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>
@@ -733,7 +719,7 @@
<i class="fa-brands fa-chrome mcp-icon"></i>
<span class="mcp-name">Playwright</span>
</div>
<p class="mcp-description">Browser automation for testing, screenshots, and web interactions.</p>
<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>
@@ -751,7 +737,7 @@
<i class="fa-solid fa-book-open mcp-icon"></i>
<span class="mcp-name">Context7</span>
</div>
<p class="mcp-description">Framework documentation lookup for more than 100 frameworks.</p>
<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>
@@ -767,9 +753,9 @@
<!-- Installation Section -->
<section id="install" class="install-section">
<div class="heading centered">
<h2 class="no-top-margin">Get Started in Seconds</h2>
<h2 class="no-top-margin">Three Commands. Zero Configuration.</h2>
<p class="paragraph m secondary">
Install the plugin and start using AI-powered development tools immediately.
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>
@@ -795,15 +781,15 @@
<div class="install-step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Start Using</h3>
<h3>Ship Faster</h3>
<div class="card-code-block">
<pre><code># Run a code review
<pre><code># Run a 12-agent code review
/workflows:review PR#123
# Use an agent
claude agent kieran-rails-reviewer
# Get a security audit
claude agent security-sentinel
# Invoke a skill
# Generate an image
skill: gemini-imagegen</code></pre>
</div>
</div>
@@ -824,9 +810,7 @@ skill: gemini-imagegen</code></pre>
</summary>
<div class="accordion-content">
<p>
Compounding Engineering is a philosophy that every unit of engineering work should make subsequent
units easier&mdash;not harder. This plugin embodies that philosophy with tools that learn from patterns,
automate repetitive tasks, and build institutional knowledge.
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>
@@ -837,12 +821,10 @@ skill: gemini-imagegen</code></pre>
</summary>
<div class="accordion-content">
<p>
<strong>Agents</strong> are specialized personas that can be invoked to perform specific tasks
(e.g., code review, research). They're called with <code>claude agent [name]</code>.
<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> provide domain expertise that Claude Code can use on-demand. They include
reference materials, templates, and workflows. They're invoked with <code>skill: [name]</code>.
<strong>Skills</strong> are expertise Claude can tap into when needed. The dhh-ruby-style knows 37signals patterns. The gemini-imagegen knows how to generate images. Claude invokes them automatically when relevant, or you can explicitly call them: <code>skill: dhh-ruby-style</code>.
</p>
</div>
</details>
@@ -853,8 +835,7 @@ skill: gemini-imagegen</code></pre>
</summary>
<div class="accordion-content">
<p>
This is a known issue. As a workaround, manually add the MCP servers to your
<code>.claude/settings.json</code> file. See the README for the exact configuration.
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>
@@ -865,8 +846,7 @@ skill: gemini-imagegen</code></pre>
</summary>
<div class="accordion-content">
<p>
Yes! While many agents are specialized for Rails, we also have Python and TypeScript reviewers.
The workflow commands, research agents, and skills like gemini-imagegen work with any language.
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>
@@ -877,8 +857,7 @@ skill: gemini-imagegen</code></pre>
</summary>
<div class="accordion-content">
<p>
Use the <code>/create-agent-skill</code> command or the <code>create-agent-skills</code> skill
for expert guidance. The skill includes templates, best practices, and validation workflows.
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>
@@ -889,9 +868,9 @@ skill: gemini-imagegen</code></pre>
<section class="promo-cta">
<div class="heading centered">
<span class="cta-badge"><i class="fa-solid fa-bolt"></i> Free & Open Source</span>
<h2>Transform Your Development Workflow in Minutes</h2>
<h2>Install Once. Compound Forever.</h2>
<p class="paragraph m cta-subheading">
<strong>Install once. Compound forever.</strong> Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you—starting now.
<strong>Your next code review takes 30 seconds.</strong> The one after that? Even faster. That's compounding. Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you right now.
</p>
<div class="button-group margin-paragraph centered">
<a href="#install" class="button primary cta-primary">
@@ -902,7 +881,7 @@ skill: gemini-imagegen</code></pre>
<i class="fa-brands fa-github"></i> View on GitHub
</a>
</div>
<p class="cta-trust">Join 1,000+ developers building smarter with AI-powered workflows</p>
<p class="cta-trust">Join developers who ship faster because yesterday's work makes today easier</p>
</div>
</section>
</main>