Move docs to /docs for GitHub Pages
GitHub Pages is configured to serve from /docs in main branch. Moved documentation site from plugins/compounding-engineering/docs/ to repository root /docs folder. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kieran Klaassen
667
docs/pages/agents.html
Normal file
667
docs/pages/agents.html
Normal file
@@ -0,0 +1,667 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="theme-dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Agent Reference - Compounding Engineering</title>
|
||||
<meta content="Complete reference for all 23 specialized AI agents in the Compounding Engineering plugin." name="description" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
||||
<link href="../css/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="../css/docs.css" rel="stylesheet" type="text/css" />
|
||||
<script src="../js/main.js" type="text/javascript" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-gradient"></div>
|
||||
<div class="docs-layout">
|
||||
<aside class="docs-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="../index.html" class="nav-brand">
|
||||
<span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
|
||||
<span class="logo-text">CE Docs</span>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section">
|
||||
<h3>Getting Started</h3>
|
||||
<ul>
|
||||
<li><a href="getting-started.html">Installation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="agents.html" class="active">Agents (23)</a></li>
|
||||
<li><a href="commands.html">Commands (13)</a></li>
|
||||
<li><a href="skills.html">Skills (11)</a></li>
|
||||
<li><a href="mcp-servers.html">MCP Servers (2)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li><a href="changelog.html">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>On This Page</h3>
|
||||
<ul>
|
||||
<li><a href="#review-agents">Review (10)</a></li>
|
||||
<li><a href="#research-agents">Research (4)</a></li>
|
||||
<li><a href="#workflow-agents">Workflow (5)</a></li>
|
||||
<li><a href="#design-agents">Design (3)</a></li>
|
||||
<li><a href="#docs-agents">Docs (1)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="docs-content">
|
||||
<div class="docs-header">
|
||||
<nav class="breadcrumb">
|
||||
<a href="../index.html">Home</a>
|
||||
<span>/</span>
|
||||
<a href="getting-started.html">Docs</a>
|
||||
<span>/</span>
|
||||
<span>Agents</span>
|
||||
</nav>
|
||||
<button class="mobile-menu-toggle" data-sidebar-toggle>
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<article class="docs-article">
|
||||
<h1><i class="fa-solid fa-users-gear color-accent"></i> Agent Reference</h1>
|
||||
<p class="lead">
|
||||
Complete documentation for all 23 specialized AI agents. Each agent brings deep expertise
|
||||
in a specific domain and can be invoked individually or orchestrated together.
|
||||
</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 (5)</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="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>
|
||||
495
docs/pages/changelog.html
Normal file
495
docs/pages/changelog.html
Normal file
@@ -0,0 +1,495 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="theme-dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Changelog - Compounding Engineering</title>
|
||||
<meta content="Version history and release notes for 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 (23)</a></li>
|
||||
<li><a href="commands.html">Commands (13)</a></li>
|
||||
<li><a href="skills.html">Skills (11)</a></li>
|
||||
<li><a href="mcp-servers.html">MCP Servers (two)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li><a href="changelog.html" class="active">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>On This Page</h3>
|
||||
<ul>
|
||||
<li><a href="#v2.6.0">v2.6.0</a></li>
|
||||
<li><a href="#v2.5.0">v2.5.0</a></li>
|
||||
<li><a href="#v2.4.1">v2.4.1</a></li>
|
||||
<li><a href="#v2.4.0">v2.4.0</a></li>
|
||||
<li><a href="#v2.3.0">v2.3.0</a></li>
|
||||
<li><a href="#v2.2.1">v2.2.1</a></li>
|
||||
<li><a href="#v2.2.0">v2.2.0</a></li>
|
||||
<li><a href="#v2.1.0">v2.1.0</a></li>
|
||||
<li><a href="#v2.0.0">v2.0.0</a></li>
|
||||
<li><a href="#v1.1.0">v1.1.0</a></li>
|
||||
<li><a href="#v1.0.0">v1.0.0</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>Changelog</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-clock-rotate-left color-accent"></i> Changelog</h1>
|
||||
<p class="lead">
|
||||
All notable changes to the compounding-engineering plugin. This project follows
|
||||
<a href="https://semver.org/">Semantic Versioning</a> and
|
||||
<a href="https://keepachangelog.com/">Keep a Changelog</a> conventions.
|
||||
</p>
|
||||
|
||||
<!-- Version 2.6.0 -->
|
||||
<section id="v2.6.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.6.0</h2>
|
||||
<span class="version-date">2024-11-26</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category removed">
|
||||
<h3><i class="fa-solid fa-minus"></i> Removed</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong><code>feedback-codifier</code> agent</strong> - Removed from workflow agents.
|
||||
Agent count reduced from 24 to 23.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.5.0 -->
|
||||
<section id="v2.5.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.5.0</h2>
|
||||
<span class="version-date">2024-11-25</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category added">
|
||||
<h3><i class="fa-solid fa-plus"></i> Added</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong><code>/report-bug</code> command</strong> - New slash command for reporting bugs in the
|
||||
compounding-engineering plugin. Provides a structured workflow that gathers bug information
|
||||
through guided questions, collects environment details automatically, and creates a GitHub
|
||||
issue in the EveryInc/every-marketplace repository.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.4.1 -->
|
||||
<section id="v2.4.1" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.4.1</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category improved">
|
||||
<h3><i class="fa-solid fa-arrow-up"></i> Improved</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>design-iterator agent</strong> - Added focused screenshot guidance: always capture
|
||||
only the target element/area instead of full page screenshots. Includes browser_resize
|
||||
recommendations, element-targeted screenshot workflow using browser_snapshot refs, and
|
||||
explicit instruction to never use fullPage mode.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.4.0 -->
|
||||
<section id="v2.4.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.4.0</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category fixed">
|
||||
<h3><i class="fa-solid fa-bug"></i> Fixed</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>MCP Configuration</strong> - Moved MCP servers back to <code>plugin.json</code>
|
||||
following working examples from anthropics/life-sciences plugins.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Context7 URL</strong> - Updated to use HTTP type with correct endpoint URL.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.3.0 -->
|
||||
<section id="v2.3.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.3.0</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category changed">
|
||||
<h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>MCP Configuration</strong> - Moved MCP servers from inline <code>plugin.json</code>
|
||||
to separate <code>.mcp.json</code> file per Claude Code best practices.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.2.1 -->
|
||||
<section id="v2.2.1" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.2.1</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category fixed">
|
||||
<h3><i class="fa-solid fa-bug"></i> Fixed</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Playwright MCP Server</strong> - Added missing <code>"type": "stdio"</code> field
|
||||
required for MCP server configuration to load properly.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.2.0 -->
|
||||
<section id="v2.2.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.2.0</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category added">
|
||||
<h3><i class="fa-solid fa-plus"></i> Added</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Context7 MCP Server</strong> - Bundled Context7 for instant framework documentation
|
||||
lookup. Provides up-to-date docs for Rails, React, Next.js, and more than 100 other frameworks.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.1.0 -->
|
||||
<section id="v2.1.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.1.0</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category added">
|
||||
<h3><i class="fa-solid fa-plus"></i> Added</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Playwright MCP Server</strong> - Bundled <code>@playwright/mcp</code> for browser
|
||||
automation across all projects. Provides screenshot, navigation, click, fill, and evaluate tools.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category changed">
|
||||
<h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
|
||||
<ul>
|
||||
<li>Replaced all Puppeteer references with Playwright across agents and commands:
|
||||
<ul>
|
||||
<li><code>bug-reproduction-validator</code> agent</li>
|
||||
<li><code>design-iterator</code> agent</li>
|
||||
<li><code>design-implementation-reviewer</code> agent</li>
|
||||
<li><code>figma-design-sync</code> agent</li>
|
||||
<li><code>generate_command</code> command</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.0.2 -->
|
||||
<section id="v2.0.2" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.0.2</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category changed">
|
||||
<h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>design-iterator agent</strong> - Updated description to emphasize proactive usage
|
||||
when design work isn't coming together on first attempt.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.0.1 -->
|
||||
<section id="v2.0.1" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.0.1</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category added">
|
||||
<h3><i class="fa-solid fa-plus"></i> Added</h3>
|
||||
<ul>
|
||||
<li><strong>CLAUDE.md</strong> - Project instructions with versioning requirements</li>
|
||||
<li><strong>docs/solutions/plugin-versioning-requirements.md</strong> - Workflow documentation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 2.0.0 -->
|
||||
<section id="v2.0.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v2.0.0</h2>
|
||||
<span class="version-date">2024-11-24</span>
|
||||
<span class="version-badge major">Major Release</span>
|
||||
</div>
|
||||
|
||||
<p class="version-description">
|
||||
Major reorganization consolidating agents, commands, and skills from multiple sources into
|
||||
a single, well-organized plugin.
|
||||
</p>
|
||||
|
||||
<div class="changelog-category added">
|
||||
<h3><i class="fa-solid fa-plus"></i> Added</h3>
|
||||
|
||||
<h4>New Agents (seven)</h4>
|
||||
<ul>
|
||||
<li><code>design-iterator</code> - Iteratively refine UI components through systematic design iterations</li>
|
||||
<li><code>design-implementation-reviewer</code> - Verify UI implementations match Figma design specifications</li>
|
||||
<li><code>figma-design-sync</code> - Synchronize web implementations with Figma designs</li>
|
||||
<li><code>bug-reproduction-validator</code> - Systematically reproduce and validate bug reports</li>
|
||||
<li><code>spec-flow-analyzer</code> - Analyze user flows and identify gaps in specifications</li>
|
||||
<li><code>lint</code> - Run linting and code quality checks on Ruby and ERB files</li>
|
||||
<li><code>ankane-readme-writer</code> - Create READMEs following Ankane-style template for Ruby gems</li>
|
||||
</ul>
|
||||
|
||||
<h4>New Commands (nine)</h4>
|
||||
<ul>
|
||||
<li><code>/changelog</code> - Create engaging changelogs for recent merges</li>
|
||||
<li><code>/plan_review</code> - Multi-agent plan review in parallel</li>
|
||||
<li><code>/resolve_parallel</code> - Resolve TODO comments in parallel</li>
|
||||
<li><code>/resolve_pr_parallel</code> - Resolve PR comments in parallel</li>
|
||||
<li><code>/reproduce-bug</code> - Reproduce bugs using logs and console</li>
|
||||
<li><code>/prime</code> - Prime/setup command</li>
|
||||
<li><code>/create-agent-skill</code> - Create or edit Claude Code skills</li>
|
||||
<li><code>/heal-skill</code> - Fix skill documentation issues</li>
|
||||
<li><code>/workflows:codify</code> - Document solved problems for knowledge base</li>
|
||||
</ul>
|
||||
|
||||
<h4>New Skills (10)</h4>
|
||||
<ul>
|
||||
<li><code>andrew-kane-gem-writer</code> - Write Ruby gems following Andrew Kane's patterns</li>
|
||||
<li><code>codify-docs</code> - Capture solved problems as categorized documentation</li>
|
||||
<li><code>create-agent-skills</code> - Expert guidance for creating Claude Code skills</li>
|
||||
<li><code>dhh-ruby-style</code> - Write Ruby/Rails code in DHH's 37signals style</li>
|
||||
<li><code>dspy-ruby</code> - Build type-safe LLM applications with DSPy.rb</li>
|
||||
<li><code>every-style-editor</code> - Review copy for Every's style guide compliance</li>
|
||||
<li><code>file-todos</code> - File-based todo tracking system</li>
|
||||
<li><code>frontend-design</code> - Create production-grade frontend interfaces</li>
|
||||
<li><code>git-worktree</code> - Manage Git worktrees for parallel development</li>
|
||||
<li><code>skill-creator</code> - Guide for creating effective Claude Code skills</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category changed">
|
||||
<h3><i class="fa-solid fa-arrows-rotate"></i> Changed</h3>
|
||||
<h4>Agents Reorganized by Category</h4>
|
||||
<ul>
|
||||
<li><code>review/</code> (10 agents) - Code quality, security, performance reviewers</li>
|
||||
<li><code>research/</code> (four agents) - Documentation, patterns, history analysis</li>
|
||||
<li><code>design/</code> (three agents) - UI/design review and iteration</li>
|
||||
<li><code>workflow/</code> (six agents) - PR resolution, bug validation, linting</li>
|
||||
<li><code>docs/</code> (one agent) - README generation</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="version-summary">
|
||||
<h4>Summary</h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>v1.1.0</th>
|
||||
<th>v2.0.0</th>
|
||||
<th>Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Agents</td>
|
||||
<td>17</td>
|
||||
<td>24</td>
|
||||
<td class="positive">+7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Commands</td>
|
||||
<td>6</td>
|
||||
<td>15</td>
|
||||
<td class="positive">+9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Skills</td>
|
||||
<td>1</td>
|
||||
<td>11</td>
|
||||
<td class="positive">+10</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 1.1.0 -->
|
||||
<section id="v1.1.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v1.1.0</h2>
|
||||
<span class="version-date">2024-11-22</span>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category added">
|
||||
<h3><i class="fa-solid fa-plus"></i> Added</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>gemini-imagegen Skill</strong>
|
||||
<ul>
|
||||
<li>Text-to-image generation with Google's Gemini API</li>
|
||||
<li>Image editing and manipulation</li>
|
||||
<li>Multi-turn refinement via chat interface</li>
|
||||
<li>Multiple reference image composition (up to 14 images)</li>
|
||||
<li>Model support: <code>gemini-2.5-flash-image</code> and <code>gemini-3-pro-image-preview</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="changelog-category fixed">
|
||||
<h3><i class="fa-solid fa-bug"></i> Fixed</h3>
|
||||
<ul>
|
||||
<li>Corrected component counts in documentation (17 agents, not 15)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Version 1.0.0 -->
|
||||
<section id="v1.0.0" class="version-section">
|
||||
<div class="version-header">
|
||||
<h2>v1.0.0</h2>
|
||||
<span class="version-date">2024-10-09</span>
|
||||
<span class="version-badge">Initial Release</span>
|
||||
</div>
|
||||
|
||||
<p class="version-description">
|
||||
Initial release of the compounding-engineering plugin.
|
||||
</p>
|
||||
|
||||
<div class="changelog-category added">
|
||||
<h3><i class="fa-solid fa-plus"></i> Added</h3>
|
||||
|
||||
<h4>17 Specialized Agents</h4>
|
||||
|
||||
<p><strong>Code Review (five)</strong></p>
|
||||
<ul>
|
||||
<li><code>kieran-rails-reviewer</code> - Rails code review with strict conventions</li>
|
||||
<li><code>kieran-python-reviewer</code> - Python code review with quality standards</li>
|
||||
<li><code>kieran-typescript-reviewer</code> - TypeScript code review</li>
|
||||
<li><code>dhh-rails-reviewer</code> - Rails review from DHH's perspective</li>
|
||||
<li><code>code-simplicity-reviewer</code> - Final pass for simplicity and minimalism</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Analysis & Architecture (four)</strong></p>
|
||||
<ul>
|
||||
<li><code>architecture-strategist</code> - Architectural decisions and compliance</li>
|
||||
<li><code>pattern-recognition-specialist</code> - Design pattern analysis</li>
|
||||
<li><code>security-sentinel</code> - Security audits and vulnerability assessments</li>
|
||||
<li><code>performance-oracle</code> - Performance analysis and optimization</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Research (four)</strong></p>
|
||||
<ul>
|
||||
<li><code>framework-docs-researcher</code> - Framework documentation research</li>
|
||||
<li><code>best-practices-researcher</code> - External best practices gathering</li>
|
||||
<li><code>git-history-analyzer</code> - Git history and code evolution analysis</li>
|
||||
<li><code>repo-research-analyst</code> - Repository structure and conventions</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Workflow (three)</strong></p>
|
||||
<ul>
|
||||
<li><code>every-style-editor</code> - Every's style guide compliance</li>
|
||||
<li><code>pr-comment-resolver</code> - PR comment resolution</li>
|
||||
<li><code>feedback-codifier</code> - Feedback pattern codification</li>
|
||||
</ul>
|
||||
|
||||
<h4>Six Slash Commands</h4>
|
||||
<ul>
|
||||
<li><code>/plan</code> - Create implementation plans</li>
|
||||
<li><code>/review</code> - Comprehensive code reviews</li>
|
||||
<li><code>/work</code> - Execute work items systematically</li>
|
||||
<li><code>/triage</code> - Triage and prioritize issues</li>
|
||||
<li><code>/resolve_todo_parallel</code> - Resolve TODOs in parallel</li>
|
||||
<li><code>/generate_command</code> - Generate new slash commands</li>
|
||||
</ul>
|
||||
|
||||
<h4>Infrastructure</h4>
|
||||
<ul>
|
||||
<li>MIT license</li>
|
||||
<li>Plugin manifest (<code>plugin.json</code>)</li>
|
||||
<li>Pre-configured permissions for Rails development</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
524
docs/pages/commands.html
Normal file
524
docs/pages/commands.html
Normal file
@@ -0,0 +1,524 @@
|
||||
<!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 (23)</a></li>
|
||||
<li><a href="commands.html" class="active">Commands (13)</a></li>
|
||||
<li><a href="skills.html">Skills (11)</a></li>
|
||||
<li><a href="mcp-servers.html">MCP Servers (two)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li><a href="changelog.html">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>On This Page</h3>
|
||||
<ul>
|
||||
<li><a href="#workflow-commands">Workflow (four)</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 (four)</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 three 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 seven 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>
|
||||
598
docs/pages/getting-started.html
Normal file
598
docs/pages/getting-started.html
Normal file
@@ -0,0 +1,598 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="theme-dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Getting Started - Compounding Engineering</title>
|
||||
<meta content="Complete guide to installing and using the Compounding Engineering plugin for Claude Code." name="description" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
||||
<link href="../css/style.css" rel="stylesheet" type="text/css" />
|
||||
<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">
|
||||
<!-- Sidebar -->
|
||||
<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="#installation" class="active">Installation</a></li>
|
||||
<li><a href="#quick-start">Quick Start</a></li>
|
||||
<li><a href="#configuration">Configuration</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Core Concepts</h3>
|
||||
<ul>
|
||||
<li><a href="#philosophy">Philosophy</a></li>
|
||||
<li><a href="#agents">Using Agents</a></li>
|
||||
<li><a href="#commands">Using Commands</a></li>
|
||||
<li><a href="#skills">Using Skills</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
<li><a href="#code-review">Code Review Workflow</a></li>
|
||||
<li><a href="#creating-agents">Creating Custom Agents</a></li>
|
||||
<li><a href="#creating-skills">Creating Custom Skills</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="agents.html">Agent Reference</a></li>
|
||||
<li><a href="commands.html">Command Reference</a></li>
|
||||
<li><a href="skills.html">Skill Reference</a></li>
|
||||
<li><a href="mcp-servers.html">MCP Servers</a></li>
|
||||
<li><a href="changelog.html">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="docs-content">
|
||||
<div class="docs-header">
|
||||
<nav class="breadcrumb">
|
||||
<a href="../index.html">Home</a>
|
||||
<span>/</span>
|
||||
<span>Getting Started</span>
|
||||
</nav>
|
||||
<button class="mobile-menu-toggle" data-sidebar-toggle>
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<article class="docs-article">
|
||||
<h1>Getting Started with Compounding Engineering</h1>
|
||||
<p class="lead">
|
||||
This guide will help you install, configure, and start using the Compounding Engineering plugin
|
||||
for Claude Code. In about five minutes, you'll have access to 23 specialized agents, 16 commands,
|
||||
11 skills, and two MCP servers.
|
||||
</p>
|
||||
|
||||
<!-- Installation Section -->
|
||||
<section id="installation">
|
||||
<h2><i class="fa-solid fa-download"></i> Installation</h2>
|
||||
|
||||
<h3>Prerequisites</h3>
|
||||
<ul>
|
||||
<li><a href="https://claude.ai/claude-code" target="_blank">Claude Code</a> installed and configured</li>
|
||||
<li>A GitHub account (for marketplace access)</li>
|
||||
<li>Node.js 18+ (for MCP servers)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Step 1: Add the Marketplace</h3>
|
||||
<p>First, add the Every Marketplace to your Claude Code installation:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code>claude /plugin marketplace add https://github.com/EveryInc/every-marketplace</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Step 2: Install the Plugin</h3>
|
||||
<p>Install the compounding-engineering plugin from the marketplace:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code>claude /plugin install compounding-engineering</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Step 3: Verify Installation</h3>
|
||||
<p>Verify the plugin is installed correctly:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code>claude /plugin list</code></pre>
|
||||
</div>
|
||||
<p>You should see <code>compounding-engineering</code> in the list of installed plugins.</p>
|
||||
|
||||
<div class="callout callout-info">
|
||||
<div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
|
||||
<div class="callout-content">
|
||||
<h4>Known Issue: MCP Servers</h4>
|
||||
<p>
|
||||
The bundled MCP servers (Playwright and Context7) may not load automatically.
|
||||
See the <a href="#mcp-configuration">MCP Configuration</a> section for the workaround.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Section -->
|
||||
<section id="quick-start">
|
||||
<h2><i class="fa-solid fa-rocket"></i> Quick Start</h2>
|
||||
|
||||
<p>Here are the most common ways to use the plugin:</p>
|
||||
|
||||
<h3>Run a Code Review</h3>
|
||||
<p>The <code>/workflows:review</code> command runs a comprehensive code review using multiple agents in parallel:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Review a PR by number
|
||||
/workflows:review 123
|
||||
|
||||
# Review the current branch
|
||||
/workflows:review
|
||||
|
||||
# Review a specific branch
|
||||
/workflows:review feature/my-feature</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Use a Specialized Agent</h3>
|
||||
<p>Invoke agents directly for specific tasks:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Rails code review with Kieran's conventions
|
||||
claude agent kieran-rails-reviewer "Review the UserController"
|
||||
|
||||
# Security audit
|
||||
claude agent security-sentinel "Audit authentication flow"
|
||||
|
||||
# Research best practices
|
||||
claude agent best-practices-researcher "Find pagination patterns for Rails"</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Invoke a Skill</h3>
|
||||
<p>Skills provide domain expertise on demand:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Generate images with Gemini
|
||||
skill: gemini-imagegen
|
||||
|
||||
# Write Ruby in DHH's style
|
||||
skill: dhh-ruby-style
|
||||
|
||||
# Create a new Claude Code skill
|
||||
skill: create-agent-skills</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<section id="configuration">
|
||||
<h2><i class="fa-solid fa-gear"></i> Configuration</h2>
|
||||
|
||||
<h3 id="mcp-configuration">MCP Server Configuration</h3>
|
||||
<p>
|
||||
If MCP servers don't auto-load, add them manually to your <code>.claude/settings.json</code>:
|
||||
</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>Environment Variables</h3>
|
||||
<p>Some skills require environment variables:</p>
|
||||
<table class="docs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Required For</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>GEMINI_API_KEY</code></td>
|
||||
<td>gemini-imagegen</td>
|
||||
<td>Google Gemini API key for image generation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy">
|
||||
<h2><i class="fa-solid fa-lightbulb"></i> The Compounding Engineering Philosophy</h2>
|
||||
|
||||
<blockquote class="highlight-quote">
|
||||
Every unit of engineering work should make subsequent units of work easier—not harder.
|
||||
</blockquote>
|
||||
|
||||
<p>This philosophy manifests in four key practices:</p>
|
||||
|
||||
<div class="philosophy-grid">
|
||||
<div class="philosophy-card">
|
||||
<div class="philosophy-icon"><i class="fa-solid fa-brain"></i></div>
|
||||
<h4>Plan</h4>
|
||||
<p>
|
||||
Understand the change needed and its impact before writing code.
|
||||
Use research agents to gather context, best practices, and examples.
|
||||
</p>
|
||||
</div>
|
||||
<div class="philosophy-card">
|
||||
<div class="philosophy-icon"><i class="fa-solid fa-robot"></i></div>
|
||||
<h4>Delegate</h4>
|
||||
<p>
|
||||
Use specialized AI agents to help with implementation.
|
||||
Each agent brings deep expertise in its domain.
|
||||
</p>
|
||||
</div>
|
||||
<div class="philosophy-card">
|
||||
<div class="philosophy-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
|
||||
<h4>Assess</h4>
|
||||
<p>
|
||||
Run comprehensive reviews with multiple perspectives.
|
||||
Security, performance, architecture—all covered by specialized agents.
|
||||
</p>
|
||||
</div>
|
||||
<div class="philosophy-card">
|
||||
<div class="philosophy-icon"><i class="fa-solid fa-book"></i></div>
|
||||
<h4>Codify</h4>
|
||||
<p>
|
||||
Document learnings and patterns for future use.
|
||||
Each solved problem becomes reusable knowledge.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Using Agents Section -->
|
||||
<section id="agents">
|
||||
<h2><i class="fa-solid fa-users-gear"></i> Using Agents</h2>
|
||||
|
||||
<p>
|
||||
Agents are specialized personas that can be invoked to perform specific tasks.
|
||||
They're designed to bring deep expertise in their domain.
|
||||
</p>
|
||||
|
||||
<h3>Invoking Agents</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Basic syntax
|
||||
claude agent [agent-name] "[optional message]"
|
||||
|
||||
# Examples
|
||||
claude agent kieran-rails-reviewer
|
||||
claude agent security-sentinel "Audit the payment flow"
|
||||
claude agent git-history-analyzer "Show changes to user model"</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Agent Categories</h3>
|
||||
<table class="docs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Count</th>
|
||||
<th>Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Review</td>
|
||||
<td>10</td>
|
||||
<td>Code review, security audits, performance analysis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Research</td>
|
||||
<td>four</td>
|
||||
<td>Best practices, documentation, git history</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Design</td>
|
||||
<td>three</td>
|
||||
<td>UI iteration, Figma sync, design review</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Workflow</td>
|
||||
<td>five</td>
|
||||
<td>Bug reproduction, PR resolution, linting</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Docs</td>
|
||||
<td>one</td>
|
||||
<td>README generation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
<a href="agents.html" class="button secondary">
|
||||
<i class="fa-solid fa-arrow-right"></i> View All Agents
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Using Commands Section -->
|
||||
<section id="commands">
|
||||
<h2><i class="fa-solid fa-terminal"></i> Using Commands</h2>
|
||||
|
||||
<p>
|
||||
Slash commands automate complex multi-step workflows. They orchestrate
|
||||
multiple agents, tools, and processes into a single command.
|
||||
</p>
|
||||
|
||||
<h3>Running Commands</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Workflow commands (prefix: /workflows:)
|
||||
/workflows:plan
|
||||
/workflows:review 123
|
||||
/workflows:work
|
||||
/workflows:codify
|
||||
|
||||
# Utility commands
|
||||
/changelog
|
||||
/triage
|
||||
/reproduce-bug</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>The Review Workflow</h3>
|
||||
<p>The <code>/workflows:review</code> command is the most comprehensive. It:</p>
|
||||
<ol>
|
||||
<li>Detects the review target (PR, branch, or current changes)</li>
|
||||
<li>Sets up a git worktree for isolated analysis</li>
|
||||
<li>Runs 10 or more review agents in parallel</li>
|
||||
<li>Synthesizes findings by severity (P1/P2/P3)</li>
|
||||
<li>Creates structured todo files for each finding</li>
|
||||
<li>Generates a summary report</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
<a href="commands.html" class="button secondary">
|
||||
<i class="fa-solid fa-arrow-right"></i> View All Commands
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Using Skills Section -->
|
||||
<section id="skills">
|
||||
<h2><i class="fa-solid fa-wand-magic-sparkles"></i> Using Skills</h2>
|
||||
|
||||
<p>
|
||||
Skills provide domain expertise that Claude Code can invoke on-demand.
|
||||
Unlike agents (which are personas), skills are bodies of knowledge with
|
||||
templates, references, and workflows.
|
||||
</p>
|
||||
|
||||
<h3>Invoking Skills</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code># In your prompt, reference the skill
|
||||
skill: gemini-imagegen
|
||||
|
||||
# Or ask Claude to use it
|
||||
"Use the dhh-ruby-style skill to refactor this code"</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Skill Structure</h3>
|
||||
<p>Skills typically contain:</p>
|
||||
<ul>
|
||||
<li><strong>SKILL.md</strong> - Main documentation and instructions</li>
|
||||
<li><strong>references/</strong> - Supporting documentation</li>
|
||||
<li><strong>templates/</strong> - Code templates and patterns</li>
|
||||
<li><strong>workflows/</strong> - Step-by-step procedures</li>
|
||||
<li><strong>scripts/</strong> - Executable scripts (if needed)</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<a href="skills.html" class="button secondary">
|
||||
<i class="fa-solid fa-arrow-right"></i> View All Skills
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Code Review Workflow Guide -->
|
||||
<section id="code-review">
|
||||
<h2><i class="fa-solid fa-code-pull-request"></i> Code Review Workflow Guide</h2>
|
||||
|
||||
<p>
|
||||
The code review workflow is the heart of Compounding Engineering.
|
||||
Here's how to get the most out of it.
|
||||
</p>
|
||||
|
||||
<h3>Basic Review</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Review a PR
|
||||
/workflows:review 123
|
||||
|
||||
# Review current branch
|
||||
/workflows:review</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Understanding Findings</h3>
|
||||
<p>Findings are categorized by severity:</p>
|
||||
<ul>
|
||||
<li><span class="badge badge-critical">P1 Critical</span> - Blocks merge. Security vulnerabilities, data corruption risks, breaking changes.</li>
|
||||
<li><span class="badge badge-important">P2 Important</span> - Should fix. Performance issues, architectural concerns, reliability problems.</li>
|
||||
<li><span class="badge badge-nice">P3 Nice-to-Have</span> - Enhancements. Minor improvements, cleanup, documentation.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Working with Todo Files</h3>
|
||||
<p>Review findings are stored as todo files in the <code>todos/</code> directory:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code># List all pending todos
|
||||
ls todos/*-pending-*.md
|
||||
|
||||
# Triage findings
|
||||
/triage
|
||||
|
||||
# Resolve todos in parallel
|
||||
/resolve_todo_parallel</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Creating Custom Agents -->
|
||||
<section id="creating-agents">
|
||||
<h2><i class="fa-solid fa-plus"></i> Creating Custom Agents</h2>
|
||||
|
||||
<p>
|
||||
You can create custom agents tailored to your team's needs.
|
||||
Agents are defined as markdown files with YAML frontmatter.
|
||||
</p>
|
||||
|
||||
<h3>Agent File Structure</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code>---
|
||||
name: my-custom-agent
|
||||
description: Brief description of what this agent does
|
||||
---
|
||||
|
||||
# Agent Instructions
|
||||
|
||||
You are [role description].
|
||||
|
||||
## Your Responsibilities
|
||||
1. First responsibility
|
||||
2. Second responsibility
|
||||
|
||||
## Guidelines
|
||||
- Guideline one
|
||||
- Guideline two</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Agent Location</h3>
|
||||
<p>Place custom agents in:</p>
|
||||
<ul>
|
||||
<li><code>.claude/agents/</code> - Project-specific agents</li>
|
||||
<li><code>~/.claude/agents/</code> - User-wide agents</li>
|
||||
</ul>
|
||||
|
||||
<div class="callout callout-tip">
|
||||
<div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
|
||||
<div class="callout-content">
|
||||
<h4>Use the Command</h4>
|
||||
<p>
|
||||
The easiest way to create agents is with the <code>/create-agent-skill</code> command
|
||||
or the <code>create-agent-skills</code> skill.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Creating Custom Skills -->
|
||||
<section id="creating-skills">
|
||||
<h2><i class="fa-solid fa-plus"></i> Creating Custom Skills</h2>
|
||||
|
||||
<p>
|
||||
Skills are more complex than agents. They can include references,
|
||||
templates, workflows, and scripts.
|
||||
</p>
|
||||
|
||||
<h3>Skill Directory Structure</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code>my-skill/
|
||||
SKILL.md # Main skill file (required)
|
||||
references/ # Supporting documentation
|
||||
concept-one.md
|
||||
concept-two.md
|
||||
templates/ # Code templates
|
||||
basic-template.md
|
||||
workflows/ # Step-by-step procedures
|
||||
workflow-one.md
|
||||
scripts/ # Executable scripts
|
||||
helper.py</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>SKILL.md Format</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code>---
|
||||
name: my-skill
|
||||
description: Brief description shown when skill is invoked
|
||||
---
|
||||
|
||||
# Skill Title
|
||||
|
||||
Detailed instructions for using this skill.
|
||||
|
||||
## Quick Start
|
||||
...
|
||||
|
||||
## Reference Materials
|
||||
The skill includes references in the `references/` directory.
|
||||
|
||||
## Templates
|
||||
Use templates from the `templates/` directory.</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="callout callout-tip">
|
||||
<div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
|
||||
<div class="callout-content">
|
||||
<h4>Expert Guidance</h4>
|
||||
<p>
|
||||
Use <code>skill: create-agent-skills</code> for comprehensive guidance
|
||||
on creating effective skills, including best practices and validation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="docs-nav-footer">
|
||||
<a href="../index.html" class="nav-prev">
|
||||
<span class="nav-label">Previous</span>
|
||||
<span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Home</span>
|
||||
</a>
|
||||
<a href="agents.html" class="nav-next">
|
||||
<span class="nav-label">Next</span>
|
||||
<span class="nav-title">Agent Reference <i class="fa-solid fa-arrow-right"></i></span>
|
||||
</a>
|
||||
</nav>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Sidebar toggle for mobile
|
||||
document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
|
||||
document.querySelector('.docs-sidebar').classList.toggle('open');
|
||||
});
|
||||
|
||||
// Active link highlighting
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.sidebar-nav a');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let current = '';
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
if (pageYOffset >= sectionTop - 100) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${current}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
406
docs/pages/mcp-servers.html
Normal file
406
docs/pages/mcp-servers.html
Normal file
@@ -0,0 +1,406 @@
|
||||
<!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 two 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 (23)</a></li>
|
||||
<li><a href="commands.html">Commands (13)</a></li>
|
||||
<li><a href="skills.html">Skills (11)</a></li>
|
||||
<li><a href="mcp-servers.html" class="active">MCP Servers (two)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li><a href="changelog.html">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>On This Page</h3>
|
||||
<ul>
|
||||
<li><a href="#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
|
||||
two 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 more than 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 more than 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>
|
||||
597
docs/pages/skills.html
Normal file
597
docs/pages/skills.html
Normal file
@@ -0,0 +1,597 @@
|
||||
<!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 (23)</a></li>
|
||||
<li><a href="commands.html">Commands (13)</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>Resources</h3>
|
||||
<ul>
|
||||
<li><a href="changelog.html">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h3>On This Page</h3>
|
||||
<ul>
|
||||
<li><a href="#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