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

74
docs/pages/agents.html
View File

@@ -75,8 +75,7 @@
<article class="docs-article">
<h1><i class="fa-solid fa-users-gear color-accent"></i> Agent Reference</h1>
<p class="lead">
Complete documentation for all 23 specialized AI agents. Each agent brings deep expertise
in a specific domain and can be invoked individually or orchestrated together.
Think of agents as your expert teammates who never sleep. You've got 23 specialists here—each one obsessed with a single domain. Call them individually when you need focused expertise, or orchestrate them together for multi-angle analysis. They're opinionated, they're fast, and they remember your codebase better than you do.
</p>
<div class="usage-box">
@@ -97,7 +96,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<!-- Review Agents -->
<section id="review-agents">
<h2><i class="fa-solid fa-code-pull-request"></i> Review Agents (10)</h2>
<p>Code review agents that examine changes from multiple perspectives: conventions, security, performance, architecture, and quality.</p>
<p>Your code review dream team. These agents catch what humans miss at 2am—security holes, performance cliffs, architectural drift, and those "it works but I hate it" moments. They're picky. They disagree with each other. That's the point.</p>
<div class="agent-detail" id="kieran-rails-reviewer">
<div class="agent-detail-header">
@@ -105,8 +104,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Rails</span>
</div>
<p class="agent-detail-description">
Super senior Rails developer with impeccable taste and an exceptionally high bar for Rails code quality.
Reviews with strict conventions while being pragmatic on new isolated code.
Your senior Rails developer who's seen too many "clever" solutions fail in production. Obsessed with code that's boring, predictable, and maintainable. Strict on existing code (because touching it risks everything), pragmatic on new isolated features (because shipping matters). If you've ever thought "this works but feels wrong," this reviewer will tell you why.
</p>
<h4>Key Principles</h4>
<ul>
@@ -129,8 +127,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Rails</span>
</div>
<p class="agent-detail-description">
Brutally honest Rails code review from David Heinemeier Hansson's perspective.
Focuses on Rails conventions, simplicity, and avoiding over-engineering.
What if DHH reviewed your Rails PR? He'd ask why you're building React inside Rails, why you need six layers of abstraction for a form, and whether you've forgotten that Rails already solved this problem. This agent channels that energy—blunt, opinionated, allergic to complexity.
</p>
<h4>Key Focus Areas</h4>
<ul>
@@ -150,8 +147,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Python</span>
</div>
<p class="agent-detail-description">
Reviews Python code with an exceptionally high quality bar. Enforces type hints, Pythonic patterns,
and modern Python 3.10+ syntax.
Your Pythonic perfectionist who believes type hints aren't optional and <code>dict.get()</code> beats try/except KeyError. Expects modern Python 3.10+ patterns—no legacy syntax, no <code>typing.List</code> when <code>list</code> works natively. If your code looks like Java translated to Python, prepare for rewrites.
</p>
<h4>Key Focus Areas</h4>
<ul>
@@ -172,8 +168,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">TypeScript</span>
</div>
<p class="agent-detail-description">
Reviews TypeScript code with an exceptionally high quality bar. Enforces type safety,
modern patterns, and clean architecture.
TypeScript's type system is a gift—don't throw it away with <code>any</code>. This reviewer treats <code>any</code> like a code smell that needs justification. Expects proper types, clean imports, and code that doesn't need comments because the types explain everything. You added TypeScript for safety; this agent makes sure you actually get it.
</p>
<h4>Key Focus Areas</h4>
<ul>
@@ -194,8 +189,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge critical">Security</span>
</div>
<p class="agent-detail-description">
Performs security audits, vulnerability assessments, and OWASP compliance checks.
Essential for any code handling authentication, payments, or sensitive data.
Security vulnerabilities hide in boring code—the "just grab the user ID from params" line that ships a privilege escalation bug to production. This agent thinks like an attacker: SQL injection, XSS, auth bypass, leaked secrets. Run it before touching authentication, payments, or anything with PII. Your users' data depends on paranoia.
</p>
<h4>Security Checks</h4>
<ul>
@@ -218,8 +212,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Performance</span>
</div>
<p class="agent-detail-description">
Analyzes code for performance issues, bottlenecks, and scalability concerns.
Projects performance at 10x, 100x, and 1000x scale.
Your code works fine with 10 users. What happens at 10,000? This agent time-travels to your future scaling problems—N+1 queries that murder your database, O(n²) algorithms hiding in loops, missing indexes, memory leaks. It thinks in Big O notation and asks uncomfortable questions about what breaks first when traffic spikes.
</p>
<h4>Analysis Areas</h4>
<ul>
@@ -242,8 +235,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Architecture</span>
</div>
<p class="agent-detail-description">
Analyzes code changes from an architectural perspective. Evaluates system structure,
SOLID principles, and API contracts.
Every "small change" either reinforces your architecture or starts eroding it. This agent zooms out to see if your fix actually fits the system's design—or if you're bolting duct tape onto a crumbling foundation. It speaks SOLID principles, microservice boundaries, and API contracts. Call it when you're about to make a change that "feels weird."
</p>
<h4>Analysis Areas</h4>
<ul>
@@ -265,8 +257,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge critical">Data</span>
</div>
<p class="agent-detail-description">
Reviews database migrations, data models, and data persistence code.
Ensures data safety and privacy compliance.
Migrations can't be rolled back once they're run on production. This agent is your last line of defense before you accidentally drop a column with user data, create a race condition in transactions, or violate GDPR. It obsesses over referential integrity, rollback safety, and data constraints. Your database is forever; migrations should be paranoid.
</p>
<h4>Review Areas</h4>
<ul>
@@ -288,8 +279,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Patterns</span>
</div>
<p class="agent-detail-description">
Analyzes code for design patterns, anti-patterns, naming conventions, and duplication.
Uses tools like jscpd for duplication detection.
Patterns tell stories—Factory, Observer, God Object, Copy-Paste Programming. This agent reads your code like an archaeologist reading artifacts. It spots the good patterns (intentional design), the anti-patterns (accumulated tech debt), and the duplicated blocks you swore you'd refactor later. Runs tools like jscpd because humans miss repetition that machines catch instantly.
</p>
<h4>Detection Areas</h4>
<ul>
@@ -311,8 +301,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Quality</span>
</div>
<p class="agent-detail-description">
Ensures code is as simple and minimal as possible. Applies YAGNI rigorously
and challenges unnecessary abstractions.
Simplicity is violent discipline. This agent asks "do you actually need this?" about every line, every abstraction, every dependency. YAGNI isn't a suggestion—it's the law. Your 200-line feature with three layers of indirection? This agent will show you the 50-line version that does the same thing. Complexity is a liability; simplicity compounds.
</p>
<h4>Simplification Checks</h4>
<ul>
@@ -332,7 +321,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<!-- Research Agents -->
<section id="research-agents">
<h2><i class="fa-solid fa-microscope"></i> Research Agents (4)</h2>
<p>Research agents that gather information from documentation, repositories, and git history to inform development decisions.</p>
<p>Stop guessing. These agents dig through documentation, GitHub repos, git history, and real-world examples to give you answers backed by evidence. They read faster than you, remember more than you, and synthesize patterns you'd miss. Perfect for "how should I actually do this?" questions.</p>
<div class="agent-detail" id="framework-docs-researcher">
<div class="agent-detail-header">
@@ -340,7 +329,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Research</span>
</div>
<p class="agent-detail-description">
Gathers comprehensive documentation and best practices for frameworks, libraries, or dependencies.
Official docs are scattered. GitHub examples are inconsistent. Deprecations hide in changelogs. This agent pulls it all together—docs, source code, version constraints, real-world examples. Ask "how do I use Hotwire Turbo?" and get back patterns that actually work in production, not toy tutorials.
</p>
<h4>Capabilities</h4>
<ul>
@@ -361,7 +350,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Research</span>
</div>
<p class="agent-detail-description">
Researches and gathers external best practices, documentation, and examples for any technology.
"Best practices" are everywhere and contradictory. This agent cuts through the noise by evaluating sources (official docs, trusted blogs, real GitHub repos), checking recency, and synthesizing actionable guidance. You get code templates, patterns that scale, and answers you can trust—not StackOverflow copy-paste roulette.
</p>
<h4>Capabilities</h4>
<ul>
@@ -382,7 +371,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Git</span>
</div>
<p class="agent-detail-description">
Archaeological analysis of code repositories to understand evolution and patterns.
Your codebase has a history—decisions, patterns, mistakes. This agent does archaeology with git tools: file evolution, blame analysis, contributor expertise mapping. Ask "why does this code exist?" and get the commit that explains it. Spot patterns in how bugs appear. Understand the design decisions buried in history.
</p>
<h4>Analysis Techniques</h4>
<ul>
@@ -403,7 +392,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Research</span>
</div>
<p class="agent-detail-description">
Conducts thorough research on repository structure, documentation, and patterns.
Every repo has conventions—some documented, most tribal knowledge. This agent reads ARCHITECTURE.md, issue templates, PR patterns, and actual code to reverse-engineer the standards. Perfect for joining a new project or ensuring your PR matches the team's implicit style. Finds the rules nobody wrote down.
</p>
<h4>Analysis Areas</h4>
<ul>
@@ -422,7 +411,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<!-- Workflow Agents -->
<section id="workflow-agents">
<h2><i class="fa-solid fa-gears"></i> Workflow Agents (5)</h2>
<p>Workflow agents that automate common development tasks like bug reproduction, PR resolution, and linting.</p>
<p>Tedious work you hate doing. These agents handle the grind—reproducing bugs, resolving PR comments, running linters, analyzing specs. They're fast, they don't complain, and they free you up to solve interesting problems instead of mechanical ones.</p>
<div class="agent-detail" id="bug-reproduction-validator">
<div class="agent-detail-header">
@@ -430,8 +419,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Bugs</span>
</div>
<p class="agent-detail-description">
Verifies whether bug reports are actual bugs through systematic reproduction.
Classifies bugs and provides severity assessment.
Half of bug reports aren't bugs—they're user errors, environment issues, or misunderstood features. This agent systematically reproduces the reported behavior, classifies what it finds (Confirmed, Can't Reproduce, Not a Bug, etc.), and assesses severity. Saves you from chasing ghosts or missing real issues.
</p>
<h4>Classification Types</h4>
<ul>
@@ -453,7 +441,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">PR</span>
</div>
<p class="agent-detail-description">
Addresses code review comments by implementing requested changes and reporting resolutions.
Code review comments pile up. This agent reads them, plans fixes, implements changes, and reports back what it did. It doesn't argue with reviewers or skip hard feedback—it just resolves the work systematically. Great for burning through a dozen "change this variable name" comments in seconds.
</p>
<h4>Workflow</h4>
<ul>
@@ -474,8 +462,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Quality</span>
</div>
<p class="agent-detail-description">
Runs linting and code quality checks on Ruby and ERB files.
Uses Haiku model for efficiency.
Linters are pedantic robots that enforce consistency. This agent runs StandardRB, ERBLint, and Brakeman for you—checking Ruby style, ERB templates, and security issues. It's fast (uses the Haiku model) and catches the formatting noise before CI does.
</p>
<h4>Tools Run</h4>
<ul>
@@ -494,8 +481,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Testing</span>
</div>
<p class="agent-detail-description">
Analyzes specifications and plans for user flows and gap identification.
Uses Sonnet model for analysis.
Specs always have gaps—edge cases nobody thought about, ambiguous requirements, missing error states. This agent maps all possible user flows, identifies what's unclear or missing, and generates the questions you need to ask stakeholders. Runs before you code to avoid building the wrong thing.
</p>
<h4>Analysis Areas</h4>
<ul>
@@ -516,7 +502,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Content</span>
</div>
<p class="agent-detail-description">
Reviews and edits text content to conform to Every's specific style guide.
Style guides are arbitrary rules that make writing consistent. This agent enforces Every's particular quirks—title case in headlines, no overused filler words ("actually," "very"), active voice, Oxford commas. It's a line-by-line grammar cop for content that needs to match the brand.
</p>
<h4>Style Checks</h4>
<ul>
@@ -535,7 +521,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<!-- Design Agents -->
<section id="design-agents">
<h2><i class="fa-solid fa-palette"></i> Design Agents (3)</h2>
<p>Design agents that help with UI implementation, Figma synchronization, and iterative design refinement.</p>
<p>Design is iteration. These agents take screenshots, compare them to Figma, make targeted improvements, and repeat. They fix spacing, alignment, colors, typography—the visual details that compound into polish. Perfect for closing the gap between "it works" and "it looks right."</p>
<div class="agent-detail" id="design-iterator">
<div class="agent-detail-header">
@@ -543,8 +529,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Design</span>
</div>
<p class="agent-detail-description">
Systematic UI/UX design refinement through iterative improvements.
Takes screenshots, analyzes, implements changes, and repeats.
Design doesn't happen in one pass. This agent runs a loop: screenshot the UI, analyze what's off (spacing, colors, alignment), implement 3-5 targeted fixes, repeat. Run it for 10 iterations and watch rough interfaces transform into polished designs through systematic refinement.
</p>
<h4>Process</h4>
<ul>
@@ -565,8 +550,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Figma</span>
</div>
<p class="agent-detail-description">
Automatically detects and fixes visual differences between Figma designs and web implementations.
Uses Sonnet model.
Designers hand you a Figma file. You build it. Then: "the spacing is wrong, the font is off, the colors don't match." This agent compares your implementation to the Figma spec, identifies every visual discrepancy, and fixes them automatically. Designers stay happy. You stay sane.
</p>
<h4>Workflow</h4>
<ul>
@@ -587,8 +571,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Review</span>
</div>
<p class="agent-detail-description">
Verifies UI implementations match Figma design specifications.
Uses Opus model for detailed analysis.
Before you ship UI changes, run this agent. It compares your implementation against Figma at a pixel level—layouts, typography, colors, spacing, responsive behavior. Uses the Opus model for detailed visual analysis. Catches the "close enough" mistakes that users notice but you don't.
</p>
<h4>Comparison Areas</h4>
<ul>
@@ -614,8 +597,7 @@ claude agent security-sentinel "Audit the payment flow"</code></pre>
<span class="agent-badge">Docs</span>
</div>
<p class="agent-detail-description">
Creates/updates README files following Ankane-style template for Ruby gems.
Optimized for conciseness with every sentence kept to 15 words or less.
Andrew Kane writes READMEs that are models of clarity—concise, scannable, zero fluff. This agent generates gem documentation in that style: 15 words max per sentence, imperative voice, single-purpose code examples. If your README rambles, this agent will fix it.
</p>
<h4>Section Order</h4>
<ol>

39
docs/pages/commands.html
View File

@@ -72,21 +72,20 @@
<article class="docs-article">
<h1><i class="fa-solid fa-terminal color-accent"></i> Command Reference</h1>
<p class="lead">
Complete documentation for all 16 slash commands. Commands automate complex multi-step workflows
by orchestrating multiple agents, tools, and processes.
Here's the thing about slash commands: they're workflows you'd spend 20 minutes doing manually, compressed into one line. Type <code>/workflows:plan</code> and watch three agents launch in parallel to research your codebase while you grab coffee. That's the point—automation that actually saves time, not busywork dressed up as productivity.
</p>
<!-- Workflow Commands -->
<section id="workflow-commands">
<h2><i class="fa-solid fa-arrows-spin"></i> Workflow Commands (four)</h2>
<p>Core workflow commands that embody the Plan-Delegate-Assess-Codify philosophy.</p>
<p>These are the big four: Plan your feature, Review your code, Work through the implementation, and Codify what you learned. Every professional developer does this cycle—these commands just make you faster at it.</p>
<div class="command-detail" id="workflows-plan">
<div class="command-detail-header">
<code class="command-detail-name">/workflows:plan</code>
</div>
<p class="command-detail-description">
Transform feature descriptions into well-structured project plans following conventions.
You've got a feature request and a blank page. This command turns "we need OAuth" into a structured plan that actually tells you what to build—researched, reviewed, and ready to execute.
</p>
<h4>Arguments</h4>
<p><code>[feature description, bug report, or improvement idea]</code></p>
@@ -127,7 +126,7 @@
<code class="command-detail-name">/workflows:review</code>
</div>
<p class="command-detail-description">
Perform exhaustive code reviews using multi-agent analysis, ultra-thinking, and worktrees.
Twelve specialized reviewers examine your PR in parallel—security, performance, architecture, patterns. It's like code review by committee, except the committee finishes in two minutes instead of two days.
</p>
<h4>Arguments</h4>
<p><code>[PR number, GitHub URL, branch name, or "latest"]</code></p>
@@ -167,7 +166,7 @@
<code class="command-detail-name">/workflows:work</code>
</div>
<p class="command-detail-description">
Execute work plans efficiently while maintaining quality and finishing features.
Point this at a plan file and watch it execute—reading requirements, setting up environment, running tests, creating commits, opening PRs. It's the "just build the thing" button you wish you always had.
</p>
<h4>Arguments</h4>
<p><code>[plan file, specification, or todo file path]</code></p>
@@ -214,7 +213,7 @@
<code class="command-detail-name">/workflows:codify</code>
</div>
<p class="command-detail-description">
Document a recently solved problem for the knowledge base.
Just fixed a gnarly bug? This captures the solution before you forget it. Seven agents analyze what you did, why it worked, and how to prevent it next time. Your future self will thank you.
</p>
<h4>Arguments</h4>
<p><code>[optional: brief context about the fix]</code></p>
@@ -246,14 +245,14 @@
<!-- Utility Commands -->
<section id="utility-commands">
<h2><i class="fa-solid fa-wrench"></i> Utility Commands (12)</h2>
<p>Specialized commands for specific tasks like changelog generation, bug reporting, and parallel resolution.</p>
<p>The supporting cast—commands that do one specific thing really well. Generate changelogs, resolve todos in parallel, triage findings, create new commands. The utilities you reach for daily.</p>
<div class="command-detail" id="changelog">
<div class="command-detail-header">
<code class="command-detail-name">/changelog</code>
</div>
<p class="command-detail-description">
Create engaging changelogs for recent merges to main branch.
Turn your git history into a changelog people actually want to read. Breaking changes at the top, fun facts at the bottom, everything organized by what matters to your users.
</p>
<h4>Arguments</h4>
<p><code>[optional: daily|weekly, or time period in days]</code></p>
@@ -278,7 +277,7 @@
<code class="command-detail-name">/create-agent-skill</code>
</div>
<p class="command-detail-description">
Create or edit Claude Code skills with expert guidance on structure and best practices.
Need a new skill? This walks you through creating one that actually works—proper frontmatter, clear documentation, all the conventions baked in. Think of it as scaffolding for skills.
</p>
<h4>Arguments</h4>
<p><code>[skill description or requirements]</code></p>
@@ -293,7 +292,7 @@
<code class="command-detail-name">/generate_command</code>
</div>
<p class="command-detail-description">
Create a new custom slash command following conventions and best practices.
Same idea, but for commands instead of skills. Tell it what workflow you're tired of doing manually, and it generates a proper slash command with all the right patterns.
</p>
<h4>Arguments</h4>
<p><code>[command purpose and requirements]</code></p>
@@ -308,7 +307,7 @@
<code class="command-detail-name">/heal-skill</code>
</div>
<p class="command-detail-description">
Heal skill documentation by applying corrections discovered during execution.
Skills drift—APIs change, URLs break, parameters get renamed. When a skill stops working, this figures out what's wrong and fixes the documentation. You approve the changes before anything commits.
</p>
<h4>Arguments</h4>
<p><code>[optional: specific issue to fix]</code></p>
@@ -330,7 +329,7 @@
<code class="command-detail-name">/plan_review</code>
</div>
<p class="command-detail-description">
Have multiple specialized agents review a plan in parallel.
Before you execute a plan, have three reviewers tear it apart—Rails conventions, best practices, simplicity. Better to find the problems in the plan than in production.
</p>
<h4>Arguments</h4>
<p><code>[plan file path or plan content]</code></p>
@@ -350,7 +349,7 @@
<code class="command-detail-name">/report-bug</code>
</div>
<p class="command-detail-description">
Report a bug in the compounding-engineering plugin.
Something broken? This collects all the context—what broke, what you expected, error messages, environment—and files a proper bug report. No more "it doesn't work" issues.
</p>
<h4>Arguments</h4>
<p><code>[optional: brief description of the bug]</code></p>
@@ -374,7 +373,7 @@
<code class="command-detail-name">/reproduce-bug</code>
</div>
<p class="command-detail-description">
Reproduce and investigate a bug using logs and console inspection.
Give it a GitHub issue number and it tries to actually reproduce the bug—reading the issue, analyzing code paths, iterating until it finds the root cause. Then it posts findings back to the issue.
</p>
<h4>Arguments</h4>
<p><code>[GitHub issue number]</code></p>
@@ -396,7 +395,7 @@
<code class="command-detail-name">/triage</code>
</div>
<p class="command-detail-description">
Triage and categorize findings for the CLI todo system.
Got a pile of code review findings or security audit results? This turns them into actionable todos—one at a time, you decide: create the todo, skip it, or modify and re-present.
</p>
<h4>Arguments</h4>
<p><code>[findings list or source type]</code></p>
@@ -423,7 +422,7 @@
<code class="command-detail-name">/resolve_parallel</code>
</div>
<p class="command-detail-description">
Resolve all TODO comments using parallel processing.
All those TODO comments scattered through your codebase? This finds them, builds a dependency graph, and spawns parallel agents to resolve them all at once. Clears the backlog in minutes.
</p>
<h4>Arguments</h4>
<p><code>[optional: specific TODO pattern or file]</code></p>
@@ -446,7 +445,7 @@
<code class="command-detail-name">/resolve_pr_parallel</code>
</div>
<p class="command-detail-description">
Resolve all PR comments using parallel processing.
Same deal, but for PR review comments. Fetch unresolved threads, spawn parallel resolver agents, commit the fixes, and mark threads as resolved. Your reviewers will wonder how you're so fast.
</p>
<h4>Arguments</h4>
<p><code>[optional: PR number or current PR]</code></p>
@@ -468,7 +467,7 @@
<code class="command-detail-name">/resolve_todo_parallel</code>
</div>
<p class="command-detail-description">
Resolve all pending CLI todos using parallel processing.
Those todo files in your <code>/todos</code> directory? Point this at them and watch parallel agents knock them out—analyzing dependencies, executing in the right order, marking resolved as they finish.
</p>
<h4>Arguments</h4>
<p><code>[optional: specific todo ID or pattern]</code></p>
@@ -491,7 +490,7 @@
<code class="command-detail-name">/prime</code>
</div>
<p class="command-detail-description">
Prime/setup command for project initialization.
Your project initialization command. What exactly it does depends on your project setup—think of it as the "get everything ready" button before you start coding.
</p>
<div class="card-code-block">
<pre><code>/prime</code></pre>

120
docs/pages/getting-started.html
View File

@@ -80,9 +80,7 @@
<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.
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 -->
@@ -97,31 +95,30 @@
</ul>
<h3>Step 1: Add the Marketplace</h3>
<p>First, add the Every Marketplace to your Claude Code installation:</p>
<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>Install the compounding-engineering plugin from the marketplace:</p>
<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>Verify the plugin is installed correctly:</p>
<p>Check that it worked:</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>
<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 and Context7) may not load automatically.
See the <a href="#mcp-configuration">MCP Configuration</a> section for the workaround.
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>
@@ -131,10 +128,10 @@
<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>
<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>The <code>/workflows:review</code> command runs a comprehensive code review using multiple agents in parallel:</p>
<p>This is the big one. Type <code>/workflows:review</code> and watch it spawn 10+ specialized reviewers:</p>
<div class="card-code-block">
<pre><code># Review a PR by number
/workflows:review 123
@@ -147,7 +144,7 @@
</div>
<h3>Use a Specialized Agent</h3>
<p>Invoke agents directly for specific tasks:</p>
<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"
@@ -160,7 +157,7 @@ claude agent best-practices-researcher "Find pagination patterns for Rails"</cod
</div>
<h3>Invoke a Skill</h3>
<p>Skills provide domain expertise on demand:</p>
<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
@@ -179,7 +176,7 @@ skill: create-agent-skills</code></pre>
<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>:
If the MCP servers didn't load automatically, paste this into <code>.claude/settings.json</code>:
</p>
<div class="card-code-block">
<pre><code>{
@@ -199,7 +196,7 @@ skill: create-agent-skills</code></pre>
</div>
<h3>Environment Variables</h3>
<p>Some skills require environment variables:</p>
<p>Right now, only one skill needs an API key. If you use Gemini's image generation:</p>
<table class="docs-table">
<thead>
<tr>
@@ -226,39 +223,35 @@ skill: create-agent-skills</code></pre>
Every unit of engineering work should make subsequent units of work easier&mdash;not harder.
</blockquote>
<p>This philosophy manifests in four key practices:</p>
<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>Plan</h4>
<h4>1. Plan</h4>
<p>
Understand the change needed and its impact before writing code.
Use research agents to gather context, best practices, and examples.
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>Delegate</h4>
<h4>2. Delegate</h4>
<p>
Use specialized AI agents to help with implementation.
Each agent brings deep expertise in its domain.
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>Assess</h4>
<h4>3. Assess</h4>
<p>
Run comprehensive reviews with multiple perspectives.
Security, performance, architecture&mdash;all covered by specialized agents.
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>Codify</h4>
<h4>4. Codify</h4>
<p>
Document learnings and patterns for future use.
Each solved problem becomes reusable knowledge.
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>
@@ -269,8 +262,7 @@ skill: create-agent-skills</code></pre>
<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.
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>
@@ -334,8 +326,7 @@ claude agent git-history-analyzer "Show changes to user model"</code></pre>
<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.
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>
@@ -353,14 +344,14 @@ claude agent git-history-analyzer "Show changes to user model"</code></pre>
</div>
<h3>The Review Workflow</h3>
<p>The <code>/workflows:review</code> command is the most comprehensive. It:</p>
<p>Let me show you what happens when you run <code>/workflows:review</code>. Here's the sequence:</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>
<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>
@@ -375,9 +366,7 @@ claude agent git-history-analyzer "Show changes to user model"</code></pre>
<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.
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>
@@ -390,13 +379,13 @@ skill: gemini-imagegen
</div>
<h3>Skill Structure</h3>
<p>Skills typically contain:</p>
<p>Peek inside a skill directory and you'll usually find:</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>
<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>
@@ -411,8 +400,7 @@ skill: gemini-imagegen
<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.
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>
@@ -425,15 +413,15 @@ skill: gemini-imagegen
</div>
<h3>Understanding Findings</h3>
<p>Findings are categorized by severity:</p>
<p>Every finding gets a priority label. Here's what they mean:</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>
<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>Review findings are stored as todo files in the <code>todos/</code> directory:</p>
<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
@@ -451,8 +439,7 @@ ls todos/*-pending-*.md
<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.
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>
@@ -476,19 +463,18 @@ You are [role description].
</div>
<h3>Agent Location</h3>
<p>Place custom agents in:</p>
<p>Drop your agent file in one of these directories:</p>
<ul>
<li><code>.claude/agents/</code> - Project-specific agents</li>
<li><code>~/.claude/agents/</code> - User-wide agents</li>
<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>Use the Command</h4>
<h4>The Easy Way</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.
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>
@@ -499,8 +485,7 @@ You are [role description].
<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.
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>
@@ -542,10 +527,9 @@ Use templates from the `templates/` directory.</code></pre>
<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>
<h4>Get Help Building Skills</h4>
<p>
Use <code>skill: create-agent-skills</code> for comprehensive guidance
on creating effective skills, including best practices and validation.
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>

83
docs/pages/mcp-servers.html
View File

@@ -73,9 +73,7 @@
<article class="docs-article">
<h1><i class="fa-solid fa-server color-accent"></i> MCP Servers Reference</h1>
<p class="lead">
Model Context Protocol (MCP) servers extend Claude Code's capabilities with
browser automation and framework documentation lookup. The plugin bundles
two MCP servers that start automatically when enabled.
Think of MCP servers as power tools that plug into Claude Code. Want Claude to actually <em>open a browser</em> and click around your app? That's Playwright. Need the latest Rails docs without leaving your terminal? That's Context7. The plugin bundles both servers—they just work when you install.
</p>
<div class="callout callout-warning">
@@ -83,8 +81,7 @@
<div class="callout-content">
<h4>Known Issue: Auto-Loading</h4>
<p>
MCP servers may not load automatically when the plugin is installed.
See <a href="#manual-config">Manual Configuration</a> for the workaround.
Sometimes MCP servers don't wake up automatically. If Claude can't take screenshots or look up docs, you'll need to add them manually. See <a href="#manual-config">Manual Configuration</a> for the fix.
</p>
</div>
</div>
@@ -93,8 +90,7 @@
<section id="playwright">
<h2><i class="fa-brands fa-chrome"></i> Playwright</h2>
<p>
Browser automation via <code>@playwright/mcp</code>. Enables taking screenshots,
clicking elements, filling forms, and executing JavaScript in a real browser.
You know how you can tell a junior developer "open Chrome and click the login button"? Now you can tell Claude the same thing. Playwright gives Claude hands to control a real browser—clicking buttons, filling forms, taking screenshots, running JavaScript. It's like pair programming with someone who has a browser open next to you.
</p>
<h3>Tools Provided</h3>
@@ -108,49 +104,53 @@
<tbody>
<tr>
<td><code>browser_navigate</code></td>
<td>Navigate to a URL in the browser</td>
<td>Go to any URL—your localhost dev server, production, staging, that competitor's site you're studying</td>
</tr>
<tr>
<td><code>browser_take_screenshot</code></td>
<td>Capture a screenshot of the current page or element</td>
<td>Capture what you're seeing right now. Perfect for "does this look right?" design reviews</td>
</tr>
<tr>
<td><code>browser_click</code></td>
<td>Click on an element using CSS selector or text</td>
<td>Click buttons, links, whatever. Claude finds it by text or CSS selector, just like you would</td>
</tr>
<tr>
<td><code>browser_fill_form</code></td>
<td>Fill form fields with values</td>
<td>Type into forms faster than you can. Great for testing signup flows without manual clicking</td>
</tr>
<tr>
<td><code>browser_snapshot</code></td>
<td>Get an accessibility tree snapshot of the page</td>
<td>Get the page's accessibility tree—how screen readers see it. Useful for understanding structure without HTML noise</td>
</tr>
<tr>
<td><code>browser_evaluate</code></td>
<td>Execute JavaScript code in the browser context</td>
<td>Run any JavaScript in the page. Check localStorage, trigger functions, read variables—full console access</td>
</tr>
</tbody>
</table>
<h3>Use Cases</h3>
<h3>When You'll Use This</h3>
<ul>
<li><strong>Design Iteration</strong> - Take screenshots for UI comparison</li>
<li><strong>Testing</strong> - Automate browser interactions</li>
<li><strong>Debugging</strong> - Inspect page state and DOM</li>
<li><strong>Data Extraction</strong> - Scrape content from web pages</li>
<li><strong>Design reviews without leaving the terminal</strong> - "Take a screenshot of the new navbar on mobile" gets you a PNG in seconds</li>
<li><strong>Testing signup flows while you code</strong> - "Fill in the registration form with test@example.com and click submit" runs the test for you</li>
<li><strong>Debugging production issues</strong> - "Navigate to the error page and show me what's in localStorage" gives you the state without opening DevTools</li>
<li><strong>Competitive research</strong> - "Go to competitor.com and screenshot their pricing page" builds your swipe file automatically</li>
</ul>
<h3>Example Usage</h3>
<div class="card-code-block">
<pre><code># The tools are available when the MCP server is running
# Claude Code will use them automatically when appropriate
<pre><code># Just talk to Claude naturally—it knows when to use Playwright
# Example: Taking a screenshot for design review
# Design review
"Take a screenshot of the login page"
# Example: Testing a form
"Navigate to /signup and fill in the email field with test@example.com"</code></pre>
# Testing a form
"Navigate to /signup and fill in the email field with test@example.com"
# Debug JavaScript state
"Go to localhost:3000 and run console.log(window.currentUser)"
# The browser runs in the background. You'll get results without switching windows.</code></pre>
</div>
<h3>Configuration</h3>
@@ -170,8 +170,7 @@
<section id="context7">
<h2><i class="fa-solid fa-book-open"></i> Context7</h2>
<p>
Framework documentation lookup via Context7 MCP. Provides access to
documentation for more than 100 frameworks and libraries.
Ever ask Claude about a framework and get an answer from 2023? Context7 fixes that. It's a documentation service that keeps Claude current with 100+ frameworks—Rails, React, Next.js, Django, whatever you're using. Think of it as having the official docs piped directly into Claude's brain.
</p>
<h3>Tools Provided</h3>
@@ -185,17 +184,17 @@
<tbody>
<tr>
<td><code>resolve-library-id</code></td>
<td>Find the library ID for a framework or package</td>
<td>Maps "Rails" to the actual library identifier Context7 uses. You don't call this—Claude does it automatically</td>
</tr>
<tr>
<td><code>get-library-docs</code></td>
<td>Get documentation for a specific library</td>
<td>Fetches the actual documentation pages. Ask "How does useEffect work?" and this grabs the latest React docs</td>
</tr>
</tbody>
</table>
<h3>Supported Frameworks</h3>
<p>Context7 supports more than 100 frameworks including:</p>
<h3>What's Covered</h3>
<p>Over 100 frameworks and libraries. Here's a taste of what you can look up:</p>
<div class="framework-grid">
<div class="framework-category">
<h4>Backend</h4>
@@ -243,12 +242,15 @@
<h3>Example Usage</h3>
<div class="card-code-block">
<pre><code># Claude Code will use Context7 automatically for documentation lookups
<pre><code># Just ask about the framework—Claude fetches current docs automatically
"Look up the Rails ActionCable documentation"
"How does the useEffect hook work in React?"
"What are the best practices for PostgreSQL indexes?"</code></pre>
"What are the best practices for PostgreSQL indexes?"
# You get answers based on the latest docs, not Claude's training cutoff</code></pre>
</div>
<h3>Configuration</h3>
@@ -266,12 +268,11 @@
<section id="manual-config">
<h2><i class="fa-solid fa-gear"></i> Manual Configuration</h2>
<p>
If MCP servers don't auto-load with the plugin, add them manually to your
<code>.claude/settings.json</code> file.
If the servers don't load automatically (you'll know because Claude can't take screenshots or fetch docs), you need to wire them up yourself. It's a two-minute copy-paste job.
</p>
<h3>Project-Level Configuration</h3>
<p>Add to <code>.claude/settings.json</code> in your project:</p>
<p>To enable for just this project, add this to <code>.claude/settings.json</code> in your project root:</p>
<div class="card-code-block">
<pre><code>{
"mcpServers": {
@@ -290,7 +291,7 @@
</div>
<h3>Global Configuration</h3>
<p>Add to <code>~/.claude/settings.json</code> to enable for all projects:</p>
<p>Or enable everywhere—every project on your machine gets these servers. Add to <code>~/.claude/settings.json</code>:</p>
<div class="card-code-block">
<pre><code>{
"mcpServers": {
@@ -329,16 +330,18 @@
</table>
<h3>Verifying MCP Servers</h3>
<p>After configuration, restart Claude Code and verify the servers are loaded:</p>
<p>After you add the config, restart Claude Code. Then test that everything works:</p>
<div class="card-code-block">
<pre><code># Check if MCP tools are available
<pre><code># Ask Claude what it has
"What MCP tools do you have access to?"
# Test Playwright
# Test Playwright (should work now)
"Take a screenshot of the current directory listing"
# Test Context7
"Look up Rails Active Record documentation"</code></pre>
# Test Context7 (should fetch real docs)
"Look up Rails Active Record documentation"
# If either fails, double-check your JSON syntax and file paths</code></pre>
</div>
</section>

43
docs/pages/skills.html
View File

@@ -73,8 +73,7 @@
<article class="docs-article">
<h1><i class="fa-solid fa-wand-magic-sparkles color-accent"></i> Skill Reference</h1>
<p class="lead">
Complete documentation for all 11 intelligent skills. Skills provide deep domain expertise
that Claude Code can invoke on-demand, including references, templates, and workflows.
Think of skills as reference manuals that Claude Code can read mid-conversation. When you're writing Rails code and want DHH's style, or building a gem like Andrew Kane would, you don't need to paste documentation—just invoke the skill. Claude reads it, absorbs the patterns, and writes code that way.
</p>
<div class="usage-box">
@@ -95,8 +94,7 @@ skill: create-agent-skills</code></pre>
<div class="callout-content">
<h4>Skills vs Agents</h4>
<p>
<strong>Agents</strong> are specialized personas invoked with <code>claude agent [name]</code>.
<strong>Skills</strong> are bodies of knowledge (references, templates, workflows) invoked with <code>skill: [name]</code>.
<strong>Agents</strong> are personas—they <em>do</em> things. <strong>Skills</strong> are knowledge—they teach Claude <em>how</em> to do things. Use <code>claude agent [name]</code> when you want someone to review your code. Use <code>skill: [name]</code> when you want to write code in a particular style yourself.
</p>
</div>
</div>
@@ -104,7 +102,7 @@ skill: create-agent-skills</code></pre>
<!-- Development Tools -->
<section id="development-tools">
<h2><i class="fa-solid fa-code"></i> Development Tools (7)</h2>
<p>Skills for code generation, gem writing, and development patterns.</p>
<p>These skills teach Claude specific coding styles and architectural patterns. Use them when you want code that follows a particular philosophy—not just any working code, but code that looks like it was written by a specific person or framework.</p>
<div class="skill-detail" id="create-agent-skills">
<div class="skill-detail-header">
@@ -112,8 +110,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Meta</span>
</div>
<p class="skill-detail-description">
Expert guidance for creating, writing, building, and refining Claude Code Skills.
Use when working with SKILL.md files or authoring new skills.
You're writing a skill right now, but you're not sure if you're structuring the SKILL.md file correctly. Should the examples go before the theory? How do you organize workflows vs. references? This skill is the answer—it's the master template for building skills themselves.
</p>
<h4>Capabilities</h4>
<ul>
@@ -145,7 +142,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Meta</span>
</div>
<p class="skill-detail-description">
Guide for creating effective skills with a 6-step process.
The simpler, step-by-step version of <code>create-agent-skills</code>. When you just want a checklist to follow from blank file to packaged skill, use this. It's less about theory, more about "do step 1, then step 2."
</p>
<h4>6-Step Process</h4>
<ol>
@@ -167,8 +164,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Rails</span>
</div>
<p class="skill-detail-description">
Write Ruby and Rails code in DHH's distinctive 37signals style.
Triggers on Ruby/Rails code generation or when mentioning DHH, 37signals, Basecamp, HEY.
You want Rails controllers that are five lines, not fifty. Models that handle authorization, broadcasting, and business logic without service objects everywhere. This skill teaches Claude to write code the way DHH writes it at 37signals—REST-pure, Hotwire-first, no architectural astronautics.
</p>
<h4>Key Patterns</h4>
<ul>
@@ -196,8 +192,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Ruby</span>
</div>
<p class="skill-detail-description">
Write Ruby gems following Andrew Kane's proven patterns and philosophy.
Based on 100+ gems with 374M+ downloads.
Andrew Kane has written 100+ Ruby gems with 374 million downloads. Every gem follows the same patterns: minimal dependencies, class macro DSLs, Rails integration without Rails coupling. When you're building a gem and want it to feel production-ready from day one, this is how you do it.
</p>
<h4>Philosophy</h4>
<ul>
@@ -232,8 +227,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">AI</span>
</div>
<p class="skill-detail-description">
Build type-safe, composable LLM applications with DSPy.rb.
Use when implementing predictable AI features in Ruby.
You're adding AI features to your Rails app, but you don't want brittle prompt strings scattered everywhere. DSPy.rb gives you type-safe signatures, composable predictors, and tool-using agents. This skill shows you how to use it—from basic inference to ReAct agents that iterate until they get the answer right.
</p>
<h4>Predictor Types</h4>
<ul>
@@ -276,8 +270,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Design</span>
</div>
<p class="skill-detail-description">
Create distinctive, production-grade frontend interfaces.
Generates creative, polished code that avoids generic AI aesthetics.
You've seen what AI usually generates: Inter font, purple gradients, rounded corners on everything. This skill teaches Claude to design interfaces that don't look like every other AI-generated site. It's about purposeful typography, unexpected color palettes, and interfaces with personality.
</p>
<h4>Design Thinking</h4>
<ul>
@@ -311,7 +304,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Docs</span>
</div>
<p class="skill-detail-description">
Capture solved problems as categorized documentation with YAML frontmatter for fast lookup.
You just fixed a weird build error after an hour of debugging. Tomorrow you'll forget how you fixed it. This skill automatically detects when you solve something (phrases like "that worked" or "it's fixed") and documents it with YAML frontmatter so you can find it again. Think of it as a photographic memory for solved problems.
</p>
<h4>Auto-Triggers</h4>
<p>Phrases: "that worked", "it's fixed", "working now", "problem solved"</p>
@@ -343,7 +336,7 @@ skill: create-agent-skills</code></pre>
<!-- Content & Workflow -->
<section id="content-workflow">
<h2><i class="fa-solid fa-pen-fancy"></i> Content & Workflow (3)</h2>
<p>Skills for content editing, task tracking, and parallel development.</p>
<p>Writing, editing, and organizing work. These skills handle everything from style guide compliance to git worktree management—the meta-work that makes the real work easier.</p>
<div class="skill-detail" id="every-style-editor">
<div class="skill-detail-header">
@@ -351,8 +344,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Content</span>
</div>
<p class="skill-detail-description">
Review and edit copy to ensure adherence to Every's style guide.
Provides systematic line-by-line review.
You wrote a draft, but you're not sure if it matches Every's style guide. Should "internet" be capitalized? Is this comma splice allowed? This skill does a four-phase line-by-line review: context, detailed edits, mechanical checks, and actionable recommendations. It's like having a copy editor who never gets tired.
</p>
<h4>Four-Phase Review</h4>
<ol>
@@ -380,8 +372,7 @@ skill: create-agent-skills</code></pre>
<span class="skill-badge">Workflow</span>
</div>
<p class="skill-detail-description">
File-based todo tracking system in the <code>todos/</code> directory.
Integrates with code review and slash commands.
Your todo list is a bunch of markdown files in a <code>todos/</code> directory. Each filename encodes status, priority, and description. No database, no UI, just files with YAML frontmatter. When you need to track work without setting up Jira, this is the system.
</p>
<h4>File Format</h4>
<div class="card-code-block">
@@ -426,8 +417,7 @@ dependencies: []
<span class="skill-badge">Git</span>
</div>
<p class="skill-detail-description">
Manage Git worktrees for isolated parallel development.
Handles creating, listing, switching, and cleaning up worktrees.
You're working on a feature branch, but you need to review a PR without losing your current work. Git worktrees let you have multiple branches checked out simultaneously in separate directories. This skill manages them—create, switch, cleanup—so you can context-switch without stashing or committing half-finished code.
</p>
<h4>Commands</h4>
<div class="card-code-block">
@@ -462,7 +452,7 @@ bash scripts/worktree-manager.sh cleanup</code></pre>
<!-- Image Generation -->
<section id="image-generation">
<h2><i class="fa-solid fa-image"></i> Image Generation (1)</h2>
<p>AI-powered image generation and editing.</p>
<p>Generate images with AI. Not stock photos you found on Unsplash—images you describe and the model creates.</p>
<div class="skill-detail featured" id="gemini-imagegen">
<div class="skill-detail-header">
@@ -470,8 +460,7 @@ bash scripts/worktree-manager.sh cleanup</code></pre>
<span class="skill-badge highlight">AI Images</span>
</div>
<p class="skill-detail-description">
Generate and edit images using Google's Gemini API (Nano Banana).
Supports text-to-image, image editing, multi-turn refinement, and composition.
Need a logo with specific text? A product mockup on a marble surface? An illustration in a kawaii style? This skill wraps Google's Gemini image generation API. You describe what you want, it generates it. You can edit existing images, refine over multiple turns, or compose from reference images. All through simple Python scripts.
</p>
<h4>Features</h4>