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

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

+
+ +
+
+
+ + +
+
+

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

+ +
+
+
+ + +
+ + + 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. +
  3. Sets up a git worktree for isolated analysis
  4. +
  5. Runs 10+ review agents in parallel
  6. +
  7. Synthesizes findings by severity (P1/P2/P3)
  8. +
  9. Creates structured todo files for each finding
  10. +
  11. Generates a summary report
  12. +
+ +

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

+
+
+
+ + + +
+
+
+ + + + +