From 91bd7e812ffae18c664d56f0da237d5ec95ad8f9 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Nov 2025 15:46:16 +0000 Subject: [PATCH 01/12] docs: Add comprehensive documentation site for compounding-engineering plugin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../compounding-engineering/docs/css/docs.css | 513 +++++++ .../docs/css/style.css | 1218 +++++++++++++++++ .../compounding-engineering/docs/index.html | 889 ++++++++++++ .../compounding-engineering/docs/js/main.js | 225 +++ .../docs/pages/getting-started.html | 597 ++++++++ 5 files changed, 3442 insertions(+) create mode 100644 plugins/compounding-engineering/docs/css/docs.css create mode 100644 plugins/compounding-engineering/docs/css/style.css create mode 100644 plugins/compounding-engineering/docs/index.html create mode 100644 plugins/compounding-engineering/docs/js/main.js create mode 100644 plugins/compounding-engineering/docs/pages/getting-started.html diff --git a/plugins/compounding-engineering/docs/css/docs.css b/plugins/compounding-engineering/docs/css/docs.css new file mode 100644 index 0000000..c4a9df8 --- /dev/null +++ b/plugins/compounding-engineering/docs/css/docs.css @@ -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; + } +} diff --git a/plugins/compounding-engineering/docs/css/style.css b/plugins/compounding-engineering/docs/css/style.css new file mode 100644 index 0000000..677b933 --- /dev/null +++ b/plugins/compounding-engineering/docs/css/style.css @@ -0,0 +1,1218 @@ +/* Compounding Engineering Documentation Styles */ +/* Based on LaunchKit template by Evil Martians */ + +/* ============================================ + CSS Variables & Theme Configuration + ============================================ */ + +:root { + /* Theme configuration */ + --theme-hue: 250; + --theme-saturation: 0.3; + --theme-contrast: 0.85; + + /* Fonts */ + --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; + --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace; + + /* Font sizes */ + --font-size-xs: 12px; + --font-size-s: 14px; + --font-size-m: 16px; + --font-size-l: 20px; + --font-size-xl: 32px; + --font-size-xxl: 48px; + + /* Line heights */ + --line-height-paragraph-s: 20px; + --line-height-paragraph-m: 24px; + --line-height-paragraph-l: 28px; + --line-height-h1: 56px; + --line-height-h2: 40px; + --line-height-h3: 28px; + --line-height-ui-s: 16px; + --line-height-ui-m: 22px; + + /* Spacing */ + --space-xs: 4px; + --space-s: 8px; + --space-m: 12px; + --space-l: 16px; + --space-xl: 24px; + --space-xxl: 48px; + --space-section: 80px; + --space-card: 20px; + + /* Border radii */ + --radius-xs: 4px; + --radius-s: 8px; + --radius-m: 12px; + --radius-l: 16px; + --radius-xl: 24px; + + /* UI */ + --header-font-weight: 600; + --ui-button-font-weight: 500; +} + +/* Light Theme */ +.theme-light { + --color-background: #ffffff; + --color-background-blur: rgba(255, 255, 255, 0.9); + --color-surface: rgba(0, 0, 0, 0.03); + --color-surface-hover: rgba(0, 0, 0, 0.06); + --color-text-primary: #1a1a2e; + --color-text-secondary: #64748b; + --color-text-tertiary: #94a3b8; + --color-accent: #6366f1; + --color-accent-hover: #4f46e5; + --color-accent-light: rgba(99, 102, 241, 0.1); + --color-accent-lighter: rgba(99, 102, 241, 0.05); + --color-on-accent: #ffffff; + --color-border: rgba(0, 0, 0, 0.08); + --color-border-strong: rgba(0, 0, 0, 0.15); + --color-gradient-start: rgba(99, 102, 241, 0.15); + --color-gradient-end: rgba(99, 102, 241, 0); + --color-promo-start: #a855f7; + --color-promo-end: #6366f1; + --color-success: #10b981; + --color-warning: #f59e0b; + --color-error: #ef4444; + --color-code-bg: #1e1e2e; + --color-code-text: #cdd6f4; +} + +/* Dark Theme */ +.theme-dark { + color-scheme: dark; + --color-background: #0f0f1a; + --color-background-blur: rgba(15, 15, 26, 0.9); + --color-surface: rgba(255, 255, 255, 0.04); + --color-surface-hover: rgba(255, 255, 255, 0.08); + --color-text-primary: #f1f5f9; + --color-text-secondary: #94a3b8; + --color-text-tertiary: #64748b; + --color-accent: #818cf8; + --color-accent-hover: #a5b4fc; + --color-accent-light: rgba(129, 140, 248, 0.15); + --color-accent-lighter: rgba(129, 140, 248, 0.08); + --color-on-accent: #0f0f1a; + --color-border: rgba(255, 255, 255, 0.08); + --color-border-strong: rgba(255, 255, 255, 0.15); + --color-gradient-start: rgba(129, 140, 248, 0.2); + --color-gradient-end: rgba(129, 140, 248, 0); + --color-promo-start: #c084fc; + --color-promo-end: #818cf8; + --color-success: #34d399; + --color-warning: #fbbf24; + --color-error: #f87171; + --color-code-bg: #1e1e2e; + --color-code-text: #cdd6f4; +} + +/* ============================================ + Base Styles + ============================================ */ + +*, *::before, *::after { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + background-color: var(--color-background); + font-family: var(--font-text); + color: var(--color-text-primary); + font-size: var(--font-size-m); + line-height: var(--line-height-paragraph-m); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ============================================ + Typography + ============================================ */ + +h1, h2, h3, h4, h5, h6 { + font-weight: var(--header-font-weight); + margin: var(--space-m) 0; + letter-spacing: -0.02em; +} + +h1 { + font-size: var(--font-size-xxl); + line-height: var(--line-height-h1); + letter-spacing: -0.03em; +} + +h2 { + font-size: var(--font-size-xl); + line-height: var(--line-height-h2); +} + +h3 { + font-size: var(--font-size-l); + line-height: var(--line-height-h3); +} + +p { + margin: var(--space-m) 0; +} + +a { + color: var(--color-accent); + text-decoration: none; + transition: color 0.2s ease; +} + +a:hover { + color: var(--color-accent-hover); +} + +ul, ol { + margin: var(--space-l) 0; + padding-left: 24px; +} + +li { + margin: var(--space-s) 0; +} + +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); +} + +img { + max-width: 100%; + vertical-align: middle; +} + +/* Text utilities */ +.paragraph { + margin: var(--space-m) 0; +} +.paragraph.s { font-size: var(--font-size-s); line-height: var(--line-height-paragraph-s); } +.paragraph.m { font-size: var(--font-size-m); line-height: var(--line-height-paragraph-m); } +.paragraph.l { font-size: var(--font-size-l); line-height: var(--line-height-paragraph-l); } +.paragraph.bold { font-weight: 600; } + +.secondary { color: var(--color-text-secondary); } +.tertiary { color: var(--color-text-tertiary); } +.color-accent { color: var(--color-accent); } + +.no-top-margin { margin-top: 0; } +.balanced { text-wrap: balance; } + +/* ============================================ + Layout + ============================================ */ + +.page-container { + max-width: 1200px; + min-height: 100vh; + margin: 0 auto; + padding: 0 var(--space-xl); + display: flex; + flex-direction: column; +} + +section { + padding: var(--space-section) 0; +} + +.background-gradient { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 100vh; + background: linear-gradient(180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 50%); + z-index: -10; + pointer-events: none; +} + +/* ============================================ + Navigation + ============================================ */ + +.nav-container { + position: sticky; + top: var(--space-l); + margin-top: var(--space-l); + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--color-background-blur); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--color-border); + border-radius: var(--radius-l); + padding: var(--space-m) var(--space-l); + z-index: 1000; +} + +.nav-brand { + display: flex; + align-items: center; + gap: var(--space-s); + text-decoration: none; + color: var(--color-text-primary); + font-weight: 600; + font-size: var(--font-size-m); +} + +.logo-icon { + color: var(--color-accent); + font-size: var(--font-size-l); +} + +.logo-text { + display: none; +} + +@media (min-width: 768px) { + .logo-text { + display: inline; + } +} + +.nav-menu { + display: none; + gap: var(--space-xs); +} + +@media (min-width: 1024px) { + .nav-menu { + display: flex; + } +} + +.nav-link { + color: var(--color-text-secondary); + font-size: var(--font-size-s); + font-weight: var(--ui-button-font-weight); + padding: var(--space-s) var(--space-m); + border-radius: var(--radius-s); + text-decoration: none; + transition: all 0.2s ease; +} + +.nav-link:hover { + color: var(--color-text-primary); + background-color: var(--color-surface); +} + +.nav-hamburger { + display: flex; +} + +@media (min-width: 1024px) { + .nav-hamburger { + display: none; + } +} + +/* Mobile nav */ +.nav-menu.open { + display: flex; + flex-direction: column; + position: absolute; + top: calc(100% + var(--space-s)); + left: 0; + right: 0; + background-color: var(--color-background); + border: 1px solid var(--color-border); + border-radius: var(--radius-l); + padding: var(--space-l); +} + +/* ============================================ + Buttons + ============================================ */ + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-s); + padding: var(--space-m) var(--space-xl); + font-size: var(--font-size-m); + font-weight: var(--ui-button-font-weight); + font-family: inherit; + text-decoration: none; + border: none; + border-radius: var(--radius-m); + cursor: pointer; + transition: all 0.2s ease; +} + +.button.compact { + padding: var(--space-s) var(--space-m); + font-size: var(--font-size-s); + border-radius: var(--radius-s); +} + +.button.primary { + background-color: var(--color-accent); + color: var(--color-on-accent); +} + +.button.primary:hover { + background-color: var(--color-accent-hover); + transform: translateY(-1px); +} + +.button.secondary { + background-color: var(--color-accent-light); + color: var(--color-accent); +} + +.button.secondary:hover { + background-color: var(--color-accent-lighter); +} + +.button.tertiary { + background-color: transparent; + color: var(--color-text-secondary); + border: 1px solid var(--color-border-strong); +} + +.button.tertiary:hover { + background-color: var(--color-surface); + color: var(--color-text-primary); +} + +.button.ghost { + background-color: transparent; + color: var(--color-text-secondary); +} + +.button.ghost:hover { + background-color: var(--color-surface); + color: var(--color-text-primary); +} + +.button-group { + display: flex; + flex-wrap: wrap; + gap: var(--space-m); + align-items: center; +} + +.button-group.centered { + justify-content: center; +} + +.button-group.stacked { + flex-direction: column; +} + +.button-group.margin-paragraph { + margin: var(--space-l) 0; +} + +/* ============================================ + Headings & Sections + ============================================ */ + +.heading { + max-width: 720px; + margin-bottom: var(--space-xl); +} + +.heading.centered { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.heading.hero { + padding: var(--space-xxl) 0; +} + +.eyebrow { + display: inline-flex; + align-items: center; + gap: var(--space-s); + padding: var(--space-xs) var(--space-m); + background-color: var(--color-accent-light); + color: var(--color-accent); + font-size: var(--font-size-s); + font-weight: 500; + border-radius: var(--radius-xl); + margin-bottom: var(--space-l); + text-decoration: none; +} + +.eyebrow:hover { + background-color: var(--color-accent-lighter); +} + +/* ============================================ + Stats Section + ============================================ */ + +.stats-section { + padding: var(--space-xl) 0; +} + +.stats-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-l); +} + +@media (min-width: 768px) { + .stats-container { + grid-template-columns: repeat(4, 1fr); + } +} + +.stat-card { + text-align: center; + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); +} + +.stat-number { + font-size: var(--font-size-xxl); + font-weight: 700; + color: var(--color-accent); + line-height: 1; + margin-bottom: var(--space-s); +} + +.stat-label { + font-size: var(--font-size-s); + color: var(--color-text-secondary); + font-weight: 500; +} + +/* ============================================ + Cards with Icons + ============================================ */ + +.cards-with-icons-container { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: var(--space-xl); + margin-top: var(--space-xl); +} + +@media (min-width: 640px) { + .cards-with-icons-container { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .cards-with-icons-container { + grid-template-columns: repeat(4, 1fr); + } +} + +.card-with-icon { + display: flex; + flex-direction: column; + gap: var(--space-m); + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); + transition: all 0.2s ease; +} + +.card-with-icon:hover { + border-color: var(--color-accent); + transform: translateY(-2px); +} + +.card-with-icon .icon { + font-size: var(--font-size-xl); + color: var(--color-accent); +} + +.feature-heading { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.feature-heading p { + margin: 0; +} + +/* ============================================ + Grid System + ============================================ */ + +.grid { + display: grid; + gap: var(--space-l); + margin: var(--space-l) 0; +} + +.grid.columns-2 { + grid-template-columns: repeat(1, 1fr); +} + +.grid.columns-3 { + grid-template-columns: repeat(1, 1fr); +} + +@media (min-width: 768px) { + .grid.columns-2 { + grid-template-columns: repeat(2, 1fr); + } + .grid.columns-3 { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .grid.columns-3 { + grid-template-columns: repeat(3, 1fr); + } +} + +.full-width { + grid-column: 1 / -1; +} + +/* ============================================ + Agent Cards + ============================================ */ + +.agent-category { + margin-bottom: var(--space-xxl); +} + +.agent-category h3 { + display: flex; + align-items: center; + gap: var(--space-s); + margin-bottom: var(--space-l); + color: var(--color-text-primary); +} + +.agent-category h3 i { + color: var(--color-accent); +} + +.agent-card { + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); + transition: all 0.2s ease; +} + +.agent-card:hover { + border-color: var(--color-accent); +} + +.agent-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + margin-bottom: var(--space-m); +} + +.agent-name { + font-family: var(--font-mono); + font-size: var(--font-size-s); + font-weight: 600; + color: var(--color-text-primary); +} + +.agent-badge { + padding: var(--space-xs) var(--space-s); + font-size: var(--font-size-xs); + font-weight: 600; + background-color: var(--color-accent-light); + color: var(--color-accent); + border-radius: var(--radius-s); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.agent-badge.critical { + background-color: rgba(239, 68, 68, 0.15); + color: var(--color-error); +} + +.agent-description { + font-size: var(--font-size-s); + color: var(--color-text-secondary); + margin: 0 0 var(--space-m) 0; + line-height: 1.5; +} + +.agent-usage { + display: block; + font-family: var(--font-mono); + font-size: var(--font-size-xs); + color: var(--color-text-tertiary); + background-color: var(--color-code-bg); + padding: var(--space-s) var(--space-m); + border-radius: var(--radius-s); +} + +/* ============================================ + Command Cards + ============================================ */ + +.command-category { + margin-bottom: var(--space-xxl); +} + +.command-category h3 { + display: flex; + align-items: center; + gap: var(--space-s); + margin-bottom: var(--space-l); + color: var(--color-text-primary); +} + +.command-category h3 i { + color: var(--color-accent); +} + +.command-card { + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); + transition: all 0.2s ease; +} + +.command-card:hover { + border-color: var(--color-accent); +} + +.command-header { + margin-bottom: var(--space-s); +} + +.command-name { + font-family: var(--font-mono); + font-size: var(--font-size-m); + font-weight: 600; + color: var(--color-accent); + background: none; + padding: 0; +} + +.command-description { + font-size: var(--font-size-s); + color: var(--color-text-secondary); + margin: 0; + line-height: 1.5; +} + +/* ============================================ + Skill Cards + ============================================ */ + +.skill-category { + margin-bottom: var(--space-xxl); +} + +.skill-category h3 { + display: flex; + align-items: center; + gap: var(--space-s); + margin-bottom: var(--space-l); + color: var(--color-text-primary); +} + +.skill-category h3 i { + color: var(--color-accent); +} + +.skill-card { + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); + transition: all 0.2s ease; +} + +.skill-card:hover { + border-color: var(--color-accent); +} + +.skill-card.featured { + background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface)); + border-color: var(--color-accent); +} + +.skill-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + margin-bottom: var(--space-m); +} + +.skill-name { + font-family: var(--font-mono); + font-size: var(--font-size-s); + font-weight: 600; + color: var(--color-text-primary); +} + +.skill-badge { + padding: var(--space-xs) var(--space-s); + font-size: var(--font-size-xs); + font-weight: 600; + background-color: var(--color-accent-light); + color: var(--color-accent); + border-radius: var(--radius-s); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.skill-badge.highlight { + background-color: var(--color-accent); + color: var(--color-on-accent); +} + +.skill-description { + font-size: var(--font-size-s); + color: var(--color-text-secondary); + margin: 0 0 var(--space-m) 0; + line-height: 1.5; +} + +.skill-features { + display: flex; + flex-wrap: wrap; + gap: var(--space-s); + margin-bottom: var(--space-m); +} + +.feature-item { + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: var(--font-size-xs); + color: var(--color-success); + background-color: rgba(16, 185, 129, 0.1); + padding: var(--space-xs) var(--space-s); + border-radius: var(--radius-s); +} + +.skill-usage { + display: block; + font-family: var(--font-mono); + font-size: var(--font-size-xs); + color: var(--color-text-tertiary); + background-color: var(--color-code-bg); + padding: var(--space-s) var(--space-m); + border-radius: var(--radius-s); + margin-bottom: var(--space-s); +} + +.skill-note { + font-size: var(--font-size-xs); + color: var(--color-text-tertiary); + margin: 0; + font-style: italic; +} + +/* ============================================ + MCP Cards + ============================================ */ + +.mcp-card { + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); +} + +.mcp-header { + display: flex; + align-items: center; + gap: var(--space-m); + margin-bottom: var(--space-m); +} + +.mcp-icon { + font-size: var(--font-size-xl); + color: var(--color-accent); +} + +.mcp-name { + font-size: var(--font-size-l); + font-weight: 600; + color: var(--color-text-primary); +} + +.mcp-description { + font-size: var(--font-size-s); + color: var(--color-text-secondary); + margin-bottom: var(--space-l); +} + +.mcp-tools h4 { + font-size: var(--font-size-s); + color: var(--color-text-primary); + margin-bottom: var(--space-s); +} + +.mcp-tools ul { + margin: 0; + padding-left: var(--space-l); +} + +.mcp-tools li { + font-size: var(--font-size-s); + color: var(--color-text-secondary); + margin: var(--space-xs) 0; +} + +.mcp-tools code { + color: var(--color-accent); + background: none; + padding: 0; +} + +.mcp-note { + font-size: var(--font-size-xs); + color: var(--color-text-tertiary); + margin-top: var(--space-m); + font-style: italic; +} + +/* ============================================ + Installation Section + ============================================ */ + +.install-section { + background-color: var(--color-surface); + border-radius: var(--radius-xl); + margin: var(--space-xxl) 0; + padding: var(--space-xxl); +} + +.install-steps { + max-width: 700px; + margin: 0 auto; +} + +.install-step { + display: flex; + gap: var(--space-xl); + margin-bottom: var(--space-xl); +} + +.install-step:last-child { + margin-bottom: 0; +} + +.step-number { + flex-shrink: 0; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-accent); + color: var(--color-on-accent); + font-weight: 700; + font-size: var(--font-size-l); + border-radius: 50%; +} + +.step-content { + flex: 1; +} + +.step-content h3 { + margin-top: 0; + margin-bottom: var(--space-m); +} + +/* ============================================ + Code Blocks + ============================================ */ + +.card-code-block { + background-color: var(--color-code-bg); + border-radius: var(--radius-m); + padding: var(--space-l); + overflow-x: auto; +} + +.card-code-block pre { + margin: 0; +} + +.card-code-block code { + font-family: var(--font-mono); + font-size: var(--font-size-s); + color: var(--color-code-text); + background: none; + padding: 0; + line-height: 1.6; + white-space: pre; +} + +/* ============================================ + Accordion / FAQ + ============================================ */ + +.accordion-container { + border-top: 1px solid var(--color-border); +} + +.accordion-item { + border-bottom: 1px solid var(--color-border); +} + +.accordion-toggle { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-xl) 0; + cursor: pointer; + list-style: none; +} + +.accordion-toggle::-webkit-details-marker { + display: none; +} + +.accordion-toggle p { + margin: 0; + color: var(--color-text-primary); +} + +.accordion-toggle:hover p { + color: var(--color-accent); +} + +.accordion-chevron { + color: var(--color-text-tertiary); + transition: transform 0.2s ease; +} + +[open] .accordion-chevron { + transform: rotate(180deg); +} + +.accordion-content { + padding-bottom: var(--space-xl); + color: var(--color-text-secondary); +} + +.accordion-content p { + margin: var(--space-m) 0; +} + +.accordion-content p:first-child { + margin-top: 0; +} + +/* ============================================ + Promo CTA Section + ============================================ */ + +.promo-cta { + background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); + border-radius: var(--radius-xl); + padding: var(--space-xxl); + margin-bottom: var(--space-xxl); +} + +.promo-cta h2 { + color: white; +} + +.promo-cta p { + color: rgba(255, 255, 255, 0.9); +} + +.promo-cta .button.primary { + background-color: white; + color: var(--color-promo-end); +} + +.promo-cta .button.primary:hover { + background-color: rgba(255, 255, 255, 0.9); +} + +.promo-cta .button.tertiary { + border-color: rgba(255, 255, 255, 0.3); + color: white; +} + +.promo-cta .button.tertiary:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +/* ============================================ + Footer + ============================================ */ + +.footer { + border-top: 1px solid var(--color-border); + margin-top: auto; + padding: var(--space-xxl) 0 var(--space-xl); +} + +.footer-menu { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); + margin-bottom: var(--space-xl); +} + +@media (min-width: 768px) { + .footer-menu { + grid-template-columns: 2fr 1fr 1fr; + } +} + +.footer p { + margin: 0; + color: var(--color-text-secondary); +} + +.link-list { + display: flex; + flex-direction: column; + gap: var(--space-m); +} + +.link-list a { + color: var(--color-text-secondary); + font-size: var(--font-size-s); + text-decoration: none; +} + +.link-list a:hover { + color: var(--color-accent); +} + +.icon-link { + display: flex; + align-items: center; + gap: var(--space-s); +} + +.icon-link .icon { + color: var(--color-accent); +} + +.pseudo-link { + text-decoration: underline; + text-decoration-color: var(--color-border); + text-underline-offset: 2px; +} + +.link-list-horizontal { + display: flex; + flex-wrap: wrap; + gap: var(--space-l); +} + +.link-list-horizontal a { + color: var(--color-text-tertiary); + font-size: var(--font-size-s); +} + +.link-list-horizontal a:hover { + color: var(--color-text-secondary); +} + +/* ============================================ + Utility Classes + ============================================ */ + +.hide-on-mobile { + display: none; +} + +@media (min-width: 768px) { + .hide-on-mobile { + display: flex; + } +} + +.mobile-only { + display: flex; +} + +@media (min-width: 1024px) { + .mobile-only { + display: none; + } +} + +.margin-top-l { + margin-top: var(--space-l); +} + +.ui.s { + font-size: var(--font-size-s); + line-height: var(--line-height-ui-s); +} + +.icon { + display: inline-flex !important; + align-items: center; +} + +.icon.m { font-size: var(--font-size-m); } +.icon.l { font-size: var(--font-size-l); } +.icon.xl { font-size: var(--font-size-xl); } + +/* ============================================ + Responsive Adjustments + ============================================ */ + +@media (max-width: 767px) { + :root { + --font-size-xxl: 36px; + --font-size-xl: 28px; + --line-height-h1: 44px; + --line-height-h2: 36px; + --space-section: 48px; + } + + .page-container { + padding: 0 var(--space-l); + } + + .hero-section .heading.hero { + padding: var(--space-xl) 0; + } + + .install-section { + padding: var(--space-xl); + } + + .install-step { + flex-direction: column; + gap: var(--space-m); + } + + .promo-cta { + padding: var(--space-xl); + } +} diff --git a/plugins/compounding-engineering/docs/index.html b/plugins/compounding-engineering/docs/index.html new file mode 100644 index 0000000..9bdfcc9 --- /dev/null +++ b/plugins/compounding-engineering/docs/index.html @@ -0,0 +1,889 @@ + + + + + + Compounding Engineering - AI-Powered Development Tools for Claude Code + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + Compounding Engineering + + +
+ +
+ + Install + +
+
+ +
+ +
+
+ + Version 2.5.0 released! + +

+ AI-Powered Development Tools That Get Smarter With Every Use +

+

+ 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. +

+
+ + Install Plugin + + + Read the Docs + +
+
+
+ + +
+
+
+
24
+
Specialized Agents
+
+
+
16
+
Slash Commands
+
+
+
11
+
Intelligent Skills
+
+
+
2
+
MCP Servers
+
+
+
+ + +
+
+

The Compounding Engineering Philosophy

+

+ 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. +

+
+
+
+
+
+

Plan

+

+ Understand the change needed and its impact before writing any code. + Use research agents to gather context and best practices. +

+
+
+
+
+
+

Delegate

+

+ Use specialized AI agents to help with implementation. + Each agent brings deep expertise in its domain. +

+
+
+
+
+
+

Assess

+

+ Run comprehensive reviews with multiple perspectives. + Security, performance, architecture—all covered. +

+
+
+
+
+
+

Codify

+

+ Document learnings and patterns for future use. + Each solved problem becomes reusable knowledge. +

+
+
+
+
+ + +
+
+

+ 24 Specialized Agents +

+

+ Each agent brings deep expertise in a specific domain. Run them individually or orchestrate + multiple agents in parallel for comprehensive analysis. +

+
+ + +
+

Review Agents (10)

+
+
+
+ kieran-rails-reviewer + Rails +
+

Super senior Rails developer with impeccable taste. Applies strict conventions for Turbo Streams, namespacing, and the "duplication over complexity" philosophy.

+ claude agent kieran-rails-reviewer +
+
+
+ dhh-rails-reviewer + Rails +
+

Reviews code from DHH's perspective. Focus on Rails conventions, simplicity, and avoiding over-engineering.

+ claude agent dhh-rails-reviewer +
+
+
+ kieran-python-reviewer + Python +
+

Python code review with strict conventions. PEP 8 compliance, type hints, and Pythonic patterns.

+ claude agent kieran-python-reviewer +
+
+
+ kieran-typescript-reviewer + TypeScript +
+

TypeScript review with focus on type safety, modern patterns, and clean architecture.

+ claude agent kieran-typescript-reviewer +
+
+
+ security-sentinel + Security +
+

Security audits and vulnerability assessments. OWASP top 10, injection attacks, authentication flaws.

+ claude agent security-sentinel +
+
+
+ performance-oracle + Performance +
+

Performance analysis and optimization recommendations. N+1 queries, caching strategies, bottleneck identification.

+ claude agent performance-oracle +
+
+
+ architecture-strategist + Architecture +
+

Analyze architectural decisions, compliance, and system design patterns.

+ claude agent architecture-strategist +
+
+
+ data-integrity-guardian + Data +
+

Database migrations and data integrity review. Schema changes, foreign keys, data consistency.

+ claude agent data-integrity-guardian +
+
+
+ pattern-recognition-specialist + Patterns +
+

Analyze code for patterns and anti-patterns. Design patterns, code smells, refactoring opportunities.

+ claude agent pattern-recognition-specialist +
+
+
+ code-simplicity-reviewer + Quality +
+

Final pass for simplicity and minimalism. Remove unnecessary complexity, improve readability.

+ claude agent code-simplicity-reviewer +
+
+
+ + +
+

Research Agents (4)

+
+
+
+ framework-docs-researcher + Research +
+

Research framework documentation and best practices. Find official guidance and community patterns.

+ claude agent framework-docs-researcher +
+
+
+ best-practices-researcher + Research +
+

Gather external best practices and examples from the community and industry standards.

+ claude agent best-practices-researcher +
+
+
+ git-history-analyzer + Git +
+

Analyze git history and code evolution. Understand how code has changed and why.

+ claude agent git-history-analyzer +
+
+
+ repo-research-analyst + Research +
+

Research repository structure and conventions. Understand project patterns and organization.

+ claude agent repo-research-analyst +
+
+
+ + +
+

Design Agents (3)

+
+
+
+ design-iterator + Design +
+

Iteratively refine UI through systematic design iterations with screenshots and feedback loops.

+ claude agent design-iterator +
+
+
+ figma-design-sync + Figma +
+

Synchronize web implementations with Figma designs. Pixel-perfect matching.

+ claude agent figma-design-sync +
+
+
+ design-implementation-reviewer + Review +
+

Verify UI implementations match Figma designs. Catch visual regressions.

+ claude agent design-implementation-reviewer +
+
+
+ + +
+

Workflow Agents (6)

+
+
+
+ bug-reproduction-validator + Bugs +
+

Systematically reproduce and validate bug reports. Create minimal reproduction cases.

+ claude agent bug-reproduction-validator +
+
+
+ pr-comment-resolver + PR +
+

Address PR comments and implement fixes. Batch process review feedback.

+ claude agent pr-comment-resolver +
+
+
+ feedback-codifier + Knowledge +
+

Codify feedback patterns into reviewer agents. Build institutional knowledge.

+ claude agent feedback-codifier +
+
+
+ lint + Quality +
+

Run linting and code quality checks on Ruby and ERB files.

+ claude agent lint +
+
+
+ spec-flow-analyzer + Testing +
+

Analyze user flows and identify gaps in specifications.

+ claude agent spec-flow-analyzer +
+
+
+ every-style-editor + Content +
+

Edit content to conform to Every's style guide.

+ claude agent every-style-editor +
+
+
+ + +
+

Documentation Agent (1)

+
+
+
+ ankane-readme-writer + Docs +
+

Create READMEs following Ankane-style template for Ruby gems. Clean, concise, comprehensive documentation that gets straight to the point.

+ claude agent ankane-readme-writer +
+
+
+
+ + +
+
+

+ 16 Powerful Commands +

+

+ Slash commands for common workflows. From code review to bug triage, + these commands automate complex multi-step processes. +

+
+ + +
+

Workflow Commands

+
+
+
+ /workflows:plan +
+

Create comprehensive implementation plans with research agents and stakeholder analysis.

+
+
+
+ /workflows:review +
+

Run exhaustive code reviews using 12+ parallel agents, ultra-thinking, and worktrees.

+
+
+
+ /workflows:work +
+

Execute work items systematically with progress tracking and validation.

+
+
+
+ /workflows:codify +
+

Document solved problems for the knowledge base. Turn learnings into reusable patterns.

+
+
+
+ + +
+

Utility Commands

+
+
+
+ /changelog +
+

Create engaging changelogs for recent merges.

+
+
+
+ /create-agent-skill +
+

Create or edit Claude Code skills with expert guidance.

+
+
+
+ /generate_command +
+

Generate new slash commands from templates.

+
+
+
+ /heal-skill +
+

Fix skill documentation issues automatically.

+
+
+
+ /plan_review +
+

Multi-agent plan review in parallel.

+
+
+
+ /prime +
+

Prime/setup command for project initialization.

+
+
+
+ /report-bug +
+

Report bugs in the plugin with structured templates.

+
+
+
+ /reproduce-bug +
+

Reproduce bugs using logs and console output.

+
+
+
+ /triage +
+

Triage and prioritize issues interactively.

+
+
+
+ /resolve_parallel +
+

Resolve TODO comments in parallel.

+
+
+
+ /resolve_pr_parallel +
+

Resolve PR comments in parallel.

+
+
+
+ /resolve_todo_parallel +
+

Resolve file-based todos in parallel.

+
+
+
+
+ + +
+
+

+ 11 Intelligent Skills +

+

+ Skills provide deep domain expertise that Claude Code can invoke on-demand. + From Ruby gem patterns to image generation. +

+
+ + +
+

Development Tools

+
+
+
+ andrew-kane-gem-writer + Ruby +
+

Write Ruby gems following Andrew Kane's patterns. Clean APIs, smart defaults, comprehensive testing.

+ skill: andrew-kane-gem-writer +
+
+
+ dhh-ruby-style + Rails +
+

Write Ruby/Rails code in DHH's 37signals style. Convention over configuration, beautiful code.

+ skill: dhh-ruby-style +
+
+
+ dspy-ruby + AI +
+

Build type-safe LLM applications with DSPy.rb. Structured prompting, optimization, providers.

+ skill: dspy-ruby +
+
+
+ frontend-design + Design +
+

Create production-grade frontend interfaces with modern CSS, responsive design, accessibility.

+ skill: frontend-design +
+
+
+ create-agent-skills + Meta +
+

Expert guidance for creating Claude Code skills. Templates, best practices, validation.

+ skill: create-agent-skills +
+
+
+ skill-creator + Meta +
+

Guide for creating effective Claude Code skills with structured workflows.

+ skill: skill-creator +
+
+
+ codify-docs + Docs +
+

Capture solved problems as categorized documentation with YAML schema.

+ skill: codify-docs +
+
+
+ + +
+

Content & Workflow

+
+
+
+ every-style-editor + Content +
+

Review copy for Every's style guide compliance.

+ skill: every-style-editor +
+
+
+ file-todos + Workflow +
+

File-based todo tracking system with priorities and status.

+ skill: file-todos +
+
+
+ git-worktree + Git +
+

Manage Git worktrees for parallel development on multiple branches.

+ skill: git-worktree +
+
+
+ + +
+

Image Generation

+
+
+
+ gemini-imagegen + AI Images +
+

+ 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. +

+
+
+ Text-to-image generation +
+
+ Image editing & manipulation +
+
+ Multi-turn refinement +
+
+ Multiple reference images (up to 14) +
+
+ Google Search grounding (Pro) +
+
+ skill: gemini-imagegen +

Requires: GEMINI_API_KEY environment variable

+
+
+
+
+ + +
+
+

+ 2 MCP Servers +

+

+ Model Context Protocol servers extend Claude Code's capabilities with + browser automation and framework documentation lookup. +

+
+ +
+
+
+ + Playwright +
+

Browser automation for testing, screenshots, and web interactions.

+
+

Tools Provided:

+
    +
  • browser_navigate - Navigate to URLs
    • +
  • browser_take_screenshot - Take screenshots
    • +
  • browser_click - Click elements
    • +
  • browser_fill_form - Fill form fields
    • +
  • browser_snapshot - Get accessibility snapshot
    • +
  • browser_evaluate - Execute JavaScript
    • +
+
+
+
+
+ + Context7 +
+

Framework documentation lookup for 100+ frameworks.

+
+

Tools Provided:

+
    +
  • resolve-library-id - Find library ID
    • +
  • get-library-docs - Get documentation
    • +
+

Supports: Rails, React, Next.js, Vue, Django, Laravel, and 100+ more

+
+
+
+
+ + +
+
+

Get Started in Seconds

+

+ Install the plugin and start using AI-powered development tools immediately. +

+
+ +
+
+
1
+
+

Add the Marketplace

+
+ 
claude /plugin marketplace add https://github.com/EveryInc/every-marketplace
+
+
+
+
+
2
+
+

Install the Plugin

+
+ 
claude /plugin install compounding-engineering
+
+
+
+
+
3
+
+

Start Using

+
+ 
# Run a code review
+/workflows:review PR#123
+
+# Use an agent
+claude agent kieran-rails-reviewer
+
+# Invoke a skill
+skill: gemini-imagegen
+
+
+
+
+
+ + +
+
+

Frequently Asked Questions

+
+
+
+ +

What is Compounding Engineering?

+ + +
+

+ 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. +

+
+
+
+ +

How do agents differ from skills?

+ + +
+

+ Agents are specialized personas that can be invoked to perform specific tasks + (e.g., code review, research). They're called with claude agent [name]. +

+

+ Skills provide domain expertise that Claude Code can use on-demand. They include + reference materials, templates, and workflows. They're invoked with skill: [name]. +

+
+
+
+ +

Why aren't MCP servers loading automatically?

+ + +
+

+ This is a known issue. As a workaround, manually add the MCP servers to your + .claude/settings.json file. See the README for the exact configuration. +

+
+
+
+ +

Can I use this with languages other than Ruby/Rails?

+ + +
+

+ 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. +

+
+
+
+ +

How do I create my own agents or skills?

+ + +
+

+ Use the /create-agent-skill command or the create-agent-skills skill + for expert guidance. The skill includes templates, best practices, and validation workflows. +

+
+
+
+
+ + +
+
+

Start Building Smarter Today

+

+ Join developers who are making each engineering task easier than the last. +

+
+ + Install Plugin + + + View on GitHub + +
+
+
+
+ + +
+ + + diff --git a/plugins/compounding-engineering/docs/js/main.js b/plugins/compounding-engineering/docs/js/main.js new file mode 100644 index 0000000..bc71913 --- /dev/null +++ b/plugins/compounding-engineering/docs/js/main.js @@ -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 = ''; + 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 = ''; + copyBtn.style.color = '#34d399'; + + setTimeout(() => { + copyBtn.innerHTML = ''; + copyBtn.style.color = '#94a3b8'; + }, 2000); + } catch (err) { + console.error('Failed to copy:', err); + copyBtn.innerHTML = ''; + copyBtn.style.color = '#f87171'; + + setTimeout(() => { + copyBtn.innerHTML = ''; + 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); diff --git a/plugins/compounding-engineering/docs/pages/getting-started.html b/plugins/compounding-engineering/docs/pages/getting-started.html new file mode 100644 index 0000000..f844fc0 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/getting-started.html @@ -0,0 +1,597 @@ + + + + + + Getting Started - Compounding Engineering + + + + + + + + + + + +
+
+ + + + +
+
+ + +
+ +
+

Getting Started with Compounding Engineering

+

+ 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. +

+ + +
+

Installation

+ +

Prerequisites

+
    +
  • Claude Code installed and configured
    • +
  • A GitHub account (for marketplace access)
    • +
  • Node.js 18+ (for MCP servers)
    • +
+ +

Step 1: Add the Marketplace

+

First, add the Every Marketplace to your Claude Code installation:

+
+ 
claude /plugin marketplace add https://github.com/EveryInc/every-marketplace
+
+ +

Step 2: Install the Plugin

+

Install the compounding-engineering plugin from the marketplace:

+
+ 
claude /plugin install compounding-engineering
+
+ +

Step 3: Verify Installation

+

Verify the plugin is installed correctly:

+
+ 
claude /plugin list
+
+

You should see compounding-engineering in the list of installed plugins.

+ +
+
+
+

Known Issue: MCP Servers

+

+ The bundled MCP servers (Playwright and Context7) may not load automatically. + See the MCP Configuration section for the workaround. +

+
+
+
+ + +
+

Quick Start

+ +

Here are the most common ways to use the plugin:

+ +

Run a Code Review

+

The /workflows:review command runs a comprehensive code review using multiple agents in parallel:

+
+ 
# Review a PR by number
+/workflows:review 123
+
+# Review the current branch
+/workflows:review
+
+# Review a specific branch
+/workflows:review feature/my-feature
+
+ +

Use a Specialized Agent

+

Invoke agents directly for specific tasks:

+
+ 
# 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"
+
+ +

Invoke a Skill

+

Skills provide domain expertise on demand:

+
+ 
# 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
+
+
+ + +
+

Configuration

+ +

MCP Server Configuration

+

+ If MCP servers don't auto-load, add them manually to your .claude/settings.json: +

+
+ 
{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}
+
+ +

Environment Variables

+

Some skills require environment variables:

+ + + + + + + + + + + + + + + +
VariableRequired ForDescription
GEMINI_API_KEYgemini-imagegenGoogle Gemini API key for image generation
+
+ + +
+

The Compounding Engineering Philosophy

+ +
+ Every unit of engineering work should make subsequent units of work easier—not harder. +
+ +

This philosophy manifests in four key practices:

+ +
+
+
+

Plan

+

+ Understand the change needed and its impact before writing code. + Use research agents to gather context, best practices, and examples. +

+
+
+
+

Delegate

+

+ Use specialized AI agents to help with implementation. + Each agent brings deep expertise in its domain. +

+
+
+
+

Assess

+

+ Run comprehensive reviews with multiple perspectives. + Security, performance, architecture—all covered by specialized agents. +

+
+
+
+

Codify

+

+ Document learnings and patterns for future use. + Each solved problem becomes reusable knowledge. +

+
+
+
+ + +
+

Using Agents

+ +

+ Agents are specialized personas that can be invoked to perform specific tasks. + They're designed to bring deep expertise in their domain. +

+ +

Invoking Agents

+
+ 
# 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"
+
+ +

Agent Categories

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCountPurpose
Review10Code review, security audits, performance analysis
Research4Best practices, documentation, git history
Design3UI iteration, Figma sync, design review
Workflow6Bug reproduction, PR resolution, linting
Docs1README generation
+ +

+ + View All Agents + +

+
+ + +
+

Using Commands

+ +

+ Slash commands automate complex multi-step workflows. They orchestrate + multiple agents, tools, and processes into a single command. +

+ +

Running Commands

+
+ 
# Workflow commands (prefix: /workflows:)
+/workflows:plan
+/workflows:review 123
+/workflows:work
+/workflows:codify
+
+# Utility commands
+/changelog
+/triage
+/reproduce-bug
+
+ +

The Review Workflow

+

The /workflows:review command is the most comprehensive. It:

+
    +
  1. Detects the review target (PR, branch, or current changes)
    2. +
  2. Sets up a git worktree for isolated analysis
    3. +
  3. Runs 10+ review agents in parallel
    4. +
  4. Synthesizes findings by severity (P1/P2/P3)
    5. +
  5. Creates structured todo files for each finding
    6. +
  6. Generates a summary report
    7. +
+ +

+ + View All Commands + +

+
+ + +
+

Using Skills

+ +

+ 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. +

+ +

Invoking Skills

+
+ 
# 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"
+
+ +

Skill Structure

+

Skills typically contain:

+
    +
  • SKILL.md - Main documentation and instructions
    • +
  • references/ - Supporting documentation
    • +
  • templates/ - Code templates and patterns
    • +
  • workflows/ - Step-by-step procedures
    • +
  • scripts/ - Executable scripts (if needed)
    • +
+ +

+ + View All Skills + +

+
+ + +
+

Code Review Workflow Guide

+ +

+ The code review workflow is the heart of Compounding Engineering. + Here's how to get the most out of it. +

+ +

Basic Review

+
+ 
# Review a PR
+/workflows:review 123
+
+# Review current branch
+/workflows:review
+
+ +

Understanding Findings

+

Findings are categorized by severity:

+
    +
  • P1 Critical - Blocks merge. Security vulnerabilities, data corruption risks, breaking changes.
    • +
  • P2 Important - Should fix. Performance issues, architectural concerns, reliability problems.
    • +
  • P3 Nice-to-Have - Enhancements. Minor improvements, cleanup, documentation.
    • +
+ +

Working with Todo Files

+

Review findings are stored as todo files in the todos/ directory:

+
+ 
# List all pending todos
+ls todos/*-pending-*.md
+
+# Triage findings
+/triage
+
+# Resolve todos in parallel
+/resolve_todo_parallel
+
+
+ + +
+

Creating Custom Agents

+ +

+ You can create custom agents tailored to your team's needs. + Agents are defined as markdown files with YAML frontmatter. +

+ +

Agent File Structure

+
+ 
---
+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
+
+ +

Agent Location

+

Place custom agents in:

+
    +
  • .claude/agents/ - Project-specific agents
    • +
  • ~/.claude/agents/ - User-wide agents
    • +
+ +
+
+
+

Use the Command

+

+ The easiest way to create agents is with the /create-agent-skill command + or the create-agent-skills skill. +

+
+
+
+ + +
+

Creating Custom Skills

+ +

+ Skills are more complex than agents. They can include references, + templates, workflows, and scripts. +

+ +

Skill Directory Structure

+
+ 
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
+
+ +

SKILL.md Format

+
+ 
---
+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.
+
+ +
+
+
+

Expert Guidance

+

+ Use skill: create-agent-skills for comprehensive guidance + on creating effective skills, including best practices and validation. +

+
+
+
+ + + +
+
+
+ + + + + From 53ba12f0caac0cf2ba878439aca975df98a05d56 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Nov 2025 16:03:33 +0000 Subject: [PATCH 02/12] docs: Add complete reference pages and enhanced philosophy section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add agents.html with full documentation for all 24 agents - Add commands.html with full documentation for all 16 commands - Add skills.html with full documentation for all 11 skills - Add mcp-servers.html with Playwright and Context7 documentation - Enhance landing page philosophy section with four pillars and compounding effect timeline - Add CSS styles for philosophy section components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../docs/css/style.css | 183 +++++ .../compounding-engineering/docs/index.html | 136 +++- .../docs/pages/agents.html | 682 ++++++++++++++++++ .../docs/pages/commands.html | 518 +++++++++++++ .../docs/pages/mcp-servers.html | 400 ++++++++++ .../docs/pages/skills.html | 591 +++++++++++++++ 6 files changed, 2477 insertions(+), 33 deletions(-) create mode 100644 plugins/compounding-engineering/docs/pages/agents.html create mode 100644 plugins/compounding-engineering/docs/pages/commands.html create mode 100644 plugins/compounding-engineering/docs/pages/mcp-servers.html create mode 100644 plugins/compounding-engineering/docs/pages/skills.html diff --git a/plugins/compounding-engineering/docs/css/style.css b/plugins/compounding-engineering/docs/css/style.css index 677b933..1d54a46 100644 --- a/plugins/compounding-engineering/docs/css/style.css +++ b/plugins/compounding-engineering/docs/css/style.css @@ -1216,3 +1216,186 @@ section { padding: var(--space-xl); } } + +/* ============================================ + Philosophy Section (Enhanced) + ============================================ */ + +.philosophy-section { + padding: var(--space-section) 0; +} + +.philosophy-quote { + max-width: 800px; + margin: 0 auto var(--space-xxl); + text-align: center; +} + +.philosophy-quote blockquote { + font-size: var(--font-size-l); + font-style: italic; + color: var(--color-text-secondary); + line-height: 1.6; + margin: 0; + padding: var(--space-xl); + background: linear-gradient(135deg, var(--color-accent-lighter), transparent); + border-left: 4px solid var(--color-accent); + border-radius: var(--radius-m); +} + +/* Philosophy Pillars */ +.philosophy-pillars { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); + margin-bottom: var(--space-xxl); +} + +@media (min-width: 768px) { + .philosophy-pillars { + grid-template-columns: repeat(2, 1fr); + } +} + +.pillar { + display: flex; + gap: var(--space-l); + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); + transition: all 0.3s ease; +} + +.pillar:hover { + border-color: var(--color-accent); + transform: translateY(-2px); +} + +.pillar-icon { + flex-shrink: 0; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-accent-light); + border-radius: var(--radius-m); + font-size: var(--font-size-xl); + color: var(--color-accent); +} + +.pillar-content h3 { + margin: 0 0 var(--space-xs) 0; + font-size: var(--font-size-l); + color: var(--color-text-primary); +} + +.pillar-tagline { + margin: 0 0 var(--space-m) 0; + font-size: var(--font-size-s); + color: var(--color-accent); + font-weight: 500; +} + +.pillar-description { + margin: 0 0 var(--space-m) 0; + font-size: var(--font-size-s); + color: var(--color-text-secondary); + line-height: 1.6; +} + +.pillar-tools { + display: flex; + flex-wrap: wrap; + gap: var(--space-xs); +} + +.tool-tag { + font-family: var(--font-mono); + font-size: var(--font-size-xs); + padding: 2px 8px; + background-color: var(--color-surface-hover); + color: var(--color-text-secondary); + border-radius: var(--radius-xs); + border: 1px solid var(--color-border); +} + +/* Compound Effect Timeline */ +.compound-effect { + background-color: var(--color-surface); + border-radius: var(--radius-l); + padding: var(--space-xl); + border: 1px solid var(--color-border); +} + +.compound-effect h3 { + text-align: center; + margin: 0 0 var(--space-xl) 0; + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-s); +} + +.compound-grid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: var(--space-m); +} + +.compound-item { + text-align: center; + padding: var(--space-l); + background-color: var(--color-background); + border-radius: var(--radius-m); + border: 1px solid var(--color-border); + min-width: 140px; +} + +.compound-item.highlight { + background: linear-gradient(135deg, var(--color-accent-light), var(--color-surface)); + border-color: var(--color-accent); +} + +.compound-number { + font-size: var(--font-size-s); + font-weight: 600; + color: var(--color-accent); + margin-bottom: var(--space-xs); +} + +.compound-text { + font-size: var(--font-size-xs); + color: var(--color-text-secondary); +} + +.compound-arrow { + color: var(--color-text-tertiary); + font-size: var(--font-size-l); +} + +@media (max-width: 767px) { + .pillar { + flex-direction: column; + text-align: center; + } + + .pillar-icon { + margin: 0 auto; + } + + .pillar-tools { + justify-content: center; + } + + .compound-arrow { + transform: rotate(90deg); + } + + .compound-grid { + flex-direction: column; + } +} diff --git a/plugins/compounding-engineering/docs/index.html b/plugins/compounding-engineering/docs/index.html index 9bdfcc9..3ef5dd0 100644 --- a/plugins/compounding-engineering/docs/index.html +++ b/plugins/compounding-engineering/docs/index.html @@ -100,54 +100,124 @@ -
+

