docs: Add complete reference pages and enhanced philosophy section
- Add agents.html with full documentation for all 24 agents - Add commands.html with full documentation for all 16 commands - Add skills.html with full documentation for all 11 skills - Add mcp-servers.html with Playwright and Context7 documentation - Enhance landing page philosophy section with four pillars and compounding effect timeline - Add CSS styles for philosophy section components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -1216,3 +1216,186 @@ section {
|
|||||||
padding: var(--space-xl);
|
padding: var(--space-xl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
Philosophy Section (Enhanced)
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
.philosophy-section {
|
||||||
|
padding: var(--space-section) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.philosophy-quote {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto var(--space-xxl);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.philosophy-quote blockquote {
|
||||||
|
font-size: var(--font-size-l);
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
padding: var(--space-xl);
|
||||||
|
background: linear-gradient(135deg, var(--color-accent-lighter), transparent);
|
||||||
|
border-left: 4px solid var(--color-accent);
|
||||||
|
border-radius: var(--radius-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Philosophy Pillars */
|
||||||
|
.philosophy-pillars {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
margin-bottom: var(--space-xxl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.philosophy-pillars {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-l);
|
||||||
|
padding: var(--space-xl);
|
||||||
|
background-color: var(--color-surface);
|
||||||
|
border-radius: var(--radius-l);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar:hover {
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--color-accent-light);
|
||||||
|
border-radius: var(--radius-m);
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-content h3 {
|
||||||
|
margin: 0 0 var(--space-xs) 0;
|
||||||
|
font-size: var(--font-size-l);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-tagline {
|
||||||
|
margin: 0 0 var(--space-m) 0;
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
color: var(--color-accent);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-description {
|
||||||
|
margin: 0 0 var(--space-m) 0;
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-tools {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-tag {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
padding: 2px 8px;
|
||||||
|
background-color: var(--color-surface-hover);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
border-radius: var(--radius-xs);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compound Effect Timeline */
|
||||||
|
.compound-effect {
|
||||||
|
background-color: var(--color-surface);
|
||||||
|
border-radius: var(--radius-l);
|
||||||
|
padding: var(--space-xl);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-effect h3 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 var(--space-xl) 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-item {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--space-l);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
border-radius: var(--radius-m);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
min-width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-item.highlight {
|
||||||
|
background: linear-gradient(135deg, var(--color-accent-light), var(--color-surface));
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-number {
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-accent);
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-text {
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-arrow {
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
font-size: var(--font-size-l);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.pillar {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-icon {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-tools {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-arrow {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.compound-grid {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -100,54 +100,124 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Philosophy Section -->
|
<!-- Philosophy Section -->
|
||||||
<section id="philosophy">
|
<section id="philosophy" class="philosophy-section">
|
||||||
<div class="heading centered">
|
<div class="heading centered">
|
||||||
<h2 class="no-top-margin">The Compounding Engineering Philosophy</h2>
|
<h2 class="no-top-margin">The Compounding Engineering Philosophy</h2>
|
||||||
<p class="paragraph m secondary">
|
<p class="paragraph l secondary balanced">
|
||||||
Every unit of engineering work should make subsequent units of work easier—not harder.
|
Every unit of engineering work should make subsequent units of work easier—not harder.
|
||||||
Our tools embody this philosophy by learning from patterns, automating repetitive tasks,
|
|
||||||
and building institutional knowledge.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="cards-with-icons-container">
|
|
||||||
<div class="card-with-icon">
|
<!-- Philosophy Quote -->
|
||||||
<div class="fa-solid fa-brain icon xl color-accent"></div>
|
<div class="philosophy-quote">
|
||||||
<div class="feature-heading">
|
<blockquote>
|
||||||
<p class="paragraph m bold">Plan</p>
|
"Most engineering creates linear value: you build a feature, it works, done.
|
||||||
<p class="paragraph s secondary">
|
Compounding engineering creates exponential value: each solved problem teaches the system,
|
||||||
Understand the change needed and its impact before writing any code.
|
each pattern becomes reusable, each review strengthens future reviews."
|
||||||
Use research agents to gather context and best practices.
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Four Pillars -->
|
||||||
|
<div class="philosophy-pillars">
|
||||||
|
<div class="pillar">
|
||||||
|
<div class="pillar-icon"><i class="fa-solid fa-brain"></i></div>
|
||||||
|
<div class="pillar-content">
|
||||||
|
<h3>Plan</h3>
|
||||||
|
<p class="pillar-tagline">Understand before you build</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 3 research agents in parallel to create comprehensive implementation plans.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="pillar-tools">
|
||||||
|
<span class="tool-tag">framework-docs-researcher</span>
|
||||||
|
<span class="tool-tag">best-practices-researcher</span>
|
||||||
|
<span class="tool-tag">repo-research-analyst</span>
|
||||||
|
<span class="tool-tag">git-history-analyzer</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-with-icon">
|
|
||||||
<div class="fa-solid fa-robot icon xl color-accent"></div>
|
<div class="pillar">
|
||||||
<div class="feature-heading">
|
<div class="pillar-icon"><i class="fa-solid fa-robot"></i></div>
|
||||||
<p class="paragraph m bold">Delegate</p>
|
<div class="pillar-content">
|
||||||
<p class="paragraph s secondary">
|
<h3>Delegate</h3>
|
||||||
Use specialized AI agents to help with implementation.
|
<p class="pillar-tagline">Leverage specialized expertise</p>
|
||||||
Each agent brings deep expertise in its domain.
|
<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.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="pillar-tools">
|
||||||
|
<span class="tool-tag">24 specialized agents</span>
|
||||||
|
<span class="tool-tag">/workflows:work</span>
|
||||||
|
<span class="tool-tag">dhh-ruby-style skill</span>
|
||||||
|
<span class="tool-tag">git-worktree skill</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-with-icon">
|
|
||||||
<div class="fa-solid fa-magnifying-glass icon xl color-accent"></div>
|
<div class="pillar">
|
||||||
<div class="feature-heading">
|
<div class="pillar-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
|
||||||
<p class="paragraph m bold">Assess</p>
|
<div class="pillar-content">
|
||||||
<p class="paragraph s secondary">
|
<h3>Assess</h3>
|
||||||
Run comprehensive reviews with multiple perspectives.
|
<p class="pillar-tagline">Multiple perspectives, comprehensive coverage</p>
|
||||||
Security, performance, architecture—all covered.
|
<p class="pillar-description">
|
||||||
|
The <code>/workflows:review</code> command launches 12+ 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.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="pillar-tools">
|
||||||
|
<span class="tool-tag">security-sentinel</span>
|
||||||
|
<span class="tool-tag">performance-oracle</span>
|
||||||
|
<span class="tool-tag">architecture-strategist</span>
|
||||||
|
<span class="tool-tag">data-integrity-guardian</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-with-icon">
|
|
||||||
<div class="fa-solid fa-book icon xl color-accent"></div>
|
<div class="pillar">
|
||||||
<div class="feature-heading">
|
<div class="pillar-icon"><i class="fa-solid fa-book"></i></div>
|
||||||
<p class="paragraph m bold">Codify</p>
|
<div class="pillar-content">
|
||||||
<p class="paragraph s secondary">
|
<h3>Codify</h3>
|
||||||
Document learnings and patterns for future use.
|
<p class="pillar-tagline">Turn solutions into knowledge</p>
|
||||||
Each solved problem becomes reusable knowledge.
|
<p class="pillar-description">
|
||||||
|
Every solved problem should teach the system. The <code>/workflows:codify</code> command
|
||||||
|
captures solutions as searchable documentation. The <code>feedback-codifier</code> agent
|
||||||
|
extracts patterns from code reviews to improve future reviews.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="pillar-tools">
|
||||||
|
<span class="tool-tag">/workflows:codify</span>
|
||||||
|
<span class="tool-tag">codify-docs skill</span>
|
||||||
|
<span class="tool-tag">feedback-codifier</span>
|
||||||
|
<span class="tool-tag">file-todos skill</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- How It Compounds -->
|
||||||
|
<div class="compound-effect">
|
||||||
|
<h3><i class="fa-solid fa-chart-line color-accent"></i> The Compounding Effect</h3>
|
||||||
|
<div class="compound-grid">
|
||||||
|
<div class="compound-item">
|
||||||
|
<div class="compound-number">Day 1</div>
|
||||||
|
<div class="compound-text">Install plugin, run first review</div>
|
||||||
|
</div>
|
||||||
|
<div class="compound-arrow"><i class="fa-solid fa-arrow-right"></i></div>
|
||||||
|
<div class="compound-item">
|
||||||
|
<div class="compound-number">Week 1</div>
|
||||||
|
<div class="compound-text">Patterns documented, todos organized</div>
|
||||||
|
</div>
|
||||||
|
<div class="compound-arrow"><i class="fa-solid fa-arrow-right"></i></div>
|
||||||
|
<div class="compound-item">
|
||||||
|
<div class="compound-number">Month 1</div>
|
||||||
|
<div class="compound-text">Knowledge base growing, reviews faster</div>
|
||||||
|
</div>
|
||||||
|
<div class="compound-arrow"><i class="fa-solid fa-arrow-right"></i></div>
|
||||||
|
<div class="compound-item highlight">
|
||||||
|
<div class="compound-number">Ongoing</div>
|
||||||
|
<div class="compound-text">Each task easier than the last</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
682
plugins/compounding-engineering/docs/pages/agents.html
Normal file
682
plugins/compounding-engineering/docs/pages/agents.html
Normal file
@@ -0,0 +1,682 @@
|
|||||||
|
<!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 24 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 (24)</a></li>
|
||||||
|
<li><a href="commands.html">Commands (16)</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>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 (6)</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">
|
||||||
|
Complete documentation for all 24 specialized AI agents. Each agent brings deep expertise
|
||||||
|
in a specific domain and can be invoked individually or orchestrated together.
|
||||||
|
</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>Code review agents that examine changes from multiple perspectives: conventions, security, performance, architecture, and quality.</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">
|
||||||
|
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.
|
||||||
|
</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">
|
||||||
|
Brutally honest Rails code review from David Heinemeier Hansson's perspective.
|
||||||
|
Focuses on Rails conventions, simplicity, and avoiding over-engineering.
|
||||||
|
</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">
|
||||||
|
Reviews Python code with an exceptionally high quality bar. Enforces type hints, Pythonic patterns,
|
||||||
|
and modern Python 3.10+ syntax.
|
||||||
|
</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">
|
||||||
|
Reviews TypeScript code with an exceptionally high quality bar. Enforces type safety,
|
||||||
|
modern patterns, and clean architecture.
|
||||||
|
</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">
|
||||||
|
Performs security audits, vulnerability assessments, and OWASP compliance checks.
|
||||||
|
Essential for any code handling authentication, payments, or sensitive data.
|
||||||
|
</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">
|
||||||
|
Analyzes code for performance issues, bottlenecks, and scalability concerns.
|
||||||
|
Projects performance at 10x, 100x, and 1000x scale.
|
||||||
|
</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">
|
||||||
|
Analyzes code changes from an architectural perspective. Evaluates system structure,
|
||||||
|
SOLID principles, and API contracts.
|
||||||
|
</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">
|
||||||
|
Reviews database migrations, data models, and data persistence code.
|
||||||
|
Ensures data safety and privacy compliance.
|
||||||
|
</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">
|
||||||
|
Analyzes code for design patterns, anti-patterns, naming conventions, and duplication.
|
||||||
|
Uses tools like jscpd for duplication detection.
|
||||||
|
</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">
|
||||||
|
Ensures code is as simple and minimal as possible. Applies YAGNI rigorously
|
||||||
|
and challenges unnecessary abstractions.
|
||||||
|
</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>Research agents that gather information from documentation, repositories, and git history to inform development decisions.</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">
|
||||||
|
Gathers comprehensive documentation and best practices for frameworks, libraries, or dependencies.
|
||||||
|
</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">
|
||||||
|
Researches and gathers external best practices, documentation, and examples for any technology.
|
||||||
|
</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">
|
||||||
|
Archaeological analysis of code repositories to understand evolution and patterns.
|
||||||
|
</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">
|
||||||
|
Conducts thorough research on repository structure, documentation, and patterns.
|
||||||
|
</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 (6)</h2>
|
||||||
|
<p>Workflow agents that automate common development tasks like bug reproduction, PR resolution, and linting.</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">
|
||||||
|
Verifies whether bug reports are actual bugs through systematic reproduction.
|
||||||
|
Classifies bugs and provides severity assessment.
|
||||||
|
</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">
|
||||||
|
Addresses code review comments by implementing requested changes and reporting resolutions.
|
||||||
|
</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="feedback-codifier">
|
||||||
|
<div class="agent-detail-header">
|
||||||
|
<h3>feedback-codifier</h3>
|
||||||
|
<span class="agent-badge">Knowledge</span>
|
||||||
|
</div>
|
||||||
|
<p class="agent-detail-description">
|
||||||
|
Analyzes code review feedback to extract patterns and update reviewer configurations.
|
||||||
|
Uses Opus model for deep analysis.
|
||||||
|
</p>
|
||||||
|
<h4>Capabilities</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Extract core patterns from code reviews</li>
|
||||||
|
<li>Categorize by type (structure, testing, security, performance)</li>
|
||||||
|
<li>Formulate actionable guidelines</li>
|
||||||
|
<li>Update existing reviewer agents with new standards</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>claude agent feedback-codifier</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">
|
||||||
|
Runs linting and code quality checks on Ruby and ERB files.
|
||||||
|
Uses Haiku model for efficiency.
|
||||||
|
</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">
|
||||||
|
Analyzes specifications and plans for user flows and gap identification.
|
||||||
|
Uses Sonnet model for analysis.
|
||||||
|
</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">
|
||||||
|
Reviews and edits text content to conform to Every's specific style guide.
|
||||||
|
</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 agents that help with UI implementation, Figma synchronization, and iterative design refinement.</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">
|
||||||
|
Systematic UI/UX design refinement through iterative improvements.
|
||||||
|
Takes screenshots, analyzes, implements changes, and repeats.
|
||||||
|
</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">
|
||||||
|
Automatically detects and fixes visual differences between Figma designs and web implementations.
|
||||||
|
Uses Sonnet model.
|
||||||
|
</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">
|
||||||
|
Verifies UI implementations match Figma design specifications.
|
||||||
|
Uses Opus model for detailed analysis.
|
||||||
|
</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">
|
||||||
|
Creates/updates README files following Ankane-style template for Ruby gems.
|
||||||
|
Optimized for conciseness with every sentence kept to 15 words or less.
|
||||||
|
</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>
|
||||||
518
plugins/compounding-engineering/docs/pages/commands.html
Normal file
518
plugins/compounding-engineering/docs/pages/commands.html
Normal file
@@ -0,0 +1,518 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="theme-dark">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Command Reference - Compounding Engineering</title>
|
||||||
|
<meta content="Complete reference for all 16 slash commands 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">Agents (24)</a></li>
|
||||||
|
<li><a href="commands.html" class="active">Commands (16)</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>On This Page</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#workflow-commands">Workflow (4)</a></li>
|
||||||
|
<li><a href="#utility-commands">Utility (12)</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>Commands</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-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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Workflow Commands -->
|
||||||
|
<section id="workflow-commands">
|
||||||
|
<h2><i class="fa-solid fa-arrows-spin"></i> Workflow Commands (4)</h2>
|
||||||
|
<p>Core workflow commands that embody the Plan-Delegate-Assess-Codify philosophy.</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.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[feature description, bug report, or improvement idea]</code></p>
|
||||||
|
<h4>Workflow</h4>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Repository Research (Parallel)</strong> - Launch 3 agents simultaneously:
|
||||||
|
<ul>
|
||||||
|
<li><code>repo-research-analyst</code> - Project patterns</li>
|
||||||
|
<li><code>best-practices-researcher</code> - Industry standards</li>
|
||||||
|
<li><code>framework-docs-researcher</code> - Framework documentation</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>SpecFlow Analysis</strong> - Run <code>spec-flow-analyzer</code> for user flows</li>
|
||||||
|
<li><strong>Choose Detail Level</strong>:
|
||||||
|
<ul>
|
||||||
|
<li><strong>MINIMAL</strong> - Simple bugs/small improvements</li>
|
||||||
|
<li><strong>MORE</strong> - Standard features</li>
|
||||||
|
<li><strong>A LOT</strong> - Major features with phases</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>Write Plan</strong> - Save as <code>plans/<issue_title>.md</code></li>
|
||||||
|
<li><strong>Review</strong> - Call <code>/plan_review</code> for multi-agent feedback</li>
|
||||||
|
</ol>
|
||||||
|
<div class="callout callout-info">
|
||||||
|
<div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
|
||||||
|
<div class="callout-content">
|
||||||
|
<p>This command does NOT write code. It only researches and creates the plan.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/workflows:plan Add OAuth integration for third-party auth
|
||||||
|
/workflows:plan Fix N+1 query in user dashboard</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="workflows-review">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[PR number, GitHub URL, branch name, or "latest"]</code></p>
|
||||||
|
<h4>Workflow</h4>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Setup</strong> - Detect review target, optionally use git-worktree for isolation</li>
|
||||||
|
<li><strong>Launch 12 Parallel Review Agents</strong>:
|
||||||
|
<ul>
|
||||||
|
<li><code>kieran-rails-reviewer</code>, <code>dhh-rails-reviewer</code></li>
|
||||||
|
<li><code>security-sentinel</code>, <code>performance-oracle</code></li>
|
||||||
|
<li><code>architecture-strategist</code>, <code>data-integrity-guardian</code></li>
|
||||||
|
<li><code>pattern-recognition-specialist</code>, <code>git-history-analyzer</code></li>
|
||||||
|
<li>And more...</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>Ultra-Thinking Analysis</strong> - Stakeholder perspectives, scenario exploration</li>
|
||||||
|
<li><strong>Simplification Review</strong> - Run <code>code-simplicity-reviewer</code></li>
|
||||||
|
<li><strong>Synthesize Findings</strong> - Categorize by severity (P1/P2/P3)</li>
|
||||||
|
<li><strong>Create Todo Files</strong> - Using file-todos skill for all findings</li>
|
||||||
|
</ol>
|
||||||
|
<div class="callout callout-warning">
|
||||||
|
<div class="callout-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||||||
|
<div class="callout-content">
|
||||||
|
<p><strong>P1 (Critical) findings BLOCK MERGE.</strong> Address these before merging.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/workflows:review 42
|
||||||
|
/workflows:review https://github.com/owner/repo/pull/42
|
||||||
|
/workflows:review feature-branch-name
|
||||||
|
/workflows:review latest</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="workflows-work">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/workflows:work</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Execute work plans efficiently while maintaining quality and finishing features.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[plan file, specification, or todo file path]</code></p>
|
||||||
|
<h4>Phases</h4>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Quick Start</strong>
|
||||||
|
<ul>
|
||||||
|
<li>Read plan & clarify requirements</li>
|
||||||
|
<li>Setup environment (live or worktree)</li>
|
||||||
|
<li>Create TodoWrite task list</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>Execute</strong>
|
||||||
|
<ul>
|
||||||
|
<li>Task execution loop with progress tracking</li>
|
||||||
|
<li>Follow existing patterns</li>
|
||||||
|
<li>Test continuously</li>
|
||||||
|
<li>Figma sync if applicable</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>Quality Check</strong>
|
||||||
|
<ul>
|
||||||
|
<li>Run test suite</li>
|
||||||
|
<li>Run linting</li>
|
||||||
|
<li>Optional reviewer agents for complex changes</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>Ship It</strong>
|
||||||
|
<ul>
|
||||||
|
<li>Create commit with conventional format</li>
|
||||||
|
<li>Create pull request</li>
|
||||||
|
<li>Notify with summary</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/workflows:work plans/user-authentication.md
|
||||||
|
/workflows:work todos/042-ready-p1-performance-issue.md</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="workflows-codify">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/workflows:codify</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Document a recently solved problem for the knowledge base.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[optional: brief context about the fix]</code></p>
|
||||||
|
<h4>Workflow</h4>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Preconditions</strong> - Verify problem is solved and verified working</li>
|
||||||
|
<li><strong>Launch 7 Parallel Subagents</strong>:
|
||||||
|
<ul>
|
||||||
|
<li>Context Analyzer - Extract YAML frontmatter skeleton</li>
|
||||||
|
<li>Solution Extractor - Identify root cause and solution</li>
|
||||||
|
<li>Related Docs Finder - Find cross-references</li>
|
||||||
|
<li>Prevention Strategist - Develop prevention strategies</li>
|
||||||
|
<li>Category Classifier - Determine docs category</li>
|
||||||
|
<li>Documentation Writer - Create the file</li>
|
||||||
|
<li>Optional Specialized Agent - Based on problem type</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>Create Documentation</strong> - File in <code>docs/solutions/[category]/</code></li>
|
||||||
|
</ol>
|
||||||
|
<h4>Auto-Triggers</h4>
|
||||||
|
<p>Phrases: "that worked", "it's fixed", "working now", "problem solved"</p>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/workflows:codify
|
||||||
|
/workflows:codify N+1 query optimization</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[optional: daily|weekly, or time period in days]</code></p>
|
||||||
|
<h4>Output Sections</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Breaking Changes (top priority)</li>
|
||||||
|
<li>New Features</li>
|
||||||
|
<li>Bug Fixes</li>
|
||||||
|
<li>Other Improvements</li>
|
||||||
|
<li>Shoutouts</li>
|
||||||
|
<li>Fun Fact</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/changelog daily
|
||||||
|
/changelog weekly
|
||||||
|
/changelog 7</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="create-agent-skill">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[skill description or requirements]</code></p>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/create-agent-skill PDF processing for document analysis
|
||||||
|
/create-agent-skill Web scraping with error handling</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="generate-command">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[command purpose and requirements]</code></p>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/generate_command Security audit for codebase
|
||||||
|
/generate_command Automated performance testing</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="heal-skill">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/heal-skill</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Heal skill documentation by applying corrections discovered during execution.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[optional: specific issue to fix]</code></p>
|
||||||
|
<h4>Approval Options</h4>
|
||||||
|
<ol>
|
||||||
|
<li>Apply and commit</li>
|
||||||
|
<li>Apply without commit</li>
|
||||||
|
<li>Revise changes</li>
|
||||||
|
<li>Cancel</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/heal-skill API endpoint URL changed
|
||||||
|
/heal-skill parameter validation error</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="plan-review">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/plan_review</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Have multiple specialized agents review a plan in parallel.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[plan file path or plan content]</code></p>
|
||||||
|
<h4>Review Agents</h4>
|
||||||
|
<ul>
|
||||||
|
<li><code>dhh-rails-reviewer</code> - Rails conventions</li>
|
||||||
|
<li><code>kieran-rails-reviewer</code> - Rails best practices</li>
|
||||||
|
<li><code>code-simplicity-reviewer</code> - Simplicity and clarity</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/plan_review plans/user-authentication.md</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="report-bug">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/report-bug</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Report a bug in the compounding-engineering plugin.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[optional: brief description of the bug]</code></p>
|
||||||
|
<h4>Information Collected</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Bug category (Agent/Command/Skill/MCP/Installation)</li>
|
||||||
|
<li>Specific component name</li>
|
||||||
|
<li>Actual vs expected behavior</li>
|
||||||
|
<li>Steps to reproduce</li>
|
||||||
|
<li>Error messages</li>
|
||||||
|
<li>Environment info (auto-gathered)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/report-bug Agent not working
|
||||||
|
/report-bug Command failing with timeout</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="reproduce-bug">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/reproduce-bug</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Reproduce and investigate a bug using logs and console inspection.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[GitHub issue number]</code></p>
|
||||||
|
<h4>Investigation Process</h4>
|
||||||
|
<ol>
|
||||||
|
<li>Read GitHub issue details</li>
|
||||||
|
<li>Launch parallel investigation agents</li>
|
||||||
|
<li>Analyze code for failure points</li>
|
||||||
|
<li>Iterate until root cause found</li>
|
||||||
|
<li>Post findings to GitHub issue</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/reproduce-bug 142</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="triage">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/triage</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Triage and categorize findings for the CLI todo system.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[findings list or source type]</code></p>
|
||||||
|
<h4>User Decisions</h4>
|
||||||
|
<ul>
|
||||||
|
<li><strong>"yes"</strong> - Create/update todo file, change status to ready</li>
|
||||||
|
<li><strong>"next"</strong> - Skip and delete from todos</li>
|
||||||
|
<li><strong>"custom"</strong> - Modify and re-present</li>
|
||||||
|
</ul>
|
||||||
|
<div class="callout callout-info">
|
||||||
|
<div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
|
||||||
|
<div class="callout-content">
|
||||||
|
<p>This command does NOT write code. It only categorizes and creates todo files.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/triage code-review-findings.txt
|
||||||
|
/triage security-audit-results</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="resolve-parallel">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/resolve_parallel</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Resolve all TODO comments using parallel processing.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[optional: specific TODO pattern or file]</code></p>
|
||||||
|
<h4>Process</h4>
|
||||||
|
<ol>
|
||||||
|
<li>Analyze TODO comments from codebase</li>
|
||||||
|
<li>Create dependency graph (mermaid diagram)</li>
|
||||||
|
<li>Spawn parallel <code>pr-comment-resolver</code> agents</li>
|
||||||
|
<li>Commit and push after completion</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/resolve_parallel
|
||||||
|
/resolve_parallel authentication
|
||||||
|
/resolve_parallel src/auth/</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="resolve-pr-parallel">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/resolve_pr_parallel</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Resolve all PR comments using parallel processing.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[optional: PR number or current PR]</code></p>
|
||||||
|
<h4>Process</h4>
|
||||||
|
<ol>
|
||||||
|
<li>Get all unresolved PR comments</li>
|
||||||
|
<li>Create TodoWrite list</li>
|
||||||
|
<li>Launch parallel <code>pr-comment-resolver</code> agents</li>
|
||||||
|
<li>Commit, resolve threads, and push</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/resolve_pr_parallel
|
||||||
|
/resolve_pr_parallel 123</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="resolve-todo-parallel">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/resolve_todo_parallel</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Resolve all pending CLI todos using parallel processing.
|
||||||
|
</p>
|
||||||
|
<h4>Arguments</h4>
|
||||||
|
<p><code>[optional: specific todo ID or pattern]</code></p>
|
||||||
|
<h4>Process</h4>
|
||||||
|
<ol>
|
||||||
|
<li>Get unresolved TODOs from <code>/todos/*.md</code></li>
|
||||||
|
<li>Analyze dependencies</li>
|
||||||
|
<li>Spawn parallel agents</li>
|
||||||
|
<li>Commit, mark as resolved, push</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/resolve_todo_parallel
|
||||||
|
/resolve_todo_parallel 042
|
||||||
|
/resolve_todo_parallel p1</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command-detail" id="prime">
|
||||||
|
<div class="command-detail-header">
|
||||||
|
<code class="command-detail-name">/prime</code>
|
||||||
|
</div>
|
||||||
|
<p class="command-detail-description">
|
||||||
|
Prime/setup command for project initialization.
|
||||||
|
</p>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>/prime</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="docs-nav-footer">
|
||||||
|
<a href="agents.html" class="nav-prev">
|
||||||
|
<span class="nav-label">Previous</span>
|
||||||
|
<span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Agents</span>
|
||||||
|
</a>
|
||||||
|
<a href="skills.html" class="nav-next">
|
||||||
|
<span class="nav-label">Next</span>
|
||||||
|
<span class="nav-title">Skills <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>
|
||||||
400
plugins/compounding-engineering/docs/pages/mcp-servers.html
Normal file
400
plugins/compounding-engineering/docs/pages/mcp-servers.html
Normal file
@@ -0,0 +1,400 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="theme-dark">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>MCP Servers Reference - Compounding Engineering</title>
|
||||||
|
<meta content="Complete reference for the 2 MCP servers 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">Agents (24)</a></li>
|
||||||
|
<li><a href="commands.html">Commands (16)</a></li>
|
||||||
|
<li><a href="skills.html">Skills (11)</a></li>
|
||||||
|
<li><a href="mcp-servers.html" class="active">MCP Servers (2)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="nav-section">
|
||||||
|
<h3>On This Page</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#playwright">Playwright</a></li>
|
||||||
|
<li><a href="#context7">Context7</a></li>
|
||||||
|
<li><a href="#manual-config">Manual Configuration</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>MCP Servers</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-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
|
||||||
|
2 MCP servers that start automatically when enabled.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="callout callout-warning">
|
||||||
|
<div class="callout-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Playwright -->
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Tools Provided</h3>
|
||||||
|
<table class="docs-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Tool</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>browser_navigate</code></td>
|
||||||
|
<td>Navigate to a URL in the browser</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>browser_take_screenshot</code></td>
|
||||||
|
<td>Capture a screenshot of the current page or element</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>browser_click</code></td>
|
||||||
|
<td>Click on an element using CSS selector or text</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>browser_fill_form</code></td>
|
||||||
|
<td>Fill form fields with values</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>browser_snapshot</code></td>
|
||||||
|
<td>Get an accessibility tree snapshot of the page</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>browser_evaluate</code></td>
|
||||||
|
<td>Execute JavaScript code in the browser context</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>Use Cases</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>
|
||||||
|
</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
|
||||||
|
|
||||||
|
# Example: Taking a screenshot for 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Configuration</h3>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>{
|
||||||
|
"playwright": {
|
||||||
|
"type": "stdio",
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["-y", "@playwright/mcp@latest"],
|
||||||
|
"env": {}
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Context7 -->
|
||||||
|
<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 100+ frameworks and libraries.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Tools Provided</h3>
|
||||||
|
<table class="docs-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Tool</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>resolve-library-id</code></td>
|
||||||
|
<td>Find the library ID for a framework or package</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>get-library-docs</code></td>
|
||||||
|
<td>Get documentation for a specific library</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>Supported Frameworks</h3>
|
||||||
|
<p>Context7 supports 100+ frameworks including:</p>
|
||||||
|
<div class="framework-grid">
|
||||||
|
<div class="framework-category">
|
||||||
|
<h4>Backend</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Ruby on Rails</li>
|
||||||
|
<li>Django</li>
|
||||||
|
<li>Laravel</li>
|
||||||
|
<li>Express</li>
|
||||||
|
<li>FastAPI</li>
|
||||||
|
<li>Spring Boot</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="framework-category">
|
||||||
|
<h4>Frontend</h4>
|
||||||
|
<ul>
|
||||||
|
<li>React</li>
|
||||||
|
<li>Vue.js</li>
|
||||||
|
<li>Angular</li>
|
||||||
|
<li>Svelte</li>
|
||||||
|
<li>Next.js</li>
|
||||||
|
<li>Nuxt</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="framework-category">
|
||||||
|
<h4>Mobile</h4>
|
||||||
|
<ul>
|
||||||
|
<li>React Native</li>
|
||||||
|
<li>Flutter</li>
|
||||||
|
<li>SwiftUI</li>
|
||||||
|
<li>Kotlin</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="framework-category">
|
||||||
|
<h4>Tools & Libraries</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Tailwind CSS</li>
|
||||||
|
<li>PostgreSQL</li>
|
||||||
|
<li>Redis</li>
|
||||||
|
<li>GraphQL</li>
|
||||||
|
<li>Prisma</li>
|
||||||
|
<li>And many more...</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Example Usage</h3>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code># Claude Code will use Context7 automatically for documentation lookups
|
||||||
|
"Look up the Rails ActionCable documentation"
|
||||||
|
|
||||||
|
"How does the useEffect hook work in React?"
|
||||||
|
|
||||||
|
"What are the best practices for PostgreSQL indexes?"</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Configuration</h3>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>{
|
||||||
|
"context7": {
|
||||||
|
"type": "http",
|
||||||
|
"url": "https://mcp.context7.com/mcp"
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Manual Configuration -->
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Project-Level Configuration</h3>
|
||||||
|
<p>Add to <code>.claude/settings.json</code> in your project:</p>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>{
|
||||||
|
"mcpServers": {
|
||||||
|
"playwright": {
|
||||||
|
"type": "stdio",
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["-y", "@playwright/mcp@latest"],
|
||||||
|
"env": {}
|
||||||
|
},
|
||||||
|
"context7": {
|
||||||
|
"type": "http",
|
||||||
|
"url": "https://mcp.context7.com/mcp"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Global Configuration</h3>
|
||||||
|
<p>Add to <code>~/.claude/settings.json</code> to enable for all projects:</p>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>{
|
||||||
|
"mcpServers": {
|
||||||
|
"playwright": {
|
||||||
|
"type": "stdio",
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["-y", "@playwright/mcp@latest"],
|
||||||
|
"env": {}
|
||||||
|
},
|
||||||
|
"context7": {
|
||||||
|
"type": "http",
|
||||||
|
"url": "https://mcp.context7.com/mcp"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Requirements</h3>
|
||||||
|
<table class="docs-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Server</th>
|
||||||
|
<th>Requirement</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Playwright</td>
|
||||||
|
<td>Node.js 18+ and npx</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Context7</td>
|
||||||
|
<td>Internet connection (HTTP endpoint)</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>Verifying MCP Servers</h3>
|
||||||
|
<p>After configuration, restart Claude Code and verify the servers are loaded:</p>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code># Check if MCP tools are available
|
||||||
|
"What MCP tools do you have access to?"
|
||||||
|
|
||||||
|
# Test Playwright
|
||||||
|
"Take a screenshot of the current directory listing"
|
||||||
|
|
||||||
|
# Test Context7
|
||||||
|
"Look up Rails Active Record documentation"</code></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="docs-nav-footer">
|
||||||
|
<a href="skills.html" class="nav-prev">
|
||||||
|
<span class="nav-label">Previous</span>
|
||||||
|
<span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Skills</span>
|
||||||
|
</a>
|
||||||
|
<a href="getting-started.html" class="nav-next">
|
||||||
|
<span class="nav-label">Back to</span>
|
||||||
|
<span class="nav-title">Getting Started <i class="fa-solid fa-arrow-right"></i></span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.framework-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-l);
|
||||||
|
margin: var(--space-l) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.framework-grid {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework-category {
|
||||||
|
background-color: var(--color-surface);
|
||||||
|
padding: var(--space-l);
|
||||||
|
border-radius: var(--radius-m);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework-category h4 {
|
||||||
|
margin: 0 0 var(--space-s) 0;
|
||||||
|
color: var(--color-accent);
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework-category ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: var(--space-l);
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework-category li {
|
||||||
|
margin: var(--space-xs) 0;
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
|
||||||
|
document.querySelector('.docs-sidebar').classList.toggle('open');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
591
plugins/compounding-engineering/docs/pages/skills.html
Normal file
591
plugins/compounding-engineering/docs/pages/skills.html
Normal file
@@ -0,0 +1,591 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="theme-dark">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Skill Reference - Compounding Engineering</title>
|
||||||
|
<meta content="Complete reference for all 11 intelligent skills 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">Agents (24)</a></li>
|
||||||
|
<li><a href="commands.html">Commands (16)</a></li>
|
||||||
|
<li><a href="skills.html" class="active">Skills (11)</a></li>
|
||||||
|
<li><a href="mcp-servers.html">MCP Servers (2)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="nav-section">
|
||||||
|
<h3>On This Page</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#development-tools">Development (7)</a></li>
|
||||||
|
<li><a href="#content-workflow">Content & Workflow (3)</a></li>
|
||||||
|
<li><a href="#image-generation">Image Generation (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>Skills</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-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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="usage-box">
|
||||||
|
<h3>How to Use Skills</h3>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code># In your prompt, reference the skill
|
||||||
|
skill: [skill-name]
|
||||||
|
|
||||||
|
# Examples
|
||||||
|
skill: gemini-imagegen
|
||||||
|
skill: dhh-ruby-style
|
||||||
|
skill: create-agent-skills</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="callout callout-info">
|
||||||
|
<div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
|
||||||
|
<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>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="create-agent-skills">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>create-agent-skills</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Capabilities</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Skill architecture and best practices</li>
|
||||||
|
<li>Router pattern for complex multi-step skills</li>
|
||||||
|
<li>Progressive disclosure design principles</li>
|
||||||
|
<li>SKILL.md structure guidance</li>
|
||||||
|
<li>Asset management (workflows, references, templates, scripts)</li>
|
||||||
|
<li>XML structure patterns</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Workflows Included</h4>
|
||||||
|
<ul>
|
||||||
|
<li><code>create-new-skill</code> - Start from scratch</li>
|
||||||
|
<li><code>add-reference</code> - Add reference documentation</li>
|
||||||
|
<li><code>add-template</code> - Add code templates</li>
|
||||||
|
<li><code>add-workflow</code> - Add step-by-step procedures</li>
|
||||||
|
<li><code>add-script</code> - Add executable scripts</li>
|
||||||
|
<li><code>audit-skill</code> - Validate skill structure</li>
|
||||||
|
<li><code>verify-skill</code> - Test skill functionality</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: create-agent-skills</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="skill-creator">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>skill-creator</h3>
|
||||||
|
<span class="skill-badge">Meta</span>
|
||||||
|
</div>
|
||||||
|
<p class="skill-detail-description">
|
||||||
|
Guide for creating effective skills with a 6-step process.
|
||||||
|
</p>
|
||||||
|
<h4>6-Step Process</h4>
|
||||||
|
<ol>
|
||||||
|
<li>Understand skill usage patterns with examples</li>
|
||||||
|
<li>Plan reusable skill contents</li>
|
||||||
|
<li>Initialize skill using template</li>
|
||||||
|
<li>Edit skill with clear instructions</li>
|
||||||
|
<li>Package skill into distributable zip</li>
|
||||||
|
<li>Iterate based on testing feedback</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: skill-creator</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="dhh-ruby-style">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>dhh-ruby-style</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Key Patterns</h4>
|
||||||
|
<ul>
|
||||||
|
<li><strong>REST Purity</strong> - 7 REST actions only</li>
|
||||||
|
<li><strong>Fat Models</strong> - Business logic, authorization, broadcasting in models</li>
|
||||||
|
<li><strong>Thin Controllers</strong> - 1-5 line actions</li>
|
||||||
|
<li><strong>Current Attributes</strong> - Request context</li>
|
||||||
|
<li><strong>Hotwire/Turbo</strong> - Model-level broadcasting</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Ruby Syntax Preferences</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Symbol arrays <code>%i[...]</code></li>
|
||||||
|
<li>Modern hash syntax</li>
|
||||||
|
<li>Ternaries for simple conditionals</li>
|
||||||
|
<li>Bang methods for mutations</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: dhh-ruby-style</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="andrew-kane-gem-writer">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>andrew-kane-gem-writer</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Philosophy</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Simplicity over cleverness</li>
|
||||||
|
<li>Zero or minimal dependencies</li>
|
||||||
|
<li>Explicit code over metaprogramming</li>
|
||||||
|
<li>Rails integration without Rails coupling</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Key Patterns</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Class macro DSL for configuration</li>
|
||||||
|
<li><code>ActiveSupport.on_load</code> for Rails integration</li>
|
||||||
|
<li><code>class << self</code> with <code>attr_accessor</code></li>
|
||||||
|
<li>Railtie pattern for hooks</li>
|
||||||
|
<li>Minitest (no RSpec)</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Reference Files</h4>
|
||||||
|
<ul>
|
||||||
|
<li><code>references/module-organization.md</code></li>
|
||||||
|
<li><code>references/rails-integration.md</code></li>
|
||||||
|
<li><code>references/database-adapters.md</code></li>
|
||||||
|
<li><code>references/testing-patterns.md</code></li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: andrew-kane-gem-writer</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="dspy-ruby">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>dspy-ruby</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Predictor Types</h4>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Predict</strong> - Basic inference</li>
|
||||||
|
<li><strong>ChainOfThought</strong> - Reasoning with explanations</li>
|
||||||
|
<li><strong>ReAct</strong> - Tool-using agents with iteration</li>
|
||||||
|
<li><strong>CodeAct</strong> - Dynamic code generation</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Supported Providers</h4>
|
||||||
|
<ul>
|
||||||
|
<li>OpenAI (GPT-4, GPT-4o-mini)</li>
|
||||||
|
<li>Anthropic Claude</li>
|
||||||
|
<li>Google Gemini</li>
|
||||||
|
<li>Ollama (free, local)</li>
|
||||||
|
<li>OpenRouter</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Requirements</h4>
|
||||||
|
<table class="docs-table">
|
||||||
|
<tr>
|
||||||
|
<td><code>OPENAI_API_KEY</code></td>
|
||||||
|
<td>For OpenAI provider</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>ANTHROPIC_API_KEY</code></td>
|
||||||
|
<td>For Anthropic provider</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>GOOGLE_API_KEY</code></td>
|
||||||
|
<td>For Gemini provider</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: dspy-ruby</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="frontend-design">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>frontend-design</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Design Thinking</h4>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Purpose</strong> - What is the interface for?</li>
|
||||||
|
<li><strong>Tone</strong> - What feeling should it evoke?</li>
|
||||||
|
<li><strong>Constraints</strong> - Technical and brand limitations</li>
|
||||||
|
<li><strong>Differentiation</strong> - How to stand out</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Focus Areas</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Typography with distinctive font choices</li>
|
||||||
|
<li>Color & theme coherence with CSS variables</li>
|
||||||
|
<li>Motion and animation patterns</li>
|
||||||
|
<li>Spatial composition with asymmetry</li>
|
||||||
|
<li>Backgrounds (gradients, textures, patterns)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="callout callout-tip">
|
||||||
|
<div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
|
||||||
|
<div class="callout-content">
|
||||||
|
<p>Avoids generic AI aesthetics like Inter fonts, purple gradients, and rounded corners everywhere.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: frontend-design</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="codify-docs">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>codify-docs</h3>
|
||||||
|
<span class="skill-badge">Docs</span>
|
||||||
|
</div>
|
||||||
|
<p class="skill-detail-description">
|
||||||
|
Capture solved problems as categorized documentation with YAML frontmatter for fast lookup.
|
||||||
|
</p>
|
||||||
|
<h4>Auto-Triggers</h4>
|
||||||
|
<p>Phrases: "that worked", "it's fixed", "working now", "problem solved"</p>
|
||||||
|
<h4>7-Step Process</h4>
|
||||||
|
<ol>
|
||||||
|
<li>Detect confirmation phrase</li>
|
||||||
|
<li>Gather context (module, symptom, investigation, root cause)</li>
|
||||||
|
<li>Check existing docs for similar issues</li>
|
||||||
|
<li>Generate filename</li>
|
||||||
|
<li>Validate YAML frontmatter</li>
|
||||||
|
<li>Create documentation in category directory</li>
|
||||||
|
<li>Cross-reference related issues</li>
|
||||||
|
</ol>
|
||||||
|
<h4>Categories</h4>
|
||||||
|
<ul>
|
||||||
|
<li><code>build-errors/</code></li>
|
||||||
|
<li><code>test-failures/</code></li>
|
||||||
|
<li><code>runtime-errors/</code></li>
|
||||||
|
<li><code>performance-issues/</code></li>
|
||||||
|
<li><code>database-issues/</code></li>
|
||||||
|
<li><code>security-issues/</code></li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: codify-docs</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="every-style-editor">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>every-style-editor</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Four-Phase Review</h4>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Initial Assessment</strong> - Context, type, audience, tone</li>
|
||||||
|
<li><strong>Detailed Line Edit</strong> - Sentence structure, punctuation, capitalization</li>
|
||||||
|
<li><strong>Mechanical Review</strong> - Spacing, formatting, consistency</li>
|
||||||
|
<li><strong>Recommendations</strong> - Actionable improvement suggestions</li>
|
||||||
|
</ol>
|
||||||
|
<h4>Style Checks</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Grammar and punctuation</li>
|
||||||
|
<li>Style guide compliance</li>
|
||||||
|
<li>Capitalization rules</li>
|
||||||
|
<li>Word choice optimization</li>
|
||||||
|
<li>Formatting consistency</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: every-style-editor</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="file-todos">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>file-todos</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>File Format</h4>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code># Naming convention
|
||||||
|
{issue_id}-{status}-{priority}-{description}.md
|
||||||
|
|
||||||
|
# Examples
|
||||||
|
001-pending-p1-security-vulnerability.md
|
||||||
|
002-ready-p2-performance-optimization.md
|
||||||
|
003-complete-p3-code-cleanup.md</code></pre>
|
||||||
|
</div>
|
||||||
|
<h4>Status Values</h4>
|
||||||
|
<ul>
|
||||||
|
<li><code>pending</code> - Needs triage</li>
|
||||||
|
<li><code>ready</code> - Approved for work</li>
|
||||||
|
<li><code>complete</code> - Done</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Priority Values</h4>
|
||||||
|
<ul>
|
||||||
|
<li><code>p1</code> - Critical</li>
|
||||||
|
<li><code>p2</code> - Important</li>
|
||||||
|
<li><code>p3</code> - Nice-to-have</li>
|
||||||
|
</ul>
|
||||||
|
<h4>YAML Frontmatter</h4>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>---
|
||||||
|
status: pending
|
||||||
|
priority: p1
|
||||||
|
issue_id: "001"
|
||||||
|
tags: [security, authentication]
|
||||||
|
dependencies: []
|
||||||
|
---</code></pre>
|
||||||
|
</div>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: file-todos</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="skill-detail" id="git-worktree">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>git-worktree</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<h4>Commands</h4>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code># Create new worktree
|
||||||
|
bash scripts/worktree-manager.sh create feature-login
|
||||||
|
|
||||||
|
# List worktrees
|
||||||
|
bash scripts/worktree-manager.sh list
|
||||||
|
|
||||||
|
# Switch to worktree
|
||||||
|
bash scripts/worktree-manager.sh switch feature-login
|
||||||
|
|
||||||
|
# Clean up completed worktrees
|
||||||
|
bash scripts/worktree-manager.sh cleanup</code></pre>
|
||||||
|
</div>
|
||||||
|
<h4>Integration</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Works with <code>/workflows:review</code> for isolated PR analysis</li>
|
||||||
|
<li>Works with <code>/workflows:work</code> for parallel feature development</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Requirements</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Git 2.8+ (for worktree support)</li>
|
||||||
|
<li>Worktrees stored in <code>.worktrees/</code> directory</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: git-worktree</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<div class="skill-detail featured" id="gemini-imagegen">
|
||||||
|
<div class="skill-detail-header">
|
||||||
|
<h3>gemini-imagegen</h3>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4>Features</h4>
|
||||||
|
<div class="skill-features">
|
||||||
|
<div class="feature-item"><i class="fa-solid fa-check"></i> Text-to-image generation</div>
|
||||||
|
<div class="feature-item"><i class="fa-solid fa-check"></i> Image editing & manipulation</div>
|
||||||
|
<div class="feature-item"><i class="fa-solid fa-check"></i> Multi-turn iterative refinement</div>
|
||||||
|
<div class="feature-item"><i class="fa-solid fa-check"></i> Multiple reference images (up to 14)</div>
|
||||||
|
<div class="feature-item"><i class="fa-solid fa-check"></i> Google Search grounding (Pro)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>Available Models</h4>
|
||||||
|
<table class="docs-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Model</th>
|
||||||
|
<th>Resolution</th>
|
||||||
|
<th>Best For</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>gemini-2.5-flash-image</code></td>
|
||||||
|
<td>1024px</td>
|
||||||
|
<td>Speed, high-volume tasks</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>gemini-3-pro-image-preview</code></td>
|
||||||
|
<td>Up to 4K</td>
|
||||||
|
<td>Professional assets, complex instructions</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h4>Quick Start</h4>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code># Text-to-image
|
||||||
|
python scripts/generate_image.py "A cat wearing a wizard hat" output.png
|
||||||
|
|
||||||
|
# Edit existing image
|
||||||
|
python scripts/edit_image.py input.png "Add a rainbow in the background" output.png
|
||||||
|
|
||||||
|
# Multi-turn chat
|
||||||
|
python scripts/multi_turn_chat.py</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>Image Configuration</h4>
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>from google.genai import types
|
||||||
|
|
||||||
|
response = client.models.generate_content(
|
||||||
|
model="gemini-3-pro-image-preview",
|
||||||
|
contents=[prompt],
|
||||||
|
config=types.GenerateContentConfig(
|
||||||
|
response_modalities=['TEXT', 'IMAGE'],
|
||||||
|
image_config=types.ImageConfig(
|
||||||
|
aspect_ratio="16:9", # 1:1, 2:3, 3:2, 4:3, 16:9, 21:9
|
||||||
|
image_size="2K" # 1K, 2K, 4K (Pro only)
|
||||||
|
),
|
||||||
|
)
|
||||||
|
)</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>Prompting Best Practices</h4>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Photorealistic</strong> - Include camera details: lens type, lighting, angle, mood</li>
|
||||||
|
<li><strong>Stylized Art</strong> - Specify style explicitly: kawaii, cel-shading, bold outlines</li>
|
||||||
|
<li><strong>Text in Images</strong> - Be explicit about font style and placement (use Pro model)</li>
|
||||||
|
<li><strong>Product Mockups</strong> - Describe lighting setup and surface</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>Requirements</h4>
|
||||||
|
<table class="docs-table">
|
||||||
|
<tr>
|
||||||
|
<td><code>GEMINI_API_KEY</code></td>
|
||||||
|
<td>Required environment variable</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>google-genai</code></td>
|
||||||
|
<td>Python package</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>pillow</code></td>
|
||||||
|
<td>Python package for image handling</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="callout callout-info">
|
||||||
|
<div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
|
||||||
|
<div class="callout-content">
|
||||||
|
<p>All generated images include SynthID watermarks. Image-only mode won't work with Google Search grounding.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-code-block">
|
||||||
|
<pre><code>skill: gemini-imagegen</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="docs-nav-footer">
|
||||||
|
<a href="commands.html" class="nav-prev">
|
||||||
|
<span class="nav-label">Previous</span>
|
||||||
|
<span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Commands</span>
|
||||||
|
</a>
|
||||||
|
<a href="mcp-servers.html" class="nav-next">
|
||||||
|
<span class="nav-label">Next</span>
|
||||||
|
<span class="nav-title">MCP Servers <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>
|
||||||
Reference in New Issue
Block a user