d367b2574d
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>
650 lines
33 KiB
HTML
650 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="theme-dark">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Agent Reference - Compounding Engineering</title>
|
|
<meta content="Complete reference for all 23 specialized AI agents in the Compounding Engineering plugin." name="description" />
|
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
|
<link href="../css/style.css" rel="stylesheet" type="text/css" />
|
|
<link href="../css/docs.css" rel="stylesheet" type="text/css" />
|
|
<script src="../js/main.js" type="text/javascript" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="background-gradient"></div>
|
|
<div class="docs-layout">
|
|
<aside class="docs-sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="../index.html" class="nav-brand">
|
|
<span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
|
|
<span class="logo-text">CE Docs</span>
|
|
</a>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<h3>Getting Started</h3>
|
|
<ul>
|
|
<li><a href="getting-started.html">Installation</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
<li><a href="agents.html" class="active">Agents (23)</a></li>
|
|
<li><a href="commands.html">Commands (13)</a></li>
|
|
<li><a href="skills.html">Skills (11)</a></li>
|
|
<li><a href="mcp-servers.html">MCP Servers (2)</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav-section">
|
|
<h3>Resources</h3>
|
|
<ul>
|
|
<li><a href="changelog.html">Changelog</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav-section">
|
|
<h3>On This Page</h3>
|
|
<ul>
|
|
<li><a href="#review-agents">Review (10)</a></li>
|
|
<li><a href="#research-agents">Research (4)</a></li>
|
|
<li><a href="#workflow-agents">Workflow (5)</a></li>
|
|
<li><a href="#design-agents">Design (3)</a></li>
|
|
<li><a href="#docs-agents">Docs (1)</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="docs-content">
|
|
<div class="docs-header">
|
|
<nav class="breadcrumb">
|
|
<a href="../index.html">Home</a>
|
|
<span>/</span>
|
|
<a href="getting-started.html">Docs</a>
|
|
<span>/</span>
|
|
<span>Agents</span>
|
|
</nav>
|
|
<button class="mobile-menu-toggle" data-sidebar-toggle>
|
|
<i class="fa-solid fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<article class="docs-article">
|
|
<h1><i class="fa-solid fa-users-gear color-accent"></i> Agent Reference</h1>
|
|
<p class="lead">
|
|
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">
|
|
<h3>How to Use Agents</h3>
|
|
<div class="card-code-block">
|
|
<pre><code># Basic invocation
|
|
claude agent [agent-name]
|
|
|
|
# With a specific message
|
|
claude agent [agent-name] "Your message here"
|
|
|
|
# Examples
|
|
claude agent kieran-rails-reviewer
|
|
claude agent security-sentinel "Audit the payment flow"</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review Agents -->
|
|
<section id="review-agents">
|
|
<h2><i class="fa-solid fa-code-pull-request"></i> Review Agents (10)</h2>
|
|
<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">
|
|
<h3>kieran-rails-reviewer</h3>
|
|
<span class="agent-badge">Rails</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li><strong>Existing Code Modifications</strong> - Very strict. Added complexity needs strong justification.</li>
|
|
<li><strong>New Code</strong> - Pragmatic. If it's isolated and works, it's acceptable.</li>
|
|
<li><strong>Turbo Streams</strong> - Simple turbo streams MUST be inline arrays in controllers.</li>
|
|
<li><strong>Testing as Quality</strong> - Hard-to-test code = poor structure that needs refactoring.</li>
|
|
<li><strong>Naming (5-Second Rule)</strong> - Must understand what a view/component does in 5 seconds from its name.</li>
|
|
<li><strong>Namespacing</strong> - Always use <code>class Module::ClassName</code> pattern.</li>
|
|
<li><strong>Duplication > Complexity</strong> - Simple duplicated code is better than complex DRY abstractions.</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent kieran-rails-reviewer "Review the UserController"</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="dhh-rails-reviewer">
|
|
<div class="agent-detail-header">
|
|
<h3>dhh-rails-reviewer</h3>
|
|
<span class="agent-badge">Rails</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Identifies deviations from Rails conventions</li>
|
|
<li>Spots JavaScript framework patterns infiltrating Rails</li>
|
|
<li>Tears apart unnecessary abstractions</li>
|
|
<li>Challenges overengineering and microservices mentality</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent dhh-rails-reviewer</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="kieran-python-reviewer">
|
|
<div class="agent-detail-header">
|
|
<h3>kieran-python-reviewer</h3>
|
|
<span class="agent-badge">Python</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Type hints for all functions</li>
|
|
<li>Pythonic patterns and idioms</li>
|
|
<li>Modern Python syntax</li>
|
|
<li>Import organization</li>
|
|
<li>Module extraction signals</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent kieran-python-reviewer</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="kieran-typescript-reviewer">
|
|
<div class="agent-detail-header">
|
|
<h3>kieran-typescript-reviewer</h3>
|
|
<span class="agent-badge">TypeScript</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>No <code>any</code> without justification</li>
|
|
<li>Component/module extraction signals</li>
|
|
<li>Import organization</li>
|
|
<li>Modern TypeScript patterns</li>
|
|
<li>Testability assessment</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent kieran-typescript-reviewer</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="security-sentinel">
|
|
<div class="agent-detail-header">
|
|
<h3>security-sentinel</h3>
|
|
<span class="agent-badge critical">Security</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Input validation analysis</li>
|
|
<li>SQL injection risk assessment</li>
|
|
<li>XSS vulnerability detection</li>
|
|
<li>Authentication/authorization audit</li>
|
|
<li>Sensitive data exposure scanning</li>
|
|
<li>OWASP Top 10 compliance</li>
|
|
<li>Hardcoded secrets search</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent security-sentinel "Audit the payment flow"</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="performance-oracle">
|
|
<div class="agent-detail-header">
|
|
<h3>performance-oracle</h3>
|
|
<span class="agent-badge">Performance</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Algorithmic complexity (Big O notation)</li>
|
|
<li>N+1 query pattern detection</li>
|
|
<li>Proper index usage verification</li>
|
|
<li>Memory management review</li>
|
|
<li>Caching opportunity identification</li>
|
|
<li>Network usage optimization</li>
|
|
<li>Frontend bundle impact</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent performance-oracle</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="architecture-strategist">
|
|
<div class="agent-detail-header">
|
|
<h3>architecture-strategist</h3>
|
|
<span class="agent-badge">Architecture</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Overall system structure understanding</li>
|
|
<li>Change context within architecture</li>
|
|
<li>Architectural violation identification</li>
|
|
<li>SOLID principles compliance</li>
|
|
<li>Microservice boundary assessment</li>
|
|
<li>API contract evaluation</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent architecture-strategist</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="data-integrity-guardian">
|
|
<div class="agent-detail-header">
|
|
<h3>data-integrity-guardian</h3>
|
|
<span class="agent-badge critical">Data</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Migration safety and reversibility</li>
|
|
<li>Data constraint validation</li>
|
|
<li>Transaction boundary review</li>
|
|
<li>Referential integrity preservation</li>
|
|
<li>Privacy compliance (GDPR, CCPA)</li>
|
|
<li>Data corruption scenario checking</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent data-integrity-guardian</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="pattern-recognition-specialist">
|
|
<div class="agent-detail-header">
|
|
<h3>pattern-recognition-specialist</h3>
|
|
<span class="agent-badge">Patterns</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Design patterns (Factory, Singleton, Observer, etc.)</li>
|
|
<li>Anti-patterns and code smells</li>
|
|
<li>TODO/FIXME comments</li>
|
|
<li>God objects and circular dependencies</li>
|
|
<li>Naming consistency</li>
|
|
<li>Code duplication</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent pattern-recognition-specialist</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="code-simplicity-reviewer">
|
|
<div class="agent-detail-header">
|
|
<h3>code-simplicity-reviewer</h3>
|
|
<span class="agent-badge">Quality</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Analyze every line for necessity</li>
|
|
<li>Simplify complex logic</li>
|
|
<li>Remove redundancy and duplication</li>
|
|
<li>Challenge abstractions</li>
|
|
<li>Optimize for readability</li>
|
|
<li>Eliminate premature generalization</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent code-simplicity-reviewer</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Research Agents -->
|
|
<section id="research-agents">
|
|
<h2><i class="fa-solid fa-microscope"></i> Research Agents (4)</h2>
|
|
<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">
|
|
<h3>framework-docs-researcher</h3>
|
|
<span class="agent-badge">Research</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Fetch official framework and library documentation</li>
|
|
<li>Identify version-specific constraints and deprecations</li>
|
|
<li>Search GitHub for real-world usage examples</li>
|
|
<li>Analyze gem/library source code using <code>bundle show</code></li>
|
|
<li>Synthesize findings with practical examples</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent framework-docs-researcher "Research Hotwire Turbo patterns"</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="best-practices-researcher">
|
|
<div class="agent-detail-header">
|
|
<h3>best-practices-researcher</h3>
|
|
<span class="agent-badge">Research</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
"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>
|
|
<li>Leverage multiple sources (Context7 MCP, web search, GitHub)</li>
|
|
<li>Evaluate information quality and recency</li>
|
|
<li>Synthesize into actionable guidance</li>
|
|
<li>Provide code examples and templates</li>
|
|
<li>Research issue templates and community engagement</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent best-practices-researcher "Find pagination patterns"</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="git-history-analyzer">
|
|
<div class="agent-detail-header">
|
|
<h3>git-history-analyzer</h3>
|
|
<span class="agent-badge">Git</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Trace file evolution using <code>git log --follow</code></li>
|
|
<li>Determine code origins using <code>git blame -w -C -C -C</code></li>
|
|
<li>Identify patterns from commit history</li>
|
|
<li>Map key contributors and expertise areas</li>
|
|
<li>Extract historical patterns of issues and fixes</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent git-history-analyzer "Analyze changes to User model"</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="repo-research-analyst">
|
|
<div class="agent-detail-header">
|
|
<h3>repo-research-analyst</h3>
|
|
<span class="agent-badge">Research</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Architecture and documentation files (ARCHITECTURE.md, README.md, CLAUDE.md)</li>
|
|
<li>GitHub issues for patterns and conventions</li>
|
|
<li>Issue/PR templates and guidelines</li>
|
|
<li>Implementation patterns using ast-grep or rg</li>
|
|
<li>Project-specific conventions</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent repo-research-analyst</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Workflow Agents -->
|
|
<section id="workflow-agents">
|
|
<h2><i class="fa-solid fa-gears"></i> Workflow Agents (5)</h2>
|
|
<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">
|
|
<h3>bug-reproduction-validator</h3>
|
|
<span class="agent-badge">Bugs</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li><strong>Confirmed</strong> - Bug reproduced successfully</li>
|
|
<li><strong>Cannot Reproduce</strong> - Unable to reproduce</li>
|
|
<li><strong>Not a Bug</strong> - Expected behavior</li>
|
|
<li><strong>Environmental</strong> - Environment-specific issue</li>
|
|
<li><strong>Data</strong> - Data-related issue</li>
|
|
<li><strong>User Error</strong> - User misunderstanding</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent bug-reproduction-validator</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="pr-comment-resolver">
|
|
<div class="agent-detail-header">
|
|
<h3>pr-comment-resolver</h3>
|
|
<span class="agent-badge">PR</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Analyze code review comments</li>
|
|
<li>Plan the resolution before implementation</li>
|
|
<li>Implement requested modifications</li>
|
|
<li>Verify resolution doesn't break functionality</li>
|
|
<li>Provide clear resolution reports</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent pr-comment-resolver</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="lint">
|
|
<div class="agent-detail-header">
|
|
<h3>lint</h3>
|
|
<span class="agent-badge">Quality</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li><code>bundle exec standardrb</code> - Ruby file checking/fixing</li>
|
|
<li><code>bundle exec erblint --lint-all</code> - ERB templates</li>
|
|
<li><code>bin/brakeman</code> - Security scanning</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent lint</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="spec-flow-analyzer">
|
|
<div class="agent-detail-header">
|
|
<h3>spec-flow-analyzer</h3>
|
|
<span class="agent-badge">Testing</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Map all possible user flows and permutations</li>
|
|
<li>Identify gaps, ambiguities, and missing specifications</li>
|
|
<li>Consider different user types, roles, permissions</li>
|
|
<li>Analyze error states and edge cases</li>
|
|
<li>Generate critical questions requiring clarification</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent spec-flow-analyzer</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="every-style-editor">
|
|
<div class="agent-detail-header">
|
|
<h3>every-style-editor</h3>
|
|
<span class="agent-badge">Content</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Title case in headlines, sentence case elsewhere</li>
|
|
<li>Company singular/plural usage</li>
|
|
<li>Remove overused words (actually, very, just)</li>
|
|
<li>Enforce active voice</li>
|
|
<li>Apply formatting rules (Oxford commas, em dashes)</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent every-style-editor</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Design Agents -->
|
|
<section id="design-agents">
|
|
<h2><i class="fa-solid fa-palette"></i> Design Agents (3)</h2>
|
|
<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">
|
|
<h3>design-iterator</h3>
|
|
<span class="agent-badge">Design</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Take focused screenshots of target elements</li>
|
|
<li>Analyze current state and identify 3-5 improvements</li>
|
|
<li>Implement targeted CSS/design changes</li>
|
|
<li>Document changes made</li>
|
|
<li>Repeat for specified iterations (default 10)</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent design-iterator</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="figma-design-sync">
|
|
<div class="agent-detail-header">
|
|
<h3>figma-design-sync</h3>
|
|
<span class="agent-badge">Figma</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Extract design specifications from Figma</li>
|
|
<li>Capture implementation screenshots</li>
|
|
<li>Conduct systematic visual comparison</li>
|
|
<li>Make precise code changes to fix discrepancies</li>
|
|
<li>Verify implementation matches design</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent figma-design-sync</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agent-detail" id="design-implementation-reviewer">
|
|
<div class="agent-detail-header">
|
|
<h3>design-implementation-reviewer</h3>
|
|
<span class="agent-badge">Review</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Layouts and structure</li>
|
|
<li>Typography (fonts, sizes, weights)</li>
|
|
<li>Colors and themes</li>
|
|
<li>Spacing and alignment</li>
|
|
<li>Different viewport sizes</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent design-implementation-reviewer</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Docs Agents -->
|
|
<section id="docs-agents">
|
|
<h2><i class="fa-solid fa-file-lines"></i> Documentation Agent (1)</h2>
|
|
|
|
<div class="agent-detail" id="ankane-readme-writer">
|
|
<div class="agent-detail-header">
|
|
<h3>ankane-readme-writer</h3>
|
|
<span class="agent-badge">Docs</span>
|
|
</div>
|
|
<p class="agent-detail-description">
|
|
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>
|
|
<li>Header (title + description)</li>
|
|
<li>Installation</li>
|
|
<li>Quick Start</li>
|
|
<li>Usage</li>
|
|
<li>Options</li>
|
|
<li>Upgrading</li>
|
|
<li>Contributing</li>
|
|
<li>License</li>
|
|
</ol>
|
|
<h4>Style Guidelines</h4>
|
|
<ul>
|
|
<li>Imperative voice throughout</li>
|
|
<li>15 words max per sentence</li>
|
|
<li>Single-purpose code fences</li>
|
|
<li>Up to 4 badges maximum</li>
|
|
<li>No HTML comments</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>claude agent ankane-readme-writer</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="docs-nav-footer">
|
|
<a href="getting-started.html" class="nav-prev">
|
|
<span class="nav-label">Previous</span>
|
|
<span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Getting Started</span>
|
|
</a>
|
|
<a href="commands.html" class="nav-next">
|
|
<span class="nav-label">Next</span>
|
|
<span class="nav-title">Commands <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
</nav>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
|
|
document.querySelector('.docs-sidebar').classList.toggle('open');
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|