The Compounding Engineering Philosophy

-

+

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.

-
-
-
-
-

Plan

-

- Understand the change needed and its impact before writing any code. - Use research agents to gather context and best practices. + + +

+
+ "Most engineering creates linear value: you build a feature, it works, done. + Compounding engineering creates exponential value: each solved problem teaches the system, + each pattern becomes reusable, each review strengthens future reviews." +
+
+ + +
+
+
+
+

Plan

+

Understand before you build

+

+ Before writing a single line of code, gather context. Research agents explore + documentation, analyze git history, and find best practices. The /workflows:plan + command orchestrates 3 research agents in parallel to create comprehensive implementation plans.

+
+ framework-docs-researcher + best-practices-researcher + repo-research-analyst + git-history-analyzer +
-
-
-
-

Delegate

-

- Use specialized AI agents to help with implementation. - Each agent brings deep expertise in its domain. + +

+
+
+

Delegate

+

Leverage specialized expertise

+

+ Each agent brings deep domain knowledge. The kieran-rails-reviewer knows Rails + conventions like an expert. The security-sentinel catches OWASP vulnerabilities. + The /workflows:work command executes plans while maintaining quality gates.

+
+ 24 specialized agents + /workflows:work + dhh-ruby-style skill + git-worktree skill +
-
-
-
-

