docs: Add comprehensive documentation site for compounding-engineering plugin
- Create landing page with Evil Martians devtool-template styling - Add dark theme with accent colors and responsive design - Document all 24 agents, 16 commands, 11 skills, and 2 MCP servers - Add Getting Started guide with installation and configuration - Include FAQ section, philosophy explanation, and code examples - Add CSS with mobile-responsive layouts and smooth animations - Include JavaScript for mobile nav, smooth scroll, and copy code Built with LaunchKit template from Evil Martians. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
513
plugins/compounding-engineering/docs/css/docs.css
Normal file
513
plugins/compounding-engineering/docs/css/docs.css
Normal file
@@ -0,0 +1,513 @@
|
||||
/* Documentation-specific styles */
|
||||
|
||||
/* ============================================
|
||||
Documentation Layout
|
||||
============================================ */
|
||||
|
||||
.docs-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.docs-layout {
|
||||
grid-template-columns: 280px 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Sidebar
|
||||
============================================ */
|
||||
|
||||
.docs-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -300px;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background-color: var(--color-background);
|
||||
border-right: 1px solid var(--color-border);
|
||||
overflow-y: auto;
|
||||
transition: left 0.3s ease;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.docs-sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.docs-sidebar {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: var(--space-l);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar-header .nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-s);
|
||||
text-decoration: none;
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-header .logo-icon {
|
||||
color: var(--color-accent);
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
|
||||
.sidebar-header .logo-text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.nav-section h3 {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-tertiary);
|
||||
margin: 0 0 var(--space-m) 0;
|
||||
}
|
||||
|
||||
.nav-section ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-section li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-section a {
|
||||
display: block;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-s);
|
||||
border-radius: var(--radius-s);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-section a:hover {
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.nav-section a.active {
|
||||
color: var(--color-accent);
|
||||
background-color: var(--color-accent-light);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Main Content
|
||||
============================================ */
|
||||
|
||||
.docs-content {
|
||||
padding: var(--space-xl);
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.docs-content {
|
||||
padding: var(--space-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
.docs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-s);
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Article Styles
|
||||
============================================ */
|
||||
|
||||
.docs-article {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.docs-article h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.docs-article h2 {
|
||||
font-size: var(--font-size-l);
|
||||
margin-top: var(--space-xxl);
|
||||
margin-bottom: var(--space-l);
|
||||
padding-bottom: var(--space-s);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
|
||||
.docs-article h2 i {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.docs-article h3 {
|
||||
font-size: var(--font-size-m);
|
||||
margin-top: var(--space-xl);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.docs-article h4 {
|
||||
font-size: var(--font-size-s);
|
||||
margin-top: var(--space-l);
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
.docs-article p {
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.docs-article .lead {
|
||||
font-size: var(--font-size-l);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.docs-article ul,
|
||||
.docs-article ol {
|
||||
margin-bottom: var(--space-l);
|
||||
padding-left: var(--space-xl);
|
||||
}
|
||||
|
||||
.docs-article li {
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Code Blocks in Docs
|
||||
============================================ */
|
||||
|
||||
.docs-article .card-code-block {
|
||||
margin: var(--space-l) 0;
|
||||
}
|
||||
|
||||
.docs-article code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
background-color: var(--color-surface);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-xs);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.docs-article pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: var(--color-code-text);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Tables
|
||||
============================================ */
|
||||
|
||||
.docs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: var(--space-l) 0;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.docs-table th,
|
||||
.docs-table td {
|
||||
padding: var(--space-m);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.docs-table th {
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.docs-table td {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.docs-table code {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Callouts
|
||||
============================================ */
|
||||
|
||||
.callout {
|
||||
display: flex;
|
||||
gap: var(--space-m);
|
||||
padding: var(--space-l);
|
||||
border-radius: var(--radius-m);
|
||||
margin: var(--space-l) 0;
|
||||
}
|
||||
|
||||
.callout-icon {
|
||||
font-size: var(--font-size-l);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.callout-content h4 {
|
||||
margin: 0 0 var(--space-s) 0;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.callout-content p {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.callout-info {
|
||||
background-color: rgba(99, 102, 241, 0.1);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.callout-info .callout-icon {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.callout-info .callout-content h4 {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.callout-tip {
|
||||
background-color: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.callout-tip .callout-icon {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.callout-tip .callout-content h4 {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.callout-warning {
|
||||
background-color: rgba(245, 158, 11, 0.1);
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.callout-warning .callout-icon {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.callout-warning .callout-content h4 {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Badges
|
||||
============================================ */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-s);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.badge-critical {
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.badge-important {
|
||||
background-color: rgba(245, 158, 11, 0.15);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.badge-nice {
|
||||
background-color: rgba(99, 102, 241, 0.15);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Philosophy Grid
|
||||
============================================ */
|
||||
|
||||
.philosophy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: var(--space-l);
|
||||
margin: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.philosophy-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.philosophy-card {
|
||||
padding: var(--space-xl);
|
||||
background-color: var(--color-surface);
|
||||
border-radius: var(--radius-m);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.philosophy-icon {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.philosophy-card h4 {
|
||||
margin: 0 0 var(--space-s) 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.philosophy-card p {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Blockquotes
|
||||
============================================ */
|
||||
|
||||
.highlight-quote {
|
||||
font-size: var(--font-size-l);
|
||||
font-style: italic;
|
||||
color: var(--color-accent);
|
||||
padding: var(--space-xl);
|
||||
margin: var(--space-xl) 0;
|
||||
background: linear-gradient(135deg, var(--color-accent-lighter), transparent);
|
||||
border-left: 4px solid var(--color-accent);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Navigation Footer
|
||||
============================================ */
|
||||
|
||||
.docs-nav-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-l);
|
||||
margin-top: var(--space-xxl);
|
||||
padding-top: var(--space-xl);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.nav-prev,
|
||||
.nav-next {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-l);
|
||||
background-color: var(--color-surface);
|
||||
border-radius: var(--radius-m);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.nav-prev:hover,
|
||||
.nav-next:hover {
|
||||
background-color: var(--color-surface-hover);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
text-align: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-weight: 600;
|
||||
color: var(--color-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
|
||||
.nav-next .nav-title {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Mobile Sidebar Overlay
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.docs-sidebar.open::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
1218
plugins/compounding-engineering/docs/css/style.css
Normal file
1218
plugins/compounding-engineering/docs/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
889
plugins/compounding-engineering/docs/index.html
Normal file
889
plugins/compounding-engineering/docs/index.html
Normal file
@@ -0,0 +1,889 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="theme-dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Compounding Engineering - AI-Powered Development Tools for Claude Code</title>
|
||||
<meta content="AI-powered development tools that get smarter with every use. 24 agents, 16 commands, 11 skills, 2 MCP servers." name="description" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Compounding Engineering" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:title" content="Compounding Engineering - AI Development Tools" />
|
||||
<meta property="og:description" content="AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last." />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Compounding Engineering" />
|
||||
<meta name="twitter:description" content="AI-powered development tools for Claude Code" />
|
||||
|
||||
<!-- 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" />
|
||||
<script src="js/main.js" type="text/javascript" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-gradient"></div>
|
||||
<div class="page-container">
|
||||
<header class="nav-container">
|
||||
<a href="index.html" class="nav-brand">
|
||||
<span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
|
||||
<span class="logo-text">Compounding Engineering</span>
|
||||
</a>
|
||||
<nav role="navigation" class="nav-menu" data-navigation>
|
||||
<a href="#agents" class="nav-link">Agents</a>
|
||||
<a href="#commands" class="nav-link">Commands</a>
|
||||
<a href="#skills" class="nav-link">Skills</a>
|
||||
<a href="#mcp-servers" class="nav-link">MCP Servers</a>
|
||||
<a href="pages/getting-started.html" class="nav-link">Docs</a>
|
||||
<div class="button-group stacked margin-top-l mobile-only">
|
||||
<a href="#install" class="button primary">Install Plugin</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="button-group">
|
||||
<a href="https://github.com/EveryInc/every-marketplace" class="button ghost compact hide-on-mobile">
|
||||
<div class="fa-brands fa-github icon l"></div>
|
||||
</a>
|
||||
<a href="#install" class="button primary compact">Install</a>
|
||||
<button class="button ghost compact nav-hamburger" data-mobile-toggle aria-label="Show menu">
|
||||
<span class="fa-solid fa-bars icon m"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="heading hero centered">
|
||||
<a href="https://github.com/EveryInc/every-marketplace/releases" class="eyebrow">
|
||||
<i class="fa-solid fa-rocket"></i> Version 2.5.0 released!
|
||||
</a>
|
||||
<h1 class="balanced">
|
||||
AI-Powered Development Tools That Get Smarter With Every Use
|
||||
</h1>
|
||||
<p class="paragraph m secondary balanced">
|
||||
Make each unit of engineering work easier than the last. 24 specialized agents, 16 powerful commands,
|
||||
11 intelligent skills, and 2 MCP servers for code review, research, design, and workflow automation.
|
||||
</p>
|
||||
<div class="button-group margin-paragraph centered">
|
||||
<a href="#install" class="button primary">
|
||||
<i class="fa-solid fa-download"></i> Install Plugin
|
||||
</a>
|
||||
<a href="pages/getting-started.html" class="button tertiary">
|
||||
<i class="fa-solid fa-book"></i> Read the Docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="stats-section">
|
||||
<div class="stats-container">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">24</div>
|
||||
<div class="stat-label">Specialized Agents</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">16</div>
|
||||
<div class="stat-label">Slash Commands</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">11</div>
|
||||
<div class="stat-label">Intelligent Skills</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">2</div>
|
||||
<div class="stat-label">MCP Servers</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy">
|
||||
<div class="heading centered">
|
||||
<h2 class="no-top-margin">The Compounding Engineering Philosophy</h2>
|
||||
<p class="paragraph m secondary">
|
||||
Every unit of engineering work should make subsequent units of work easier—not harder.
|
||||
Our tools embody this philosophy by learning from patterns, automating repetitive tasks,
|
||||
and building institutional knowledge.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards-with-icons-container">
|
||||
<div class="card-with-icon">
|
||||
<div class="fa-solid fa-brain icon xl color-accent"></div>
|
||||
<div class="feature-heading">
|
||||
<p class="paragraph m bold">Plan</p>
|
||||
<p class="paragraph s secondary">
|
||||
Understand the change needed and its impact before writing any code.
|
||||
Use research agents to gather context and best practices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-with-icon">
|
||||
<div class="fa-solid fa-robot icon xl color-accent"></div>
|
||||
<div class="feature-heading">
|
||||
<p class="paragraph m bold">Delegate</p>
|
||||
<p class="paragraph s secondary">
|
||||
Use specialized AI agents to help with implementation.
|
||||
Each agent brings deep expertise in its domain.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-with-icon">
|
||||
<div class="fa-solid fa-magnifying-glass icon xl color-accent"></div>
|
||||
<div class="feature-heading">
|
||||
<p class="paragraph m bold">Assess</p>
|
||||
<p class="paragraph s secondary">
|
||||
Run comprehensive reviews with multiple perspectives.
|
||||
Security, performance, architecture—all covered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-with-icon">
|
||||
<div class="fa-solid fa-book icon xl color-accent"></div>
|
||||
<div class="feature-heading">
|
||||
<p class="paragraph m bold">Codify</p>
|
||||
<p class="paragraph s secondary">
|
||||
Document learnings and patterns for future use.
|
||||
Each solved problem becomes reusable knowledge.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Agents Section -->
|
||||
<section id="agents">
|
||||
<div class="heading">
|
||||
<h2 class="no-top-margin">
|
||||
<i class="fa-solid fa-users-gear color-accent"></i> 24 Specialized Agents
|
||||
</h2>
|
||||
<p class="paragraph m secondary">
|
||||
Each agent brings deep expertise in a specific domain. Run them individually or orchestrate
|
||||
multiple agents in parallel for comprehensive analysis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Review Agents -->
|
||||
<div class="agent-category">
|
||||
<h3><i class="fa-solid fa-code-pull-request"></i> Review Agents (10)</h3>
|
||||
<div class="grid columns-2">
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">kieran-rails-reviewer</span>
|
||||
<span class="agent-badge">Rails</span>
|
||||
</div>
|
||||
<p class="agent-description">Super senior Rails developer with impeccable taste. Applies strict conventions for Turbo Streams, namespacing, and the "duplication over complexity" philosophy.</p>
|
||||
<code class="agent-usage">claude agent kieran-rails-reviewer</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">dhh-rails-reviewer</span>
|
||||
<span class="agent-badge">Rails</span>
|
||||
</div>
|
||||
<p class="agent-description">Reviews code from DHH's perspective. Focus on Rails conventions, simplicity, and avoiding over-engineering.</p>
|
||||
<code class="agent-usage">claude agent dhh-rails-reviewer</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">kieran-python-reviewer</span>
|
||||
<span class="agent-badge">Python</span>
|
||||
</div>
|
||||
<p class="agent-description">Python code review with strict conventions. PEP 8 compliance, type hints, and Pythonic patterns.</p>
|
||||
<code class="agent-usage">claude agent kieran-python-reviewer</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">kieran-typescript-reviewer</span>
|
||||
<span class="agent-badge">TypeScript</span>
|
||||
</div>
|
||||
<p class="agent-description">TypeScript review with focus on type safety, modern patterns, and clean architecture.</p>
|
||||
<code class="agent-usage">claude agent kieran-typescript-reviewer</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">security-sentinel</span>
|
||||
<span class="agent-badge critical">Security</span>
|
||||
</div>
|
||||
<p class="agent-description">Security audits and vulnerability assessments. OWASP top 10, injection attacks, authentication flaws.</p>
|
||||
<code class="agent-usage">claude agent security-sentinel</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">performance-oracle</span>
|
||||
<span class="agent-badge">Performance</span>
|
||||
</div>
|
||||
<p class="agent-description">Performance analysis and optimization recommendations. N+1 queries, caching strategies, bottleneck identification.</p>
|
||||
<code class="agent-usage">claude agent performance-oracle</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">architecture-strategist</span>
|
||||
<span class="agent-badge">Architecture</span>
|
||||
</div>
|
||||
<p class="agent-description">Analyze architectural decisions, compliance, and system design patterns.</p>
|
||||
<code class="agent-usage">claude agent architecture-strategist</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">data-integrity-guardian</span>
|
||||
<span class="agent-badge critical">Data</span>
|
||||
</div>
|
||||
<p class="agent-description">Database migrations and data integrity review. Schema changes, foreign keys, data consistency.</p>
|
||||
<code class="agent-usage">claude agent data-integrity-guardian</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">pattern-recognition-specialist</span>
|
||||
<span class="agent-badge">Patterns</span>
|
||||
</div>
|
||||
<p class="agent-description">Analyze code for patterns and anti-patterns. Design patterns, code smells, refactoring opportunities.</p>
|
||||
<code class="agent-usage">claude agent pattern-recognition-specialist</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">code-simplicity-reviewer</span>
|
||||
<span class="agent-badge">Quality</span>
|
||||
</div>
|
||||
<p class="agent-description">Final pass for simplicity and minimalism. Remove unnecessary complexity, improve readability.</p>
|
||||
<code class="agent-usage">claude agent code-simplicity-reviewer</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Research Agents -->
|
||||
<div class="agent-category">
|
||||
<h3><i class="fa-solid fa-microscope"></i> Research Agents (4)</h3>
|
||||
<div class="grid columns-2">
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">framework-docs-researcher</span>
|
||||
<span class="agent-badge">Research</span>
|
||||
</div>
|
||||
<p class="agent-description">Research framework documentation and best practices. Find official guidance and community patterns.</p>
|
||||
<code class="agent-usage">claude agent framework-docs-researcher</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">best-practices-researcher</span>
|
||||
<span class="agent-badge">Research</span>
|
||||
</div>
|
||||
<p class="agent-description">Gather external best practices and examples from the community and industry standards.</p>
|
||||
<code class="agent-usage">claude agent best-practices-researcher</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">git-history-analyzer</span>
|
||||
<span class="agent-badge">Git</span>
|
||||
</div>
|
||||
<p class="agent-description">Analyze git history and code evolution. Understand how code has changed and why.</p>
|
||||
<code class="agent-usage">claude agent git-history-analyzer</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">repo-research-analyst</span>
|
||||
<span class="agent-badge">Research</span>
|
||||
</div>
|
||||
<p class="agent-description">Research repository structure and conventions. Understand project patterns and organization.</p>
|
||||
<code class="agent-usage">claude agent repo-research-analyst</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design Agents -->
|
||||
<div class="agent-category">
|
||||
<h3><i class="fa-solid fa-palette"></i> Design Agents (3)</h3>
|
||||
<div class="grid columns-3">
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">design-iterator</span>
|
||||
<span class="agent-badge">Design</span>
|
||||
</div>
|
||||
<p class="agent-description">Iteratively refine UI through systematic design iterations with screenshots and feedback loops.</p>
|
||||
<code class="agent-usage">claude agent design-iterator</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">figma-design-sync</span>
|
||||
<span class="agent-badge">Figma</span>
|
||||
</div>
|
||||
<p class="agent-description">Synchronize web implementations with Figma designs. Pixel-perfect matching.</p>
|
||||
<code class="agent-usage">claude agent figma-design-sync</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">design-implementation-reviewer</span>
|
||||
<span class="agent-badge">Review</span>
|
||||
</div>
|
||||
<p class="agent-description">Verify UI implementations match Figma designs. Catch visual regressions.</p>
|
||||
<code class="agent-usage">claude agent design-implementation-reviewer</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow Agents -->
|
||||
<div class="agent-category">
|
||||
<h3><i class="fa-solid fa-gears"></i> Workflow Agents (6)</h3>
|
||||
<div class="grid columns-2">
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">bug-reproduction-validator</span>
|
||||
<span class="agent-badge">Bugs</span>
|
||||
</div>
|
||||
<p class="agent-description">Systematically reproduce and validate bug reports. Create minimal reproduction cases.</p>
|
||||
<code class="agent-usage">claude agent bug-reproduction-validator</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">pr-comment-resolver</span>
|
||||
<span class="agent-badge">PR</span>
|
||||
</div>
|
||||
<p class="agent-description">Address PR comments and implement fixes. Batch process review feedback.</p>
|
||||
<code class="agent-usage">claude agent pr-comment-resolver</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">feedback-codifier</span>
|
||||
<span class="agent-badge">Knowledge</span>
|
||||
</div>
|
||||
<p class="agent-description">Codify feedback patterns into reviewer agents. Build institutional knowledge.</p>
|
||||
<code class="agent-usage">claude agent feedback-codifier</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">lint</span>
|
||||
<span class="agent-badge">Quality</span>
|
||||
</div>
|
||||
<p class="agent-description">Run linting and code quality checks on Ruby and ERB files.</p>
|
||||
<code class="agent-usage">claude agent lint</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">spec-flow-analyzer</span>
|
||||
<span class="agent-badge">Testing</span>
|
||||
</div>
|
||||
<p class="agent-description">Analyze user flows and identify gaps in specifications.</p>
|
||||
<code class="agent-usage">claude agent spec-flow-analyzer</code>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">every-style-editor</span>
|
||||
<span class="agent-badge">Content</span>
|
||||
</div>
|
||||
<p class="agent-description">Edit content to conform to Every's style guide.</p>
|
||||
<code class="agent-usage">claude agent every-style-editor</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Docs Agent -->
|
||||
<div class="agent-category">
|
||||
<h3><i class="fa-solid fa-file-lines"></i> Documentation Agent (1)</h3>
|
||||
<div class="grid">
|
||||
<div class="agent-card full-width">
|
||||
<div class="agent-header">
|
||||
<span class="agent-name">ankane-readme-writer</span>
|
||||
<span class="agent-badge">Docs</span>
|
||||
</div>
|
||||
<p class="agent-description">Create READMEs following Ankane-style template for Ruby gems. Clean, concise, comprehensive documentation that gets straight to the point.</p>
|
||||
<code class="agent-usage">claude agent ankane-readme-writer</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Commands Section -->
|
||||
<section id="commands">
|
||||
<div class="heading">
|
||||
<h2 class="no-top-margin">
|
||||
<i class="fa-solid fa-terminal color-accent"></i> 16 Powerful Commands
|
||||
</h2>
|
||||
<p class="paragraph m secondary">
|
||||
Slash commands for common workflows. From code review to bug triage,
|
||||
these commands automate complex multi-step processes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Workflow Commands -->
|
||||
<div class="command-category">
|
||||
<h3><i class="fa-solid fa-arrows-spin"></i> Workflow Commands</h3>
|
||||
<div class="grid columns-2">
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/workflows:plan</code>
|
||||
</div>
|
||||
<p class="command-description">Create comprehensive implementation plans with research agents and stakeholder analysis.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/workflows:review</code>
|
||||
</div>
|
||||
<p class="command-description">Run exhaustive code reviews using 12+ parallel agents, ultra-thinking, and worktrees.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/workflows:work</code>
|
||||
</div>
|
||||
<p class="command-description">Execute work items systematically with progress tracking and validation.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/workflows:codify</code>
|
||||
</div>
|
||||
<p class="command-description">Document solved problems for the knowledge base. Turn learnings into reusable patterns.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Utility Commands -->
|
||||
<div class="command-category">
|
||||
<h3><i class="fa-solid fa-wrench"></i> Utility Commands</h3>
|
||||
<div class="grid columns-3">
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/changelog</code>
|
||||
</div>
|
||||
<p class="command-description">Create engaging changelogs for recent merges.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/create-agent-skill</code>
|
||||
</div>
|
||||
<p class="command-description">Create or edit Claude Code skills with expert guidance.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/generate_command</code>
|
||||
</div>
|
||||
<p class="command-description">Generate new slash commands from templates.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/heal-skill</code>
|
||||
</div>
|
||||
<p class="command-description">Fix skill documentation issues automatically.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/plan_review</code>
|
||||
</div>
|
||||
<p class="command-description">Multi-agent plan review in parallel.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/prime</code>
|
||||
</div>
|
||||
<p class="command-description">Prime/setup command for project initialization.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/report-bug</code>
|
||||
</div>
|
||||
<p class="command-description">Report bugs in the plugin with structured templates.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/reproduce-bug</code>
|
||||
</div>
|
||||
<p class="command-description">Reproduce bugs using logs and console output.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/triage</code>
|
||||
</div>
|
||||
<p class="command-description">Triage and prioritize issues interactively.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/resolve_parallel</code>
|
||||
</div>
|
||||
<p class="command-description">Resolve TODO comments in parallel.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/resolve_pr_parallel</code>
|
||||
</div>
|
||||
<p class="command-description">Resolve PR comments in parallel.</p>
|
||||
</div>
|
||||
<div class="command-card">
|
||||
<div class="command-header">
|
||||
<code class="command-name">/resolve_todo_parallel</code>
|
||||
</div>
|
||||
<p class="command-description">Resolve file-based todos in parallel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section id="skills">
|
||||
<div class="heading">
|
||||
<h2 class="no-top-margin">
|
||||
<i class="fa-solid fa-wand-magic-sparkles color-accent"></i> 11 Intelligent Skills
|
||||
</h2>
|
||||
<p class="paragraph m secondary">
|
||||
Skills provide deep domain expertise that Claude Code can invoke on-demand.
|
||||
From Ruby gem patterns to image generation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Development Tools -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fa-solid fa-code"></i> Development Tools</h3>
|
||||
<div class="grid columns-2">
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">andrew-kane-gem-writer</span>
|
||||
<span class="skill-badge">Ruby</span>
|
||||
</div>
|
||||
<p class="skill-description">Write Ruby gems following Andrew Kane's patterns. Clean APIs, smart defaults, comprehensive testing.</p>
|
||||
<code class="skill-usage">skill: andrew-kane-gem-writer</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">dhh-ruby-style</span>
|
||||
<span class="skill-badge">Rails</span>
|
||||
</div>
|
||||
<p class="skill-description">Write Ruby/Rails code in DHH's 37signals style. Convention over configuration, beautiful code.</p>
|
||||
<code class="skill-usage">skill: dhh-ruby-style</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">dspy-ruby</span>
|
||||
<span class="skill-badge">AI</span>
|
||||
</div>
|
||||
<p class="skill-description">Build type-safe LLM applications with DSPy.rb. Structured prompting, optimization, providers.</p>
|
||||
<code class="skill-usage">skill: dspy-ruby</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">frontend-design</span>
|
||||
<span class="skill-badge">Design</span>
|
||||
</div>
|
||||
<p class="skill-description">Create production-grade frontend interfaces with modern CSS, responsive design, accessibility.</p>
|
||||
<code class="skill-usage">skill: frontend-design</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">create-agent-skills</span>
|
||||
<span class="skill-badge">Meta</span>
|
||||
</div>
|
||||
<p class="skill-description">Expert guidance for creating Claude Code skills. Templates, best practices, validation.</p>
|
||||
<code class="skill-usage">skill: create-agent-skills</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">skill-creator</span>
|
||||
<span class="skill-badge">Meta</span>
|
||||
</div>
|
||||
<p class="skill-description">Guide for creating effective Claude Code skills with structured workflows.</p>
|
||||
<code class="skill-usage">skill: skill-creator</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">codify-docs</span>
|
||||
<span class="skill-badge">Docs</span>
|
||||
</div>
|
||||
<p class="skill-description">Capture solved problems as categorized documentation with YAML schema.</p>
|
||||
<code class="skill-usage">skill: codify-docs</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content & Workflow -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fa-solid fa-pen-fancy"></i> Content & Workflow</h3>
|
||||
<div class="grid columns-3">
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">every-style-editor</span>
|
||||
<span class="skill-badge">Content</span>
|
||||
</div>
|
||||
<p class="skill-description">Review copy for Every's style guide compliance.</p>
|
||||
<code class="skill-usage">skill: every-style-editor</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">file-todos</span>
|
||||
<span class="skill-badge">Workflow</span>
|
||||
</div>
|
||||
<p class="skill-description">File-based todo tracking system with priorities and status.</p>
|
||||
<code class="skill-usage">skill: file-todos</code>
|
||||
</div>
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">git-worktree</span>
|
||||
<span class="skill-badge">Git</span>
|
||||
</div>
|
||||
<p class="skill-description">Manage Git worktrees for parallel development on multiple branches.</p>
|
||||
<code class="skill-usage">skill: git-worktree</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Generation -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fa-solid fa-image"></i> Image Generation</h3>
|
||||
<div class="grid">
|
||||
<div class="skill-card featured full-width">
|
||||
<div class="skill-header">
|
||||
<span class="skill-name">gemini-imagegen</span>
|
||||
<span class="skill-badge highlight">AI Images</span>
|
||||
</div>
|
||||
<p class="skill-description">
|
||||
Generate and edit images using Google's Gemini API. Text-to-image, image editing,
|
||||
multi-turn refinement, and composition from up to 14 reference images.
|
||||
</p>
|
||||
<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 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>
|
||||
<code class="skill-usage">skill: gemini-imagegen</code>
|
||||
<p class="skill-note">Requires: GEMINI_API_KEY environment variable</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MCP Servers Section -->
|
||||
<section id="mcp-servers">
|
||||
<div class="heading">
|
||||
<h2 class="no-top-margin">
|
||||
<i class="fa-solid fa-server color-accent"></i> 2 MCP Servers
|
||||
</h2>
|
||||
<p class="paragraph m secondary">
|
||||
Model Context Protocol servers extend Claude Code's capabilities with
|
||||
browser automation and framework documentation lookup.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid columns-2">
|
||||
<div class="mcp-card">
|
||||
<div class="mcp-header">
|
||||
<i class="fa-brands fa-chrome mcp-icon"></i>
|
||||
<span class="mcp-name">Playwright</span>
|
||||
</div>
|
||||
<p class="mcp-description">Browser automation for testing, screenshots, and web interactions.</p>
|
||||
<div class="mcp-tools">
|
||||
<h4>Tools Provided:</h4>
|
||||
<ul>
|
||||
<li><code>browser_navigate</code> - Navigate to URLs</li>
|
||||
<li><code>browser_take_screenshot</code> - Take screenshots</li>
|
||||
<li><code>browser_click</code> - Click elements</li>
|
||||
<li><code>browser_fill_form</code> - Fill form fields</li>
|
||||
<li><code>browser_snapshot</code> - Get accessibility snapshot</li>
|
||||
<li><code>browser_evaluate</code> - Execute JavaScript</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mcp-card">
|
||||
<div class="mcp-header">
|
||||
<i class="fa-solid fa-book-open mcp-icon"></i>
|
||||
<span class="mcp-name">Context7</span>
|
||||
</div>
|
||||
<p class="mcp-description">Framework documentation lookup for 100+ frameworks.</p>
|
||||
<div class="mcp-tools">
|
||||
<h4>Tools Provided:</h4>
|
||||
<ul>
|
||||
<li><code>resolve-library-id</code> - Find library ID</li>
|
||||
<li><code>get-library-docs</code> - Get documentation</li>
|
||||
</ul>
|
||||
<p class="mcp-note">Supports: Rails, React, Next.js, Vue, Django, Laravel, and 100+ more</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Installation Section -->
|
||||
<section id="install" class="install-section">
|
||||
<div class="heading centered">
|
||||
<h2 class="no-top-margin">Get Started in Seconds</h2>
|
||||
<p class="paragraph m secondary">
|
||||
Install the plugin and start using AI-powered development tools immediately.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="install-steps">
|
||||
<div class="install-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h3>Add the Marketplace</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code>claude /plugin marketplace add https://github.com/EveryInc/every-marketplace</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h3>Install the Plugin</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code>claude /plugin install compounding-engineering</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h3>Start Using</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Run a code review
|
||||
/workflows:review PR#123
|
||||
|
||||
# Use an agent
|
||||
claude agent kieran-rails-reviewer
|
||||
|
||||
# Invoke a skill
|
||||
skill: gemini-imagegen</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq">
|
||||
<div class="heading centered">
|
||||
<h2 class="no-top-margin">Frequently Asked Questions</h2>
|
||||
</div>
|
||||
<div class="accordion-container">
|
||||
<details class="accordion-item" name="faq">
|
||||
<summary class="accordion-toggle">
|
||||
<p class="paragraph m bold">What is Compounding Engineering?</p>
|
||||
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<p>
|
||||
Compounding Engineering is a philosophy that every unit of engineering work should make subsequent
|
||||
units easier—not harder. This plugin embodies that philosophy with tools that learn from patterns,
|
||||
automate repetitive tasks, and build institutional knowledge.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="accordion-item" name="faq">
|
||||
<summary class="accordion-toggle">
|
||||
<p class="paragraph m bold">How do agents differ from skills?</p>
|
||||
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<p>
|
||||
<strong>Agents</strong> are specialized personas that can be invoked to perform specific tasks
|
||||
(e.g., code review, research). They're called with <code>claude agent [name]</code>.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Skills</strong> provide domain expertise that Claude Code can use on-demand. They include
|
||||
reference materials, templates, and workflows. They're invoked with <code>skill: [name]</code>.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="accordion-item" name="faq">
|
||||
<summary class="accordion-toggle">
|
||||
<p class="paragraph m bold">Why aren't MCP servers loading automatically?</p>
|
||||
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<p>
|
||||
This is a known issue. As a workaround, manually add the MCP servers to your
|
||||
<code>.claude/settings.json</code> file. See the README for the exact configuration.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="accordion-item" name="faq">
|
||||
<summary class="accordion-toggle">
|
||||
<p class="paragraph m bold">Can I use this with languages other than Ruby/Rails?</p>
|
||||
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<p>
|
||||
Yes! While many agents are specialized for Rails, we also have Python and TypeScript reviewers.
|
||||
The workflow commands, research agents, and skills like gemini-imagegen work with any language.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="accordion-item" name="faq">
|
||||
<summary class="accordion-toggle">
|
||||
<p class="paragraph m bold">How do I create my own agents or skills?</p>
|
||||
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<p>
|
||||
Use the <code>/create-agent-skill</code> command or the <code>create-agent-skills</code> skill
|
||||
for expert guidance. The skill includes templates, best practices, and validation workflows.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="promo-cta">
|
||||
<div class="heading centered">
|
||||
<h2>Start Building Smarter Today</h2>
|
||||
<p class="paragraph m">
|
||||
Join developers who are making each engineering task easier than the last.
|
||||
</p>
|
||||
<div class="button-group margin-paragraph centered">
|
||||
<a href="#install" class="button primary">
|
||||
<i class="fa-solid fa-download"></i> Install Plugin
|
||||
</a>
|
||||
<a href="https://github.com/EveryInc/every-marketplace" class="button tertiary">
|
||||
<i class="fa-brands fa-github"></i> View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-menu">
|
||||
<div>
|
||||
<p class="paragraph s">
|
||||
© 2025 Every, Inc.<br />
|
||||
Built with <a href="https://launchkit.evilmartians.io" target="_blank">LaunchKit</a> template by
|
||||
<a href="https://evilmartians.com" target="_blank">Evil Martians</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="link-list">
|
||||
<a href="#agents" class="ui s">Agents</a>
|
||||
<a href="#commands" class="ui s">Commands</a>
|
||||
<a href="#skills" class="ui s">Skills</a>
|
||||
<a href="pages/getting-started.html" class="ui s">Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="link-list">
|
||||
<a href="https://github.com/EveryInc/every-marketplace" class="icon-link ui s" target="_blank">
|
||||
<div class="fa-brands fa-github icon m color-accent"></div>
|
||||
<div class="pseudo-link">GitHub</div>
|
||||
</a>
|
||||
<a href="https://every.to" class="icon-link ui s" target="_blank">
|
||||
<div class="fa-solid fa-globe icon m color-accent"></div>
|
||||
<div class="pseudo-link">Every.to</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="link-list-horizontal">
|
||||
<a href="https://every.to/legal/privacy" class="ui s tertiary">Privacy Policy</a>
|
||||
<a href="https://every.to/legal/terms" class="ui s tertiary">Terms of Service</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
225
plugins/compounding-engineering/docs/js/main.js
Normal file
225
plugins/compounding-engineering/docs/js/main.js
Normal file
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* Compounding Engineering Documentation
|
||||
* Main JavaScript functionality
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initMobileNav();
|
||||
initSmoothScroll();
|
||||
initCopyCode();
|
||||
initThemeToggle();
|
||||
});
|
||||
|
||||
/**
|
||||
* Mobile Navigation Toggle
|
||||
*/
|
||||
function initMobileNav() {
|
||||
const mobileToggle = document.querySelector('[data-mobile-toggle]');
|
||||
const navigation = document.querySelector('[data-navigation]');
|
||||
|
||||
if (!mobileToggle || !navigation) return;
|
||||
|
||||
mobileToggle.addEventListener('click', () => {
|
||||
navigation.classList.toggle('open');
|
||||
mobileToggle.classList.toggle('active');
|
||||
|
||||
// Update aria-expanded
|
||||
const isOpen = navigation.classList.contains('open');
|
||||
mobileToggle.setAttribute('aria-expanded', isOpen);
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!mobileToggle.contains(event.target) && !navigation.contains(event.target)) {
|
||||
navigation.classList.remove('open');
|
||||
mobileToggle.classList.remove('active');
|
||||
mobileToggle.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking a nav link
|
||||
navigation.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navigation.classList.remove('open');
|
||||
mobileToggle.classList.remove('active');
|
||||
mobileToggle.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Smooth Scroll for Anchor Links
|
||||
*/
|
||||
function initSmoothScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (!targetElement) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const navHeight = document.querySelector('.nav-container')?.offsetHeight || 0;
|
||||
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 24;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Update URL without jumping
|
||||
history.pushState(null, null, targetId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy Code Functionality
|
||||
*/
|
||||
function initCopyCode() {
|
||||
document.querySelectorAll('.card-code-block').forEach(block => {
|
||||
// Create copy button
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.className = 'copy-btn';
|
||||
copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
|
||||
copyBtn.setAttribute('aria-label', 'Copy code');
|
||||
copyBtn.setAttribute('title', 'Copy to clipboard');
|
||||
|
||||
// Style the button
|
||||
copyBtn.style.cssText = `
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 6px 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
`;
|
||||
|
||||
// Make parent relative for positioning
|
||||
block.style.position = 'relative';
|
||||
block.appendChild(copyBtn);
|
||||
|
||||
// Show/hide on hover
|
||||
block.addEventListener('mouseenter', () => {
|
||||
copyBtn.style.opacity = '1';
|
||||
});
|
||||
|
||||
block.addEventListener('mouseleave', () => {
|
||||
copyBtn.style.opacity = '0';
|
||||
});
|
||||
|
||||
// Copy functionality
|
||||
copyBtn.addEventListener('click', async () => {
|
||||
const code = block.querySelector('code');
|
||||
if (!code) return;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(code.textContent);
|
||||
copyBtn.innerHTML = '<i class="fa-solid fa-check"></i>';
|
||||
copyBtn.style.color = '#34d399';
|
||||
|
||||
setTimeout(() => {
|
||||
copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
|
||||
copyBtn.style.color = '#94a3b8';
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy:', err);
|
||||
copyBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
|
||||
copyBtn.style.color = '#f87171';
|
||||
|
||||
setTimeout(() => {
|
||||
copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
|
||||
copyBtn.style.color = '#94a3b8';
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Theme Toggle (Light/Dark)
|
||||
*/
|
||||
function initThemeToggle() {
|
||||
// Check for saved theme preference or default to dark
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.documentElement.className = `theme-${savedTheme}`;
|
||||
|
||||
// Create theme toggle button if it doesn't exist
|
||||
const existingToggle = document.querySelector('[data-theme-toggle]');
|
||||
if (existingToggle) {
|
||||
existingToggle.addEventListener('click', toggleTheme);
|
||||
updateThemeToggleIcon(existingToggle, savedTheme);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
const currentTheme = html.classList.contains('theme-dark') ? 'dark' : 'light';
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
html.className = `theme-${newTheme}`;
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
const toggle = document.querySelector('[data-theme-toggle]');
|
||||
if (toggle) {
|
||||
updateThemeToggleIcon(toggle, newTheme);
|
||||
}
|
||||
}
|
||||
|
||||
function updateThemeToggleIcon(toggle, theme) {
|
||||
const icon = toggle.querySelector('i');
|
||||
if (icon) {
|
||||
icon.className = theme === 'dark' ? 'fa-solid fa-sun' : 'fa-solid fa-moon';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Intersection Observer for Animation on Scroll
|
||||
*/
|
||||
function initScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.agent-card, .command-card, .skill-card, .mcp-card, .stat-card').forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Add visible class styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.agent-card.visible,
|
||||
.command-card.visible,
|
||||
.skill-card.visible,
|
||||
.mcp-card.visible,
|
||||
.stat-card.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize scroll animations after a short delay
|
||||
setTimeout(initScrollAnimations, 100);
|
||||
597
plugins/compounding-engineering/docs/pages/getting-started.html
Normal file
597
plugins/compounding-engineering/docs/pages/getting-started.html
Normal file
@@ -0,0 +1,597 @@
|
||||
<!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>
|
||||
</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 5 minutes, you'll have access to 24 specialized agents, 16 commands,
|
||||
11 skills, and 2 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>4</td>
|
||||
<td>Best practices, documentation, git history</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Design</td>
|
||||
<td>3</td>
|
||||
<td>UI iteration, Figma sync, design review</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Workflow</td>
|
||||
<td>6</td>
|
||||
<td>Bug reproduction, PR resolution, linting</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Docs</td>
|
||||
<td>1</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+ 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>
|
||||
Reference in New Issue
Block a user