Assess

-

- Run comprehensive reviews with multiple perspectives. - Security, performance, architecture—all covered. + +

+
+
+

Assess

+

Multiple perspectives, comprehensive coverage

+

+ The /workflows:review command launches 12+ review agents in parallel: security, + performance, architecture, data integrity, patterns, and more. Findings are categorized by + severity (P1/P2/P3) and stored as actionable todo files.

+
+ security-sentinel + performance-oracle + architecture-strategist + data-integrity-guardian +
-
-
-
-

Codify

-

- Document learnings and patterns for future use. - Each solved problem becomes reusable knowledge. + +

+
+
+

Codify

+

Turn solutions into knowledge

+

+ Every solved problem should teach the system. The /workflows:codify command + captures solutions as searchable documentation. The feedback-codifier agent + extracts patterns from code reviews to improve future reviews.

+
+ /workflows:codify + codify-docs skill + feedback-codifier + file-todos skill +
+
+
+
+ + +
+

The Compounding Effect

+
+
+
Day 1
+
Install plugin, run first review
+
+
+
+
Week 1
+
Patterns documented, todos organized
+
+
+
+
Month 1
+
Knowledge base growing, reviews faster
+
+
+
+
Ongoing
+
Each task easier than the last
diff --git a/plugins/compounding-engineering/docs/pages/agents.html b/plugins/compounding-engineering/docs/pages/agents.html new file mode 100644 index 0000000..ec51834 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/agents.html @@ -0,0 +1,682 @@ + + + + + + Agent Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

Agent Reference

+

+ Complete documentation for all 24 specialized AI agents. Each agent brings deep expertise + in a specific domain and can be invoked individually or orchestrated together. +

+ +
+

How to Use Agents

+
+ 
# 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"
+
+
+ + +
+

Review Agents (10)

+

Code review agents that examine changes from multiple perspectives: conventions, security, performance, architecture, and quality.

+ +
+
+

kieran-rails-reviewer

+ Rails +
+

+ 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. +

+

Key Principles

+
    +
  • Existing Code Modifications - Very strict. Added complexity needs strong justification.
    • +
  • New Code - Pragmatic. If it's isolated and works, it's acceptable.
    • +
  • Turbo Streams - Simple turbo streams MUST be inline arrays in controllers.
    • +
  • Testing as Quality - Hard-to-test code = poor structure that needs refactoring.
    • +
  • Naming (5-Second Rule) - Must understand what a view/component does in 5 seconds from its name.
    • +
  • Namespacing - Always use class Module::ClassName pattern.
    • +
  • Duplication > Complexity - Simple duplicated code is better than complex DRY abstractions.
    • +
+
+ 
claude agent kieran-rails-reviewer "Review the UserController"
+
+
+ +
+
+

dhh-rails-reviewer

+ Rails +
+

+ Brutally honest Rails code review from David Heinemeier Hansson's perspective. + Focuses on Rails conventions, simplicity, and avoiding over-engineering. +

+

Key Focus Areas

+
    +
  • Identifies deviations from Rails conventions
    • +
  • Spots JavaScript framework patterns infiltrating Rails
    • +
  • Tears apart unnecessary abstractions
    • +
  • Challenges overengineering and microservices mentality
    • +
+
+ 
claude agent dhh-rails-reviewer
+
+
+ +
+
+

kieran-python-reviewer

+ Python +
+

+ Reviews Python code with an exceptionally high quality bar. Enforces type hints, Pythonic patterns, + and modern Python 3.10+ syntax. +

+

Key Focus Areas

+
    +
  • Type hints for all functions
    • +
  • Pythonic patterns and idioms
    • +
  • Modern Python syntax
    • +
  • Import organization
    • +
  • Module extraction signals
    • +
+
+ 
claude agent kieran-python-reviewer
+
+
+ +
+
+

kieran-typescript-reviewer

+ TypeScript +
+

+ Reviews TypeScript code with an exceptionally high quality bar. Enforces type safety, + modern patterns, and clean architecture. +

+

Key Focus Areas

+
    +
  • No any without justification
    • +
  • Component/module extraction signals
    • +
  • Import organization
    • +
  • Modern TypeScript patterns
    • +
  • Testability assessment
    • +
+
+ 
claude agent kieran-typescript-reviewer
+
+
+ +
+
+

security-sentinel

+ Security +
+

+ Performs security audits, vulnerability assessments, and OWASP compliance checks. + Essential for any code handling authentication, payments, or sensitive data. +

+

Security Checks

+
    +
  • Input validation analysis
    • +
  • SQL injection risk assessment
    • +
  • XSS vulnerability detection
    • +
  • Authentication/authorization audit
    • +
  • Sensitive data exposure scanning
    • +
  • OWASP Top 10 compliance
    • +
  • Hardcoded secrets search
    • +
+
+ 
claude agent security-sentinel "Audit the payment flow"
+
+
+ +
+
+

performance-oracle

+ Performance +
+

+ Analyzes code for performance issues, bottlenecks, and scalability concerns. + Projects performance at 10x, 100x, and 1000x scale. +

+

Analysis Areas

+
    +
  • Algorithmic complexity (Big O notation)
    • +
  • N+1 query pattern detection
    • +
  • Proper index usage verification
    • +
  • Memory management review
    • +
  • Caching opportunity identification
    • +
  • Network usage optimization
    • +
  • Frontend bundle impact
    • +
+
+ 
claude agent performance-oracle
+
+
+ +
+
+

architecture-strategist

+ Architecture +
+

+ Analyzes code changes from an architectural perspective. Evaluates system structure, + SOLID principles, and API contracts. +

+

Analysis Areas

+
    +
  • Overall system structure understanding
    • +
  • Change context within architecture
    • +
  • Architectural violation identification
    • +
  • SOLID principles compliance
    • +
  • Microservice boundary assessment
    • +
  • API contract evaluation
    • +
+
+ 
claude agent architecture-strategist
+
+
+ +
+
+

data-integrity-guardian

+ Data +
+

+ Reviews database migrations, data models, and data persistence code. + Ensures data safety and privacy compliance. +

+

Review Areas

+
    +
  • Migration safety and reversibility
    • +
  • Data constraint validation
    • +
  • Transaction boundary review
    • +
  • Referential integrity preservation
    • +
  • Privacy compliance (GDPR, CCPA)
    • +
  • Data corruption scenario checking
    • +
+
+ 
claude agent data-integrity-guardian
+
+
+ +
+
+

pattern-recognition-specialist

+ Patterns +
+

+ Analyzes code for design patterns, anti-patterns, naming conventions, and duplication. + Uses tools like jscpd for duplication detection. +

+

Detection Areas

+
    +
  • Design patterns (Factory, Singleton, Observer, etc.)
    • +
  • Anti-patterns and code smells
    • +
  • TODO/FIXME comments
    • +
  • God objects and circular dependencies
    • +
  • Naming consistency
    • +
  • Code duplication
    • +
+
+ 
claude agent pattern-recognition-specialist
+
+
+ +
+
+

code-simplicity-reviewer

+ Quality +
+

+ Ensures code is as simple and minimal as possible. Applies YAGNI rigorously + and challenges unnecessary abstractions. +

+

Simplification Checks

+
    +
  • Analyze every line for necessity
    • +
  • Simplify complex logic
    • +
  • Remove redundancy and duplication
    • +
  • Challenge abstractions
    • +
  • Optimize for readability
    • +
  • Eliminate premature generalization
    • +
+
+ 
claude agent code-simplicity-reviewer
+
+
+
+ + +
+

Research Agents (4)

+

Research agents that gather information from documentation, repositories, and git history to inform development decisions.

+ +
+
+

framework-docs-researcher

+ Research +
+

+ Gathers comprehensive documentation and best practices for frameworks, libraries, or dependencies. +

+

Capabilities

+
    +
  • Fetch official framework and library documentation
    • +
  • Identify version-specific constraints and deprecations
    • +
  • Search GitHub for real-world usage examples
    • +
  • Analyze gem/library source code using bundle show
    • +
  • Synthesize findings with practical examples
    • +
+
+ 
claude agent framework-docs-researcher "Research Hotwire Turbo patterns"
+
+
+ +
+
+

best-practices-researcher

+ Research +
+

+ Researches and gathers external best practices, documentation, and examples for any technology. +

+

Capabilities

+
    +
  • Leverage multiple sources (Context7 MCP, web search, GitHub)
    • +
  • Evaluate information quality and recency
    • +
  • Synthesize into actionable guidance
    • +
  • Provide code examples and templates
    • +
  • Research issue templates and community engagement
    • +
+
+ 
claude agent best-practices-researcher "Find pagination patterns"
+
+
+ +
+
+

git-history-analyzer

+ Git +
+

+ Archaeological analysis of code repositories to understand evolution and patterns. +

+

Analysis Techniques

+
    +
  • Trace file evolution using git log --follow
    • +
  • Determine code origins using git blame -w -C -C -C
    • +
  • Identify patterns from commit history
    • +
  • Map key contributors and expertise areas
    • +
  • Extract historical patterns of issues and fixes
    • +
+
+ 
claude agent git-history-analyzer "Analyze changes to User model"
+
+
+ +
+
+

repo-research-analyst

+ Research +
+

+ Conducts thorough research on repository structure, documentation, and patterns. +

+

Analysis Areas

+
    +
  • Architecture and documentation files (ARCHITECTURE.md, README.md, CLAUDE.md)
    • +
  • GitHub issues for patterns and conventions
    • +
  • Issue/PR templates and guidelines
    • +
  • Implementation patterns using ast-grep or rg
    • +
  • Project-specific conventions
    • +
+
+ 
claude agent repo-research-analyst
+
+
+
+ + +
+

Workflow Agents (6)

+

Workflow agents that automate common development tasks like bug reproduction, PR resolution, and linting.

+ +
+
+

bug-reproduction-validator

+ Bugs +
+

+ Verifies whether bug reports are actual bugs through systematic reproduction. + Classifies bugs and provides severity assessment. +

+

Classification Types

+
    +
  • Confirmed - Bug reproduced successfully
    • +
  • Cannot Reproduce - Unable to reproduce
    • +
  • Not a Bug - Expected behavior
    • +
  • Environmental - Environment-specific issue
    • +
  • Data - Data-related issue
    • +
  • User Error - User misunderstanding
    • +
+
+ 
claude agent bug-reproduction-validator
+
+
+ +
+
+

pr-comment-resolver

+ PR +
+

+ Addresses code review comments by implementing requested changes and reporting resolutions. +

+

Workflow

+
    +
  • Analyze code review comments
    • +
  • Plan the resolution before implementation
    • +
  • Implement requested modifications
    • +
  • Verify resolution doesn't break functionality
    • +
  • Provide clear resolution reports
    • +
+
+ 
claude agent pr-comment-resolver
+
+
+ +
+
+

feedback-codifier

+ Knowledge +
+

+ Analyzes code review feedback to extract patterns and update reviewer configurations. + Uses Opus model for deep analysis. +

+

Capabilities

+
    +
  • Extract core patterns from code reviews
    • +
  • Categorize by type (structure, testing, security, performance)
    • +
  • Formulate actionable guidelines
    • +
  • Update existing reviewer agents with new standards
    • +
+
+ 
claude agent feedback-codifier
+
+
+ +
+
+

lint

+ Quality +
+

+ Runs linting and code quality checks on Ruby and ERB files. + Uses Haiku model for efficiency. +

+

Tools Run

+
    +
  • bundle exec standardrb - Ruby file checking/fixing
    • +
  • bundle exec erblint --lint-all - ERB templates
    • +
  • bin/brakeman - Security scanning
    • +
+
+ 
claude agent lint
+
+
+ +
+
+

spec-flow-analyzer

+ Testing +
+

+ Analyzes specifications and plans for user flows and gap identification. + Uses Sonnet model for analysis. +

+

Analysis Areas

+
    +
  • Map all possible user flows and permutations
    • +
  • Identify gaps, ambiguities, and missing specifications
    • +
  • Consider different user types, roles, permissions
    • +
  • Analyze error states and edge cases
    • +
  • Generate critical questions requiring clarification
    • +
+
+ 
claude agent spec-flow-analyzer
+
+
+ +
+
+

every-style-editor

+ Content +
+

+ Reviews and edits text content to conform to Every's specific style guide. +

+

Style Checks

+
    +
  • Title case in headlines, sentence case elsewhere
    • +
  • Company singular/plural usage
    • +
  • Remove overused words (actually, very, just)
    • +
  • Enforce active voice
    • +
  • Apply formatting rules (Oxford commas, em dashes)
    • +
+
+ 
claude agent every-style-editor
+
+
+
+ + +
+

Design Agents (3)

+

Design agents that help with UI implementation, Figma synchronization, and iterative design refinement.

+ +
+
+

design-iterator

+ Design +
+

+ Systematic UI/UX design refinement through iterative improvements. + Takes screenshots, analyzes, implements changes, and repeats. +

+

Process

+
    +
  • Take focused screenshots of target elements
    • +
  • Analyze current state and identify 3-5 improvements
    • +
  • Implement targeted CSS/design changes
    • +
  • Document changes made
    • +
  • Repeat for specified iterations (default 10)
    • +
+
+ 
claude agent design-iterator
+
+
+ +
+
+

figma-design-sync

+ Figma +
+

+ Automatically detects and fixes visual differences between Figma designs and web implementations. + Uses Sonnet model. +

+

Workflow

+
    +
  • Extract design specifications from Figma
    • +
  • Capture implementation screenshots
    • +
  • Conduct systematic visual comparison
    • +
  • Make precise code changes to fix discrepancies
    • +
  • Verify implementation matches design
    • +
+
+ 
claude agent figma-design-sync
+
+
+ +
+
+

design-implementation-reviewer

+ Review +
+

+ Verifies UI implementations match Figma design specifications. + Uses Opus model for detailed analysis. +

+

Comparison Areas

+
    +
  • Layouts and structure
    • +
  • Typography (fonts, sizes, weights)
    • +
  • Colors and themes
    • +
  • Spacing and alignment
    • +
  • Different viewport sizes
    • +
+
+ 
claude agent design-implementation-reviewer
+
+
+
+ + +
+

Documentation Agent (1)

+ +
+
+

ankane-readme-writer

+ Docs +
+

+ Creates/updates README files following Ankane-style template for Ruby gems. + Optimized for conciseness with every sentence kept to 15 words or less. +

+

Section Order

+
    +
  1. Header (title + description)
    2. +
  2. Installation
    3. +
  3. Quick Start
    4. +
  4. Usage
    5. +
  5. Options
    6. +
  6. Upgrading
    7. +
  7. Contributing
    8. +
  8. License
    9. +
+

Style Guidelines

+
    +
  • Imperative voice throughout
    • +
  • 15 words max per sentence
    • +
  • Single-purpose code fences
    • +
  • Up to 4 badges maximum
    • +
  • No HTML comments
    • +
+
+ 
claude agent ankane-readme-writer
+
+
+
+ + + +
+
+
+ + + + + diff --git a/plugins/compounding-engineering/docs/pages/commands.html b/plugins/compounding-engineering/docs/pages/commands.html new file mode 100644 index 0000000..3992583 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/commands.html @@ -0,0 +1,518 @@ + + + + + + Command Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

Command Reference

+

+ Complete documentation for all 16 slash commands. Commands automate complex multi-step workflows + by orchestrating multiple agents, tools, and processes. +

+ + +
+

Workflow Commands (4)

+

Core workflow commands that embody the Plan-Delegate-Assess-Codify philosophy.

+ +
+
+ /workflows:plan +
+

+ Transform feature descriptions into well-structured project plans following conventions. +

+

Arguments

+

[feature description, bug report, or improvement idea]

+

Workflow

+
    +
  1. Repository Research (Parallel) - Launch 3 agents simultaneously: +
      +
    • repo-research-analyst - Project patterns
      • +
    • best-practices-researcher - Industry standards
      • +
    • framework-docs-researcher - Framework documentation
      • +
    +
    2. +
  2. SpecFlow Analysis - Run spec-flow-analyzer for user flows
    3. +
  3. Choose Detail Level: +
      +
    • MINIMAL - Simple bugs/small improvements
      • +
    • MORE - Standard features
      • +
    • A LOT - Major features with phases
      • +
    +
    4. +
  4. Write Plan - Save as plans/<issue_title>.md
    5. +
  5. Review - Call /plan_review for multi-agent feedback
    6. +
+
+
+
+

This command does NOT write code. It only researches and creates the plan.

+
+
+
+ 
/workflows:plan Add OAuth integration for third-party auth
+/workflows:plan Fix N+1 query in user dashboard
+
+
+ +
+
+ /workflows:review +
+

+ Perform exhaustive code reviews using multi-agent analysis, ultra-thinking, and worktrees. +

+

Arguments

+

[PR number, GitHub URL, branch name, or "latest"]

+

Workflow

+
    +
  1. Setup - Detect review target, optionally use git-worktree for isolation
    2. +
  2. Launch 12 Parallel Review Agents: +
      +
    • kieran-rails-reviewer, dhh-rails-reviewer
      • +
    • security-sentinel, performance-oracle
      • +
    • architecture-strategist, data-integrity-guardian
      • +
    • pattern-recognition-specialist, git-history-analyzer
      • +
    • And more...
      • +
    +
    3. +
  3. Ultra-Thinking Analysis - Stakeholder perspectives, scenario exploration
    4. +
  4. Simplification Review - Run code-simplicity-reviewer
    5. +
  5. Synthesize Findings - Categorize by severity (P1/P2/P3)
    6. +
  6. Create Todo Files - Using file-todos skill for all findings
    7. +
+
+
+
+

P1 (Critical) findings BLOCK MERGE. Address these before merging.

+
+
+
+ 
/workflows:review 42
+/workflows:review https://github.com/owner/repo/pull/42
+/workflows:review feature-branch-name
+/workflows:review latest
+
+
+ +
+
+ /workflows:work +
+

+ Execute work plans efficiently while maintaining quality and finishing features. +

+

Arguments

+

[plan file, specification, or todo file path]

+

Phases

+
    +
  1. Quick Start +
      +
    • Read plan & clarify requirements
      • +
    • Setup environment (live or worktree)
      • +
    • Create TodoWrite task list
      • +
    +
    2. +
  2. Execute +
      +
    • Task execution loop with progress tracking
      • +
    • Follow existing patterns
      • +
    • Test continuously
      • +
    • Figma sync if applicable
      • +
    +
    3. +
  3. Quality Check +
      +
    • Run test suite
      • +
    • Run linting
      • +
    • Optional reviewer agents for complex changes
      • +
    +
    4. +
  4. Ship It +
      +
    • Create commit with conventional format
      • +
    • Create pull request
      • +
    • Notify with summary
      • +
    +
    5. +
+
+ 
/workflows:work plans/user-authentication.md
+/workflows:work todos/042-ready-p1-performance-issue.md
+
+
+ +
+
+ /workflows:codify +
+

+ Document a recently solved problem for the knowledge base. +

+

Arguments

+

[optional: brief context about the fix]

+

Workflow

+
    +
  1. Preconditions - Verify problem is solved and verified working
    2. +
  2. Launch 7 Parallel Subagents: +
      +
    • Context Analyzer - Extract YAML frontmatter skeleton
      • +
    • Solution Extractor - Identify root cause and solution
      • +
    • Related Docs Finder - Find cross-references
      • +
    • Prevention Strategist - Develop prevention strategies
      • +
    • Category Classifier - Determine docs category
      • +
    • Documentation Writer - Create the file
      • +
    • Optional Specialized Agent - Based on problem type
      • +
    +
    3. +
  3. Create Documentation - File in docs/solutions/[category]/
    4. +
+

Auto-Triggers

+

Phrases: "that worked", "it's fixed", "working now", "problem solved"

+
+ 
/workflows:codify
+/workflows:codify N+1 query optimization
+
+
+
+ + +
+

Utility Commands (12)

+

Specialized commands for specific tasks like changelog generation, bug reporting, and parallel resolution.

+ +
+
+ /changelog +
+

+ Create engaging changelogs for recent merges to main branch. +

+

Arguments

+

[optional: daily|weekly, or time period in days]

+

Output Sections

+
    +
  • Breaking Changes (top priority)
    • +
  • New Features
    • +
  • Bug Fixes
    • +
  • Other Improvements
    • +
  • Shoutouts
    • +
  • Fun Fact
    • +
+
+ 
/changelog daily
+/changelog weekly
+/changelog 7
+
+
+ +
+
+ /create-agent-skill +
+

+ Create or edit Claude Code skills with expert guidance on structure and best practices. +

+

Arguments

+

[skill description or requirements]

+
+ 
/create-agent-skill PDF processing for document analysis
+/create-agent-skill Web scraping with error handling
+
+
+ +
+
+ /generate_command +
+

+ Create a new custom slash command following conventions and best practices. +

+

Arguments

+

[command purpose and requirements]

+
+ 
/generate_command Security audit for codebase
+/generate_command Automated performance testing
+
+
+ +
+
+ /heal-skill +
+

+ Heal skill documentation by applying corrections discovered during execution. +

+

Arguments

+

[optional: specific issue to fix]

+

Approval Options

+
    +
  1. Apply and commit
    2. +
  2. Apply without commit
    3. +
  3. Revise changes
    4. +
  4. Cancel
    5. +
+
+ 
/heal-skill API endpoint URL changed
+/heal-skill parameter validation error
+
+
+ +
+
+ /plan_review +
+

+ Have multiple specialized agents review a plan in parallel. +

+

Arguments

+

[plan file path or plan content]

+

Review Agents

+
    +
  • dhh-rails-reviewer - Rails conventions
    • +
  • kieran-rails-reviewer - Rails best practices
    • +
  • code-simplicity-reviewer - Simplicity and clarity
    • +
+
+ 
/plan_review plans/user-authentication.md
+
+
+ +
+
+ /report-bug +
+

+ Report a bug in the compounding-engineering plugin. +

+

Arguments

+

[optional: brief description of the bug]

+

Information Collected

+
    +
  • Bug category (Agent/Command/Skill/MCP/Installation)
    • +
  • Specific component name
    • +
  • Actual vs expected behavior
    • +
  • Steps to reproduce
    • +
  • Error messages
    • +
  • Environment info (auto-gathered)
    • +
+
+ 
/report-bug Agent not working
+/report-bug Command failing with timeout
+
+
+ +
+
+ /reproduce-bug +
+

+ Reproduce and investigate a bug using logs and console inspection. +

+

Arguments

+

[GitHub issue number]

+

Investigation Process

+
    +
  1. Read GitHub issue details
    2. +
  2. Launch parallel investigation agents
    3. +
  3. Analyze code for failure points
    4. +
  4. Iterate until root cause found
    5. +
  5. Post findings to GitHub issue
    6. +
+
+ 
/reproduce-bug 142
+
+
+ +
+
+ /triage +
+

+ Triage and categorize findings for the CLI todo system. +

+

Arguments

+

[findings list or source type]

+

User Decisions

+
    +
  • "yes" - Create/update todo file, change status to ready
    • +
  • "next" - Skip and delete from todos
    • +
  • "custom" - Modify and re-present
    • +
+
+
+
+

This command does NOT write code. It only categorizes and creates todo files.

+
+
+
+ 
/triage code-review-findings.txt
+/triage security-audit-results
+
+
+ +
+
+ /resolve_parallel +
+

+ Resolve all TODO comments using parallel processing. +

+

Arguments

+

[optional: specific TODO pattern or file]

+

Process

+
    +
  1. Analyze TODO comments from codebase
    2. +
  2. Create dependency graph (mermaid diagram)
    3. +
  3. Spawn parallel pr-comment-resolver agents
    4. +
  4. Commit and push after completion
    5. +
+
+ 
/resolve_parallel
+/resolve_parallel authentication
+/resolve_parallel src/auth/
+
+
+ +
+
+ /resolve_pr_parallel +
+

+ Resolve all PR comments using parallel processing. +

+

Arguments

+

[optional: PR number or current PR]

+

Process

+
    +
  1. Get all unresolved PR comments
    2. +
  2. Create TodoWrite list
    3. +
  3. Launch parallel pr-comment-resolver agents
    4. +
  4. Commit, resolve threads, and push
    5. +
+
+ 
/resolve_pr_parallel
+/resolve_pr_parallel 123
+
+
+ +
+
+ /resolve_todo_parallel +
+

+ Resolve all pending CLI todos using parallel processing. +

+

Arguments

+

[optional: specific todo ID or pattern]

+

Process

+
    +
  1. Get unresolved TODOs from /todos/*.md
    2. +
  2. Analyze dependencies
    3. +
  3. Spawn parallel agents
    4. +
  4. Commit, mark as resolved, push
    5. +
+
+ 
/resolve_todo_parallel
+/resolve_todo_parallel 042
+/resolve_todo_parallel p1
+
+
+ +
+
+ /prime +
+

+ Prime/setup command for project initialization. +

+
+ 
/prime
+
+
+
+ + + +
+
+
+ + + + + diff --git a/plugins/compounding-engineering/docs/pages/mcp-servers.html b/plugins/compounding-engineering/docs/pages/mcp-servers.html new file mode 100644 index 0000000..08f6678 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/mcp-servers.html @@ -0,0 +1,400 @@ + + + + + + MCP Servers Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

MCP Servers Reference

+

+ Model Context Protocol (MCP) servers extend Claude Code's capabilities with + browser automation and framework documentation lookup. The plugin bundles + 2 MCP servers that start automatically when enabled. +

+ +
+
+
+

Known Issue: Auto-Loading

+

+ MCP servers may not load automatically when the plugin is installed. + See Manual Configuration for the workaround. +

+
+
+ + +
+

Playwright

+

+ Browser automation via @playwright/mcp. Enables taking screenshots, + clicking elements, filling forms, and executing JavaScript in a real browser. +

+ +

Tools Provided

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ToolDescription
browser_navigateNavigate to a URL in the browser
browser_take_screenshotCapture a screenshot of the current page or element
browser_clickClick on an element using CSS selector or text
browser_fill_formFill form fields with values
browser_snapshotGet an accessibility tree snapshot of the page
browser_evaluateExecute JavaScript code in the browser context
+ +

Use Cases

+
    +
  • Design Iteration - Take screenshots for UI comparison
    • +
  • Testing - Automate browser interactions
    • +
  • Debugging - Inspect page state and DOM
    • +
  • Data Extraction - Scrape content from web pages
    • +
+ +

Example Usage

+
+ 
# 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"
+
+ +

Configuration

+
+ 
{
+  "playwright": {
+    "type": "stdio",
+    "command": "npx",
+    "args": ["-y", "@playwright/mcp@latest"],
+    "env": {}
+  }
+}
+
+
+ + +
+

Context7

+

+ Framework documentation lookup via Context7 MCP. Provides access to + documentation for 100+ frameworks and libraries. +

+ +

Tools Provided

+ + + + + + + + + + + + + + + + + +
ToolDescription
resolve-library-idFind the library ID for a framework or package
get-library-docsGet documentation for a specific library
+ +

Supported Frameworks

+

Context7 supports 100+ frameworks including:

+
+
+

Backend

+
    +
  • Ruby on Rails
    • +
  • Django
    • +
  • Laravel
    • +
  • Express
    • +
  • FastAPI
    • +
  • Spring Boot
    • +
+
+
+

Frontend

+
    +
  • React
    • +
  • Vue.js
    • +
  • Angular
    • +
  • Svelte
    • +
  • Next.js
    • +
  • Nuxt
    • +
+
+
+

Mobile

+
    +
  • React Native
    • +
  • Flutter
    • +
  • SwiftUI
    • +
  • Kotlin
    • +
+
+
+

Tools & Libraries

+
    +
  • Tailwind CSS
    • +
  • PostgreSQL
    • +
  • Redis
    • +
  • GraphQL
    • +
  • Prisma
    • +
  • And many more...
    • +
+
+
+ +

Example Usage

+
+ 
# 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?"
+
+ +

Configuration

+
+ 
{
+  "context7": {
+    "type": "http",
+    "url": "https://mcp.context7.com/mcp"
+  }
+}
+
+
+ + +
+

Manual Configuration

+

+ If MCP servers don't auto-load with the plugin, add them manually to your + .claude/settings.json file. +

+ +

Project-Level Configuration

+

Add to .claude/settings.json in your project:

+
+ 
{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}
+
+ +

Global Configuration

+

Add to ~/.claude/settings.json to enable for all projects:

+
+ 
{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}
+
+ +

Requirements

+ + + + + + + + + + + + + + + + + +
ServerRequirement
PlaywrightNode.js 18+ and npx
Context7Internet connection (HTTP endpoint)
+ +

Verifying MCP Servers

+

After configuration, restart Claude Code and verify the servers are loaded:

+
+ 
# 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"
+
+
+ + + +
+
+
+ + + + + + + diff --git a/plugins/compounding-engineering/docs/pages/skills.html b/plugins/compounding-engineering/docs/pages/skills.html new file mode 100644 index 0000000..e86da64 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/skills.html @@ -0,0 +1,591 @@ + + + + + + Skill Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

Skill Reference

+

+ Complete documentation for all 11 intelligent skills. Skills provide deep domain expertise + that Claude Code can invoke on-demand, including references, templates, and workflows. +

+ +
+

How to Use Skills

+
+ 
# In your prompt, reference the skill
+skill: [skill-name]
+
+# Examples
+skill: gemini-imagegen
+skill: dhh-ruby-style
+skill: create-agent-skills
+
+
+ +
+
+
+

Skills vs Agents

+

+ Agents are specialized personas invoked with claude agent [name]. + Skills are bodies of knowledge (references, templates, workflows) invoked with skill: [name]. +

+
+
+ + +
+

Development Tools (7)

+

Skills for code generation, gem writing, and development patterns.

+ +
+
+

create-agent-skills

+ Meta +
+

+ Expert guidance for creating, writing, building, and refining Claude Code Skills. + Use when working with SKILL.md files or authoring new skills. +

+

Capabilities

+
    +
  • Skill architecture and best practices
    • +
  • Router pattern for complex multi-step skills
    • +
  • Progressive disclosure design principles
    • +
  • SKILL.md structure guidance
    • +
  • Asset management (workflows, references, templates, scripts)
    • +
  • XML structure patterns
    • +
+

Workflows Included

+
    +
  • create-new-skill - Start from scratch
    • +
  • add-reference - Add reference documentation
    • +
  • add-template - Add code templates
    • +
  • add-workflow - Add step-by-step procedures
    • +
  • add-script - Add executable scripts
    • +
  • audit-skill - Validate skill structure
    • +
  • verify-skill - Test skill functionality
    • +
+
+ 
skill: create-agent-skills
+
+
+ +
+
+

skill-creator

+ Meta +
+

+ Guide for creating effective skills with a 6-step process. +

+

6-Step Process

+
    +
  1. Understand skill usage patterns with examples
    2. +
  2. Plan reusable skill contents
    3. +
  3. Initialize skill using template
    4. +
  4. Edit skill with clear instructions
    5. +
  5. Package skill into distributable zip
    6. +
  6. Iterate based on testing feedback
    7. +
+
+ 
skill: skill-creator
+
+
+ +
+
+

dhh-ruby-style

+ Rails +
+

+ Write Ruby and Rails code in DHH's distinctive 37signals style. + Triggers on Ruby/Rails code generation or when mentioning DHH, 37signals, Basecamp, HEY. +

+

Key Patterns

+
    +
  • REST Purity - 7 REST actions only
    • +
  • Fat Models - Business logic, authorization, broadcasting in models
    • +
  • Thin Controllers - 1-5 line actions
    • +
  • Current Attributes - Request context
    • +
  • Hotwire/Turbo - Model-level broadcasting
    • +
+

Ruby Syntax Preferences

+
    +
  • Symbol arrays %i[...]
    • +
  • Modern hash syntax
    • +
  • Ternaries for simple conditionals
    • +
  • Bang methods for mutations
    • +
+
+ 
skill: dhh-ruby-style
+
+
+ +
+
+

andrew-kane-gem-writer

+ Ruby +
+

+ Write Ruby gems following Andrew Kane's proven patterns and philosophy. + Based on 100+ gems with 374M+ downloads. +

+

Philosophy

+
    +
  • Simplicity over cleverness
    • +
  • Zero or minimal dependencies
    • +
  • Explicit code over metaprogramming
    • +
  • Rails integration without Rails coupling
    • +
+

Key Patterns

+
    +
  • Class macro DSL for configuration
    • +
  • ActiveSupport.on_load for Rails integration
    • +
  • class << self with attr_accessor
    • +
  • Railtie pattern for hooks
    • +
  • Minitest (no RSpec)
    • +
+

Reference Files

+
    +
  • references/module-organization.md
    • +
  • references/rails-integration.md
    • +
  • references/database-adapters.md
    • +
  • references/testing-patterns.md
    • +
+
+ 
skill: andrew-kane-gem-writer
+
+
+ +
+
+

dspy-ruby

+ AI +
+

+ Build type-safe, composable LLM applications with DSPy.rb. + Use when implementing predictable AI features in Ruby. +

+

Predictor Types

+
    +
  • Predict - Basic inference
    • +
  • ChainOfThought - Reasoning with explanations
    • +
  • ReAct - Tool-using agents with iteration
    • +
  • CodeAct - Dynamic code generation
    • +
+

Supported Providers

+
    +
  • OpenAI (GPT-4, GPT-4o-mini)
    • +
  • Anthropic Claude
    • +
  • Google Gemini
    • +
  • Ollama (free, local)
    • +
  • OpenRouter
    • +
+

Requirements

+ + + + + + + + + + + + + +
OPENAI_API_KEYFor OpenAI provider
ANTHROPIC_API_KEYFor Anthropic provider
GOOGLE_API_KEYFor Gemini provider
+
+ 
skill: dspy-ruby
+
+
+ +
+
+

frontend-design

+ Design +
+

+ Create distinctive, production-grade frontend interfaces. + Generates creative, polished code that avoids generic AI aesthetics. +

+

Design Thinking

+
    +
  • Purpose - What is the interface for?
    • +
  • Tone - What feeling should it evoke?
    • +
  • Constraints - Technical and brand limitations
    • +
  • Differentiation - How to stand out
    • +
+

Focus Areas

+
    +
  • Typography with distinctive font choices
    • +
  • Color & theme coherence with CSS variables
    • +
  • Motion and animation patterns
    • +
  • Spatial composition with asymmetry
    • +
  • Backgrounds (gradients, textures, patterns)
    • +
+
+
+
+

Avoids generic AI aesthetics like Inter fonts, purple gradients, and rounded corners everywhere.

+
+
+
+ 
skill: frontend-design
+
+
+ +
+
+

codify-docs

+ Docs +
+

+ Capture solved problems as categorized documentation with YAML frontmatter for fast lookup. +

+

Auto-Triggers

+

Phrases: "that worked", "it's fixed", "working now", "problem solved"

+

7-Step Process

+
    +
  1. Detect confirmation phrase
    2. +
  2. Gather context (module, symptom, investigation, root cause)
    3. +
  3. Check existing docs for similar issues
    4. +
  4. Generate filename
    5. +
  5. Validate YAML frontmatter
    6. +
  6. Create documentation in category directory
    7. +
  7. Cross-reference related issues
    8. +
+

Categories

+
    +
  • build-errors/
    • +
  • test-failures/
    • +
  • runtime-errors/
    • +
  • performance-issues/
    • +
  • database-issues/
    • +
  • security-issues/
    • +
+
+ 
skill: codify-docs
+
+
+
+ + +
+

Content & Workflow (3)

+

Skills for content editing, task tracking, and parallel development.

+ +
+
+

every-style-editor

+ Content +
+

+ Review and edit copy to ensure adherence to Every's style guide. + Provides systematic line-by-line review. +

+

Four-Phase Review

+
    +
  1. Initial Assessment - Context, type, audience, tone
    2. +
  2. Detailed Line Edit - Sentence structure, punctuation, capitalization
    3. +
  3. Mechanical Review - Spacing, formatting, consistency
    4. +
  4. Recommendations - Actionable improvement suggestions
    5. +
+

Style Checks

+
    +
  • Grammar and punctuation
    • +
  • Style guide compliance
    • +
  • Capitalization rules
    • +
  • Word choice optimization
    • +
  • Formatting consistency
    • +
+
+ 
skill: every-style-editor
+
+
+ +
+
+

file-todos

+ Workflow +
+

+ File-based todo tracking system in the todos/ directory. + Integrates with code review and slash commands. +

+

File Format

+
+ 
# 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
+
+

Status Values

+
    +
  • pending - Needs triage
    • +
  • ready - Approved for work
    • +
  • complete - Done
    • +
+

Priority Values

+
    +
  • p1 - Critical
    • +
  • p2 - Important
    • +
  • p3 - Nice-to-have
    • +
+

YAML Frontmatter

+
+ 
---
+status: pending
+priority: p1
+issue_id: "001"
+tags: [security, authentication]
+dependencies: []
+---
+
+
+ 
skill: file-todos
+
+
+ +
+
+

git-worktree

+ Git +
+

+ Manage Git worktrees for isolated parallel development. + Handles creating, listing, switching, and cleaning up worktrees. +

+

Commands

+
+ 
# 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
+
+

Integration

+
    +
  • Works with /workflows:review for isolated PR analysis
    • +
  • Works with /workflows:work for parallel feature development
    • +
+

Requirements

+
    +
  • Git 2.8+ (for worktree support)
    • +
  • Worktrees stored in .worktrees/ directory
    • +
+
+ 
skill: git-worktree
+
+
+
+ + +
+

Image Generation (1)

+

AI-powered image generation and editing.

+ + +
+ + + +
+
+
+ + + + + From 92d0e23768bdcd5ba4be0252f5e77d2c57d95d50 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Nov 2025 16:39:54 +0000 Subject: [PATCH 03/12] docs: Add /release-docs command, changelog page, and build instructions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add /release-docs command for regenerating documentation site - Add commands/README.md with usage instructions for all commands - Add changelog.html page rendering CHANGELOG.md in HTML format - Add changelog CSS styles to docs.css - Update navigation in all docs pages to include changelog link - Fix command count from 16 to 13 in navigation - Update CLAUDE.md with: - Documentation Site section explaining structure - /release-docs command in update checklist - Instructions for keeping docs up-to-date 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- CLAUDE.md | 95 +++- .../commands/README.md | 105 ++++ .../commands/release-docs.md | 211 ++++++++ .../compounding-engineering/docs/css/docs.css | 162 ++++++ .../docs/pages/agents.html | 8 +- .../docs/pages/changelog.html | 476 ++++++++++++++++++ .../docs/pages/commands.html | 8 +- .../docs/pages/getting-started.html | 1 + .../docs/pages/mcp-servers.html | 8 +- .../docs/pages/skills.html | 8 +- 10 files changed, 1074 insertions(+), 8 deletions(-) create mode 100644 plugins/compounding-engineering/commands/README.md create mode 100644 plugins/compounding-engineering/commands/release-docs.md create mode 100644 plugins/compounding-engineering/docs/pages/changelog.html diff --git a/CLAUDE.md b/CLAUDE.md index 6066b41..2eee544 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -12,9 +12,15 @@ every-marketplace/ └── compounding-engineering/ # The actual plugin ├── .claude-plugin/ │ └── plugin.json # Plugin metadata - ├── agents/ # 17 specialized AI agents - ├── commands/ # 6 slash commands - ├── skills/ # 1 skill (gemini-imagegen) + ├── agents/ # 24 specialized AI agents + ├── commands/ # 13 slash commands (including /release-docs) + ├── skills/ # 11 skills + ├── mcp-servers/ # 2 MCP servers (playwright, context7) + ├── docs/ # Documentation site (static HTML/CSS/JS) + │ ├── index.html # Landing page + │ ├── css/ # Stylesheets (style.css, docs.css) + │ ├── js/ # JavaScript (main.js) + │ └── pages/ # Reference pages (agents, commands, skills, mcp-servers) ├── README.md # Plugin documentation └── CHANGELOG.md # Version history ``` @@ -86,7 +92,21 @@ When adding new functionality, bump the version in: - [ ] `plugins/compounding-engineering/CHANGELOG.md` → document changes - [ ] `CLAUDE.md` → update structure diagram if needed -#### 5. Validate JSON files +#### 5. Rebuild documentation site + +Run the release-docs command to update all documentation pages: + +```bash +claude /release-docs +``` + +This will: +- Update stats on the landing page +- Regenerate reference pages (agents, commands, skills, MCP servers) +- Update the changelog page +- Validate all counts match actual files + +#### 6. Validate JSON files ```bash cat .claude-plugin/marketplace.json | jq . @@ -167,6 +187,73 @@ Each plugin has its own plugin.json with detailed metadata: } ``` +## Documentation Site + +The plugin includes a static documentation site at `plugins/compounding-engineering/docs/`. This site is built with plain HTML/CSS/JS (based on Evil Martians' LaunchKit template) and requires no build step to view. + +### Documentation Structure + +``` +docs/ +├── index.html # Landing page with stats and philosophy +├── css/ +│ ├── style.css # Main styles (LaunchKit-based) +│ └── docs.css # Documentation-specific styles +├── js/ +│ └── main.js # Interactivity (theme toggle, mobile nav) +└── pages/ + ├── getting-started.html # Installation and quick start + ├── agents.html # All 24 agents reference + ├── commands.html # All 13 commands reference + ├── skills.html # All 11 skills reference + ├── mcp-servers.html # MCP servers reference + └── changelog.html # Version history +``` + +### Keeping Docs Up-to-Date + +**IMPORTANT:** After ANY change to agents, commands, skills, or MCP servers, run: + +```bash +claude /release-docs +``` + +This command: +1. Counts all current components +2. Reads all agent/command/skill/MCP files +3. Regenerates all reference pages +4. Updates stats on the landing page +5. Updates the changelog from CHANGELOG.md +6. Validates counts match across all files + +### Manual Updates + +If you need to update docs manually: + +1. **Landing page stats** - Update the numbers in `docs/index.html`: + ```html + 24 + 13 + ``` + +2. **Reference pages** - Each page in `docs/pages/` documents all components in that category + +3. **Changelog** - `docs/pages/changelog.html` mirrors `CHANGELOG.md` in HTML format + +### Viewing Docs Locally + +Since the docs are static HTML, you can view them directly: + +```bash +# Open in browser +open plugins/compounding-engineering/docs/index.html + +# Or start a local server +cd plugins/compounding-engineering/docs +python -m http.server 8000 +# Then visit http://localhost:8000 +``` + ## Testing Changes ### Test Locally diff --git a/plugins/compounding-engineering/commands/README.md b/plugins/compounding-engineering/commands/README.md new file mode 100644 index 0000000..58b08ab --- /dev/null +++ b/plugins/compounding-engineering/commands/README.md @@ -0,0 +1,105 @@ +# Commands + +This directory contains all slash commands for the compounding-engineering plugin. Each `.md` file defines a command that can be invoked via `claude /command-name`. + +## Documentation Management + +### `/release-docs` + +**Purpose:** Build and update the documentation site with current plugin components. + +**Usage:** +```bash +# Full documentation release +claude /release-docs + +# Preview changes without writing files +claude /release-docs --dry-run +``` + +**What it does:** +1. Inventories all current components (agents, commands, skills, MCP servers) +2. Updates `docs/index.html` with accurate stats +3. Regenerates reference pages (`agents.html`, `commands.html`, `skills.html`, `mcp-servers.html`) +4. Updates `changelog.html` with latest version history +5. Ensures counts in `plugin.json` and `marketplace.json` match actual files +6. Validates all JSON files + +**When to run:** +- After adding, removing, or modifying any agent +- After adding, removing, or modifying any command +- After adding, removing, or modifying any skill +- After adding, removing, or modifying any MCP server +- Before releasing a new version + +## Workflow Commands + +### `/plan_review` +Multi-agent plan review running in parallel for thorough analysis. + +### `/resolve_parallel` +Resolve TODO comments in the codebase in parallel. + +### `/resolve_pr_parallel` +Resolve PR comments in parallel. + +### `/resolve_todo_parallel` +Resolve TODO items from a list in parallel. + +## Development Commands + +### `/changelog` +Create engaging changelogs for recent merges to main branch. + +### `/generate_command` +Generate new slash command files from a description. + +### `/create-agent-skill` +Create or edit Claude Code skills with best practices. + +### `/heal-skill` +Fix skill documentation issues and formatting. + +### `/prime` +Prime/setup command for initializing projects. + +### `/reproduce-bug` +Reproduce bugs using logs and console output. + +### `/report-bug` +Report bugs in the compounding-engineering plugin with structured workflow. + +### `/triage` +Triage and prioritize issues. + +## Command File Structure + +Each command file follows this structure: + +```markdown +--- +name: command-name +description: Brief description of what the command does +argument-hint: "[optional arguments description]" +--- + +# Command Title + +Instructions for Claude on how to execute this command... +``` + +## Adding a New Command + +1. Create a new `.md` file in this directory +2. Add the frontmatter with `name`, `description`, and optional `argument-hint` +3. Write detailed instructions for Claude +4. Run `/release-docs` to update documentation +5. Test with `claude /your-command-name` + +## Best Practices + +- Keep command names short and descriptive (use hyphens, not underscores) +- Provide clear step-by-step instructions +- Include examples of expected output +- Document any prerequisites or dependencies +- Use parallel agent invocation when tasks are independent diff --git a/plugins/compounding-engineering/commands/release-docs.md b/plugins/compounding-engineering/commands/release-docs.md new file mode 100644 index 0000000..38215c9 --- /dev/null +++ b/plugins/compounding-engineering/commands/release-docs.md @@ -0,0 +1,211 @@ +--- +name: release-docs +description: Build and update the documentation site with current plugin components +argument-hint: "[optional: --dry-run to preview changes without writing]" +--- + +# Release Documentation Command + +You are a documentation generator for the compounding-engineering plugin. Your job is to ensure the documentation site at `plugins/compounding-engineering/docs/` is always up-to-date with the actual plugin components. + +## Overview + +The documentation site is a static HTML/CSS/JS site based on the Evil Martians LaunchKit template. It needs to be regenerated whenever: + +- Agents are added, removed, or modified +- Commands are added, removed, or modified +- Skills are added, removed, or modified +- MCP servers are added, removed, or modified + +## Step 1: Inventory Current Components + +First, count and list all current components: + +```bash +# Count agents +ls plugins/compounding-engineering/agents/*.md | wc -l + +# Count commands +ls plugins/compounding-engineering/commands/*.md | wc -l + +# Count skills +ls -d plugins/compounding-engineering/skills/*/ 2>/dev/null | wc -l + +# Count MCP servers +ls -d plugins/compounding-engineering/mcp-servers/*/ 2>/dev/null | wc -l +``` + +Read all component files to get their metadata: + +### Agents +For each agent file in `plugins/compounding-engineering/agents/*.md`: +- Extract the frontmatter (name, description) +- Note the category (Review, Research, Workflow, Design, Docs) +- Get key responsibilities from the content + +### Commands +For each command file in `plugins/compounding-engineering/commands/*.md`: +- Extract the frontmatter (name, description, argument-hint) +- Categorize as Workflow or Utility command + +### Skills +For each skill directory in `plugins/compounding-engineering/skills/*/`: +- Read the SKILL.md file for frontmatter (name, description) +- Note any scripts or supporting files + +### MCP Servers +For each MCP server in `plugins/compounding-engineering/mcp-servers/*/`: +- Read the configuration and README +- List the tools provided + +## Step 2: Update Documentation Pages + +### 2a. Update `docs/index.html` + +Update the stats section with accurate counts: +```html +
+
+ [AGENT_COUNT] + Specialized Agents +
+ +
+``` + +Ensure the component summary sections list key components accurately. + +### 2b. Update `docs/pages/agents.html` + +Regenerate the complete agents reference page: +- Group agents by category (Review, Research, Workflow, Design, Docs) +- Include for each agent: + - Name and description + - Key responsibilities (bullet list) + - Usage example: `claude agent [agent-name] "your message"` + - Use cases + +### 2c. Update `docs/pages/commands.html` + +Regenerate the complete commands reference page: +- Group commands by type (Workflow, Utility) +- Include for each command: + - Name and description + - Arguments (if any) + - Process/workflow steps + - Example usage + +### 2d. Update `docs/pages/skills.html` + +Regenerate the complete skills reference page: +- Group skills by category (Development Tools, Content & Workflow, Image Generation) +- Include for each skill: + - Name and description + - Usage: `claude skill [skill-name]` + - Features and capabilities + +### 2e. Update `docs/pages/mcp-servers.html` + +Regenerate the MCP servers reference page: +- For each server: + - Name and purpose + - Tools provided + - Configuration details + - Supported frameworks/services + +## Step 3: Update Metadata Files + +Ensure counts are consistent across: + +1. **`plugins/compounding-engineering/.claude-plugin/plugin.json`** + - Update `description` with correct counts + - Update `components` object with counts + - Update `agents`, `commands` arrays with current items + +2. **`.claude-plugin/marketplace.json`** + - Update plugin `description` with correct counts + +3. **`plugins/compounding-engineering/README.md`** + - Update intro paragraph with counts + - Update component lists + +## Step 4: Validate + +Run validation checks: + +```bash +# Validate JSON files +cat .claude-plugin/marketplace.json | jq . +cat plugins/compounding-engineering/.claude-plugin/plugin.json | jq . + +# Verify counts match +echo "Agents in files: $(ls plugins/compounding-engineering/agents/*.md | wc -l)" +grep -o "[0-9]* specialized agents" plugins/compounding-engineering/docs/index.html + +echo "Commands in files: $(ls plugins/compounding-engineering/commands/*.md | wc -l)" +grep -o "[0-9]* slash commands" plugins/compounding-engineering/docs/index.html +``` + +## Step 5: Report Changes + +Provide a summary of what was updated: + +``` +## Documentation Release Summary + +### Component Counts +- Agents: X (previously Y) +- Commands: X (previously Y) +- Skills: X (previously Y) +- MCP Servers: X (previously Y) + +### Files Updated +- docs/index.html - Updated stats and component summaries +- docs/pages/agents.html - Regenerated with X agents +- docs/pages/commands.html - Regenerated with X commands +- docs/pages/skills.html - Regenerated with X skills +- docs/pages/mcp-servers.html - Regenerated with X servers +- plugin.json - Updated counts and component lists +- marketplace.json - Updated description +- README.md - Updated component lists + +### New Components Added +- [List any new agents/commands/skills] + +### Components Removed +- [List any removed agents/commands/skills] +``` + +## Dry Run Mode + +If `--dry-run` is specified: +- Perform all inventory and validation steps +- Report what WOULD be updated +- Do NOT write any files +- Show diff previews of proposed changes + +## Error Handling + +- If component files have invalid frontmatter, report the error and skip +- If JSON validation fails, report and abort +- Always maintain a valid state - don't partially update + +## Post-Release + +After successful release: +1. Suggest updating CHANGELOG.md with documentation changes +2. Remind to commit with message: `docs: Update documentation site to match plugin components` +3. Remind to push changes + +## Usage Examples + +```bash +# Full documentation release +claude /release-docs + +# Preview changes without writing +claude /release-docs --dry-run + +# After adding new agents +claude /release-docs +``` diff --git a/plugins/compounding-engineering/docs/css/docs.css b/plugins/compounding-engineering/docs/css/docs.css index c4a9df8..2e89ca5 100644 --- a/plugins/compounding-engineering/docs/css/docs.css +++ b/plugins/compounding-engineering/docs/css/docs.css @@ -511,3 +511,165 @@ z-index: -1; } } + +/* ============================================ + Changelog Styles + ============================================ */ + +.version-section { + margin-bottom: var(--space-xxl); + padding-bottom: var(--space-xl); + border-bottom: 1px solid var(--color-border); +} + +.version-section:last-child { + border-bottom: none; +} + +.version-header { + display: flex; + align-items: center; + gap: var(--space-m); + margin-bottom: var(--space-l); + flex-wrap: wrap; +} + +.version-header h2 { + margin: 0; + padding: 0; + border: none; + font-size: var(--font-size-xl); + color: var(--color-text-primary); +} + +.version-date { + font-size: var(--font-size-s); + color: var(--color-text-tertiary); + background-color: var(--color-surface); + padding: var(--space-xs) var(--space-m); + border-radius: var(--radius-s); +} + +.version-badge { + font-size: var(--font-size-xs); + font-weight: 600; + padding: var(--space-xs) var(--space-m); + border-radius: var(--radius-s); + background-color: var(--color-accent); + color: white; +} + +.version-badge.major { + background-color: var(--color-warning); +} + +.version-description { + font-size: var(--font-size-m); + color: var(--color-text-secondary); + margin-bottom: var(--space-l); + font-style: italic; +} + +.changelog-category { + margin-bottom: var(--space-l); + padding: var(--space-l); + background-color: var(--color-surface); + border-radius: var(--radius-m); + border-left: 4px solid var(--color-border); +} + +.changelog-category h3 { + margin: 0 0 var(--space-m) 0; + font-size: var(--font-size-m); + display: flex; + align-items: center; + gap: var(--space-s); +} + +.changelog-category h3 i { + font-size: var(--font-size-s); +} + +.changelog-category h4 { + margin: var(--space-l) 0 var(--space-s) 0; + font-size: var(--font-size-s); + color: var(--color-text-secondary); +} + +.changelog-category ul { + margin: 0; + padding-left: var(--space-xl); +} + +.changelog-category li { + margin-bottom: var(--space-s); +} + +.changelog-category.added { + border-left-color: var(--color-success); +} + +.changelog-category.added h3 { + color: var(--color-success); +} + +.changelog-category.improved { + border-left-color: var(--color-accent); +} + +.changelog-category.improved h3 { + color: var(--color-accent); +} + +.changelog-category.changed { + border-left-color: var(--color-warning); +} + +.changelog-category.changed h3 { + color: var(--color-warning); +} + +.changelog-category.fixed { + border-left-color: var(--color-error); +} + +.changelog-category.fixed h3 { + color: var(--color-error); +} + +.version-summary { + margin-top: var(--space-l); +} + +.version-summary h4 { + margin-bottom: var(--space-m); +} + +.version-summary table { + width: 100%; + max-width: 400px; + border-collapse: collapse; + font-size: var(--font-size-s); +} + +.version-summary th, +.version-summary td { + padding: var(--space-s) var(--space-m); + text-align: left; + border-bottom: 1px solid var(--color-border); +} + +.version-summary th { + font-weight: 600; + background-color: var(--color-surface); +} + +.version-summary .positive { + color: var(--color-success); + font-weight: 600; +} + +.version-summary .negative { + color: var(--color-error); + font-weight: 600; +} diff --git a/plugins/compounding-engineering/docs/pages/agents.html b/plugins/compounding-engineering/docs/pages/agents.html index ec51834..4687f3a 100644 --- a/plugins/compounding-engineering/docs/pages/agents.html +++ b/plugins/compounding-engineering/docs/pages/agents.html @@ -34,11 +34,17 @@

Reference

+
+

Resources

+ +

On This Page

    diff --git a/plugins/compounding-engineering/docs/pages/changelog.html b/plugins/compounding-engineering/docs/pages/changelog.html new file mode 100644 index 0000000..72f6c45 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/changelog.html @@ -0,0 +1,476 @@ + + + + + + Changelog - Compounding Engineering + + + + + + + + + + +
    +
    + + +
    +
    + + +
    + +
    +

    Changelog

    +

    + All notable changes to the compounding-engineering plugin. This project follows + Semantic Versioning and + Keep a Changelog conventions. +

    + + +
    +
    +

    v2.5.0

    + 2024-11-25 +
    + +
    +

    Added

    +
      +
    • + /report-bug command - 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. +
      • +
    +
    +
    + + +
    +
    +

    v2.4.1

    + 2024-11-24 +
    + +
    +

    Improved

    +
      +
    • + design-iterator agent - 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. +
      • +
    +
    +
    + + +
    +
    +

    v2.4.0

    + 2024-11-24 +
    + +
    +

    Fixed

    +
      +
    • + MCP Configuration - Moved MCP servers back to plugin.json + following working examples from anthropics/life-sciences plugins. +
      • +
    • + Context7 URL - Updated to use HTTP type with correct endpoint URL. +
      • +
    +
    +
    + + +
    +
    +

    v2.3.0

    + 2024-11-24 +
    + +
    +

    Changed

    +
      +
    • + MCP Configuration - Moved MCP servers from inline plugin.json + to separate .mcp.json file per Claude Code best practices. +
      • +
    +
    +
    + + +
    +
    +

    v2.2.1

    + 2024-11-24 +
    + +
    +

    Fixed

    +
      +
    • + Playwright MCP Server - Added missing "type": "stdio" field + required for MCP server configuration to load properly. +
      • +
    +
    +
    + + +
    +
    +

    v2.2.0

    + 2024-11-24 +
    + +
    +

    Added

    +
      +
    • + Context7 MCP Server - Bundled Context7 for instant framework documentation + lookup. Provides up-to-date docs for Rails, React, Next.js, and 100+ other frameworks. +
      • +
    +
    +
    + + +
    +
    +

    v2.1.0

    + 2024-11-24 +
    + +
    +

    Added

    +
      +
    • + Playwright MCP Server - Bundled @playwright/mcp for browser + automation across all projects. Provides screenshot, navigation, click, fill, and evaluate tools. +
      • +
    +
    + +
    +

    Changed

    +
      +
    • Replaced all Puppeteer references with Playwright across agents and commands: +
        +
      • bug-reproduction-validator agent
        • +
      • design-iterator agent
        • +
      • design-implementation-reviewer agent
        • +
      • figma-design-sync agent
        • +
      • generate_command command
        • +
      +
      • +
    +
    +
    + + +
    +
    +

    v2.0.2

    + 2024-11-24 +
    + +
    +

    Changed

    +
      +
    • + design-iterator agent - Updated description to emphasize proactive usage + when design work isn't coming together on first attempt. +
      • +
    +
    +
    + + +
    +
    +

    v2.0.1

    + 2024-11-24 +
    + +
    +

    Added

    +
      +
    • CLAUDE.md - Project instructions with versioning requirements
      • +
    • docs/solutions/plugin-versioning-requirements.md - Workflow documentation
      • +
    +
    +
    + + +
    +
    +

    v2.0.0

    + 2024-11-24 + Major Release +
    + +

    + Major reorganization consolidating agents, commands, and skills from multiple sources into + a single, well-organized plugin. +

    + +
    +

    Added

    + +

    New Agents (7)

    +
      +
    • design-iterator - Iteratively refine UI components through systematic design iterations
      • +
    • design-implementation-reviewer - Verify UI implementations match Figma design specifications
      • +
    • figma-design-sync - Synchronize web implementations with Figma designs
      • +
    • bug-reproduction-validator - Systematically reproduce and validate bug reports
      • +
    • spec-flow-analyzer - Analyze user flows and identify gaps in specifications
      • +
    • lint - Run linting and code quality checks on Ruby and ERB files
      • +
    • ankane-readme-writer - Create READMEs following Ankane-style template for Ruby gems
      • +
    + +

    New Commands (9)

    +
      +
    • /changelog - Create engaging changelogs for recent merges
      • +
    • /plan_review - Multi-agent plan review in parallel
      • +
    • /resolve_parallel - Resolve TODO comments in parallel
      • +
    • /resolve_pr_parallel - Resolve PR comments in parallel
      • +
    • /reproduce-bug - Reproduce bugs using logs and console
      • +
    • /prime - Prime/setup command
      • +
    • /create-agent-skill - Create or edit Claude Code skills
      • +
    • /heal-skill - Fix skill documentation issues
      • +
    • /workflows:codify - Document solved problems for knowledge base
      • +
    + +

    New Skills (10)

    +
      +
    • andrew-kane-gem-writer - Write Ruby gems following Andrew Kane's patterns
      • +
    • codify-docs - Capture solved problems as categorized documentation
      • +
    • create-agent-skills - Expert guidance for creating Claude Code skills
      • +
    • dhh-ruby-style - Write Ruby/Rails code in DHH's 37signals style
      • +
    • dspy-ruby - Build type-safe LLM applications with DSPy.rb
      • +
    • every-style-editor - Review copy for Every's style guide compliance
      • +
    • file-todos - File-based todo tracking system
      • +
    • frontend-design - Create production-grade frontend interfaces
      • +
    • git-worktree - Manage Git worktrees for parallel development
      • +
    • skill-creator - Guide for creating effective Claude Code skills
      • +
    +
    + +
    +

    Changed

    +

    Agents Reorganized by Category

    +
      +
    • review/ (10 agents) - Code quality, security, performance reviewers
      • +
    • research/ (4 agents) - Documentation, patterns, history analysis
      • +
    • design/ (3 agents) - UI/design review and iteration
      • +
    • workflow/ (6 agents) - PR resolution, bug validation, linting
      • +
    • docs/ (1 agent) - README generation
      • +
    +
    + +
    +

    Summary

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Componentv1.1.0v2.0.0Change
    Agents1724+7
    Commands615+9
    Skills111+10
    +
    +
    + + +
    +
    +

    v1.1.0

    + 2024-11-22 +
    + +
    +

    Added

    +
      +
    • + gemini-imagegen Skill +
        +
      • Text-to-image generation with Google's Gemini API
        • +
      • Image editing and manipulation
        • +
      • Multi-turn refinement via chat interface
        • +
      • Multiple reference image composition (up to 14 images)
        • +
      • Model support: gemini-2.5-flash-image and gemini-3-pro-image-preview
        • +
      +
      • +
    +
    + +
    +

    Fixed

    +
      +
    • Corrected component counts in documentation (17 agents, not 15)
      • +
    +
    +
    + + +
    +
    +

    v1.0.0

    + 2024-10-09 + Initial Release +
    + +

    + Initial release of the compounding-engineering plugin. +

    + +
    +

    Added

    + +

    17 Specialized Agents

    + +

    Code Review (5)

    +
      +
    • kieran-rails-reviewer - Rails code review with strict conventions
      • +
    • kieran-python-reviewer - Python code review with quality standards
      • +
    • kieran-typescript-reviewer - TypeScript code review
      • +
    • dhh-rails-reviewer - Rails review from DHH's perspective
      • +
    • code-simplicity-reviewer - Final pass for simplicity and minimalism
      • +
    + +

    Analysis & Architecture (4)

    +
      +
    • architecture-strategist - Architectural decisions and compliance
      • +
    • pattern-recognition-specialist - Design pattern analysis
      • +
    • security-sentinel - Security audits and vulnerability assessments
      • +
    • performance-oracle - Performance analysis and optimization
      • +
    + +

    Research (4)

    +
      +
    • framework-docs-researcher - Framework documentation research
      • +
    • best-practices-researcher - External best practices gathering
      • +
    • git-history-analyzer - Git history and code evolution analysis
      • +
    • repo-research-analyst - Repository structure and conventions
      • +
    + +

    Workflow (3)

    +
      +
    • every-style-editor - Every's style guide compliance
      • +
    • pr-comment-resolver - PR comment resolution
      • +
    • feedback-codifier - Feedback pattern codification
      • +
    + +

    6 Slash Commands

    +
      +
    • /plan - Create implementation plans
      • +
    • /review - Comprehensive code reviews
      • +
    • /work - Execute work items systematically
      • +
    • /triage - Triage and prioritize issues
      • +
    • /resolve_todo_parallel - Resolve TODOs in parallel
      • +
    • /generate_command - Generate new slash commands
      • +
    + +

    Infrastructure

    +
      +
    • MIT license
      • +
    • Plugin manifest (plugin.json)
      • +
    • Pre-configured permissions for Rails development
      • +
    +
    +
    + +
    +
    +
    + + + diff --git a/plugins/compounding-engineering/docs/pages/commands.html b/plugins/compounding-engineering/docs/pages/commands.html index 3992583..cd74cde 100644 --- a/plugins/compounding-engineering/docs/pages/commands.html +++ b/plugins/compounding-engineering/docs/pages/commands.html @@ -34,11 +34,17 @@

    Reference

+
+

Resources

+ +

On This Page

    diff --git a/plugins/compounding-engineering/docs/pages/getting-started.html b/plugins/compounding-engineering/docs/pages/getting-started.html index f844fc0..c42314e 100644 --- a/plugins/compounding-engineering/docs/pages/getting-started.html +++ b/plugins/compounding-engineering/docs/pages/getting-started.html @@ -58,6 +58,7 @@
  • Command Reference
  • Skill Reference
  • MCP Servers
    • +
  • Changelog
diff --git a/plugins/compounding-engineering/docs/pages/mcp-servers.html b/plugins/compounding-engineering/docs/pages/mcp-servers.html index 08f6678..6a796fe 100644 --- a/plugins/compounding-engineering/docs/pages/mcp-servers.html +++ b/plugins/compounding-engineering/docs/pages/mcp-servers.html @@ -34,11 +34,17 @@

Reference

+
+

Resources

+ +

On This Page

    diff --git a/plugins/compounding-engineering/docs/pages/skills.html b/plugins/compounding-engineering/docs/pages/skills.html index e86da64..58a4c9a 100644 --- a/plugins/compounding-engineering/docs/pages/skills.html +++ b/plugins/compounding-engineering/docs/pages/skills.html @@ -34,11 +34,17 @@

    Reference

+
+

Resources

+ +

On This Page