diff --git a/docs/css/docs.css b/docs/css/docs.css deleted file mode 100644 index 2e89ca5..0000000 --- a/docs/css/docs.css +++ /dev/null @@ -1,675 +0,0 @@ -/* 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; - } -} - -/* ============================================ - 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/docs/css/style.css b/docs/css/style.css deleted file mode 100644 index 3bc9074..0000000 --- a/docs/css/style.css +++ /dev/null @@ -1,2886 +0,0 @@ -/* Compounding Engineering Documentation Styles */ -/* Based on LaunchKit template by Evil Martians */ - -/* ============================================ - CSS Variables & Theme Configuration - ============================================ */ - -:root { - /* Theme configuration */ - --theme-hue: 243; - --theme-saturation: 1; - --theme-contrast: 0.71; - - /* 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: 64px; - line-height: 1.1; - letter-spacing: -0.045em; - font-weight: 750; - background: linear-gradient(135deg, var(--color-text-primary), var(--color-text-secondary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -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: 19px; line-height: 30px; opacity: 0.9; } -.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: 14px 28px; - font-size: var(--font-size-m); - font-weight: 600; - font-family: inherit; - text-decoration: none; - border: none; - border-radius: var(--radius-m); - cursor: pointer; - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); -} - -.button.compact { - padding: var(--space-s) var(--space-m); - font-size: var(--font-size-s); - border-radius: var(--radius-s); -} - -.button.primary { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1); - position: relative; - overflow: hidden; -} - -.button.primary:hover { - background: linear-gradient(135deg, var(--color-accent-hover), var(--color-accent)); - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35); -} - -.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-primary); - border: 1.5px solid var(--color-border-strong); -} - -.button.tertiary:hover { - background-color: var(--color-surface); - border-color: var(--color-accent); - color: var(--color-accent); - transform: translateY(-1px); -} - -.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: 64px 0 80px 0; -} - -.eyebrow { - display: inline-flex; - align-items: center; - gap: 10px; - padding: 8px 20px; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - color: var(--color-accent); - font-size: 14px; - font-weight: 600; - border-radius: 100px; - margin-bottom: 28px; - text-decoration: none; - border: 1px solid rgba(129, 140, 248, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.15); -} - -.eyebrow:hover { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); - transform: translateY(-2px); - box-shadow: 0 4px 16px rgba(129, 140, 248, 0.25); - border-color: var(--color-accent); -} - -/* Hero Section Enhancements */ -.hero-section { - position: relative; - overflow: hidden; -} - -.hero-decoration { - position: absolute; - top: -200px; - left: 50%; - transform: translateX(-50%); - width: 800px; - height: 800px; - background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); - opacity: 0.15; - pointer-events: none; - z-index: -1; -} - -/* ============================================ - Stats Section - ============================================ */ - -.stats-section { - padding: 64px 0; - position: relative; -} - -.stats-section::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 600px; - height: 600px; - background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); - opacity: 0.1; - pointer-events: none; - z-index: -1; -} - -.stats-container { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; - max-width: 1000px; - margin: 0 auto; -} - -@media (min-width: 768px) { - .stats-container { - grid-template-columns: repeat(4, 1fr); - gap: 24px; - } -} - -.stat-card { - text-align: center; - padding: 36px 24px; - background: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid transparent; - background-image: - linear-gradient(var(--color-background), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - position: relative; - overflow: hidden; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - cursor: default; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.stat-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--color-accent), transparent); - opacity: 0; - transition: opacity 0.35s ease; -} - -.stat-card:hover { - transform: translateY(-2px); - border-color: var(--color-accent); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); -} - -.stat-card:hover::before { - opacity: 1; -} - -.stat-card:hover .stat-icon { - transform: scale(1.15) translateY(-2px); - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 8px 16px rgba(129, 140, 248, 0.3); -} - -.stat-card:hover .stat-number { - transform: scale(1.08); - filter: brightness(1.1); -} - -.stat-icon { - width: 56px; - height: 56px; - margin: 0 auto 20px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - border-radius: 14px; - font-size: 24px; - color: var(--color-accent); - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15); -} - -.stat-number { - font-size: 64px; - font-weight: 800; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - line-height: 1; - margin-bottom: 8px; - letter-spacing: -0.03em; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - font-variant-numeric: tabular-nums; -} - -.stat-label { - font-size: 14px; - color: var(--color-text-secondary); - font-weight: 600; - letter-spacing: 0.02em; - line-height: 1.5; - text-transform: capitalize; -} - -/* ============================================ - 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: 24px; - margin: var(--space-xl) 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); - gap: 28px; - } - .grid.columns-3 { - grid-template-columns: repeat(2, 1fr); - gap: 24px; - } -} - -@media (min-width: 1024px) { - .grid.columns-3 { - grid-template-columns: repeat(3, 1fr); - } - .grid.columns-2 { - gap: 32px; - } -} - -.full-width { - grid-column: 1 / -1; -} - -/* ============================================ - Agent Cards - ============================================ */ - -.agent-category { - margin-bottom: 64px; - position: relative; -} - -.agent-category::before { - content: ''; - position: absolute; - top: 0; - left: -20px; - width: 3px; - height: 100%; - background: linear-gradient(180deg, var(--color-accent), transparent); - opacity: 0.2; - border-radius: 2px; -} - -.agent-category h3 { - display: flex; - align-items: center; - gap: var(--space-m); - margin-bottom: var(--space-xl); - padding: var(--space-l) var(--space-xl); - background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface)); - border-left: 4px solid var(--color-accent); - border-radius: var(--radius-m); - color: var(--color-text-primary); - font-size: 24px; - font-weight: 700; - letter-spacing: -0.02em; - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.08); - position: relative; - overflow: hidden; -} - -.agent-category h3::after { - content: ''; - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 100px; - background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.05)); - pointer-events: none; -} - -.agent-category h3 i { - color: var(--color-accent); - font-size: 28px; - flex-shrink: 0; - filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3)); -} - -.agent-card { - padding: var(--space-xl); - background-color: var(--color-surface); - border-radius: var(--radius-l); - border: 1px solid var(--color-border); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; -} - -.agent-card::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.agent-card:hover { - border-color: var(--color-accent); - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.15); -} - -.agent-card:hover::before { - opacity: 0.5; -} - -.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: 15px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.01em; - position: relative; - z-index: 1; -} - -.agent-badge { - padding: 6px 12px; - font-size: 11px; - font-weight: 700; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - color: var(--color-accent); - border-radius: 6px; - text-transform: uppercase; - letter-spacing: 0.08em; - box-shadow: 0 2px 4px rgba(129, 140, 248, 0.2); - border: 1px solid rgba(129, 140, 248, 0.3); - white-space: nowrap; - transition: all 0.2s ease; -} - -.agent-badge.critical { - background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1)); - color: var(--color-error); - box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25); - border-color: rgba(239, 68, 68, 0.4); -} - -.agent-card:hover .agent-badge { - transform: scale(1.05); - box-shadow: 0 4px 8px rgba(129, 140, 248, 0.3); -} - -.agent-card:hover .agent-badge.critical { - box-shadow: 0 4px 8px rgba(239, 68, 68, 0.35); -} - -.agent-card:hover .agent-name { - color: var(--color-accent); -} - -.agent-description { - font-size: 14px; - color: var(--color-text-secondary); - margin: 0 0 var(--space-m) 0; - line-height: 1.65; - position: relative; - z-index: 1; -} - -.agent-usage { - display: block; - font-family: var(--font-mono); - font-size: 13px; - color: #a6adc8; - background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%); - padding: 12px 16px; - border-radius: var(--radius-m); - border: 1px solid rgba(129, 140, 248, 0.1); - position: relative; - z-index: 1; - transition: all 0.2s ease; -} - -.agent-usage:hover { - border-color: rgba(129, 140, 248, 0.3); - background: linear-gradient(135deg, #242438 0%, #1e1e2e 100%); -} - -/* ============================================ - Command Cards - ============================================ */ - -.command-category { - margin-bottom: var(--space-xxl); -} - -.command-category h3 { - display: flex; - align-items: center; - gap: var(--space-m); - margin-bottom: var(--space-xl); - padding: var(--space-m) var(--space-l); - background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.02)); - border-left: 3px solid var(--color-accent); - border-radius: var(--radius-s); - color: var(--color-text-primary); - font-family: var(--font-mono); - font-size: 18px; - font-weight: 600; - letter-spacing: -0.01em; - position: relative; -} - -.command-category h3::before { - content: '//'; - color: rgba(129, 140, 248, 0.4); - font-weight: 400; - margin-right: var(--space-xs); -} - -.command-category h3 i { - color: var(--color-accent); - filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.4)); -} - -.command-card { - padding: var(--space-xl); - background: linear-gradient(135deg, rgba(30, 30, 46, 0.6), rgba(24, 24, 37, 0.5)); - border-radius: var(--radius-l); - border: 1.5px solid rgba(129, 140, 248, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.05), - inset 0 -1px 0 rgba(0, 0, 0, 0.2), - 0 2px 8px rgba(0, 0, 0, 0.3); -} - -.command-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, transparent, var(--color-accent), transparent); - opacity: 0.4; -} - -.command-card:hover { - border-color: var(--color-accent); - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.2); -} - -.command-card:hover .command-name { - color: rgba(129, 140, 248, 1); - text-shadow: 0 0 24px rgba(129, 140, 248, 0.5); -} - -.command-card:hover .command-type-badge { - background: linear-gradient(135deg, var(--color-accent), rgba(129, 140, 248, 0.6)); - color: var(--color-on-accent); - border-color: var(--color-accent); - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4); -} - -.command-card:hover::after { - opacity: 0.15; -} - -.command-header { - margin-bottom: var(--space-m); - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-m); -} - -.command-name { - font-family: var(--font-mono); - font-size: 15px; - font-weight: 600; - color: var(--color-accent); - background: none; - padding: 0; - letter-spacing: -0.01em; - text-shadow: 0 0 20px rgba(129, 140, 248, 0.3); - display: flex; - align-items: center; - gap: 8px; - flex: 1; -} - -.command-name::before { - content: '$'; - color: rgba(129, 140, 248, 0.5); - font-weight: 400; - font-size: 14px; -} - -.command-type-badge { - padding: 3px 8px; - font-family: var(--font-mono); - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - border-radius: 3px; - background: linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(129, 140, 248, 0.08)); - color: rgba(129, 140, 248, 0.8); - border: 1px solid rgba(129, 140, 248, 0.25); - white-space: nowrap; - flex-shrink: 0; -} - -.command-description { - font-size: 14px; - color: rgba(203, 213, 225, 0.85); - margin: 0; - line-height: 1.7; - letter-spacing: 0.01em; -} - -/* ============================================ - Skill Cards - ============================================ */ - -.skill-category { - margin-bottom: 72px; - position: relative; - padding: 24px; - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.02) 0%, - transparent 50%); - border-radius: var(--radius-l); - border: 1px solid transparent; - transition: all 0.3s ease; -} - -.skill-category::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 4px; - height: 100%; - background: linear-gradient(180deg, var(--color-accent), transparent); - opacity: 0.3; - border-radius: 2px; - transition: opacity 0.3s ease; -} - -.skill-category:hover::before { - opacity: 0.6; -} - -.skill-category h3 { - display: flex; - align-items: center; - gap: var(--space-m); - margin-bottom: var(--space-xl); - padding: var(--space-l) var(--space-xl); - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.1) 0%, - rgba(129, 140, 248, 0.05) 50%, - var(--color-surface) 100%); - border-left: 4px solid var(--color-accent); - border-radius: var(--radius-m); - color: var(--color-text-primary); - font-size: 22px; - font-weight: 700; - letter-spacing: -0.02em; - box-shadow: - 0 2px 8px rgba(129, 140, 248, 0.12), - inset 0 1px 0 rgba(255, 255, 255, 0.05); - transition: all 0.3s ease; - cursor: default; -} - -.skill-category h3:hover { - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.15) 0%, - rgba(129, 140, 248, 0.08) 50%, - var(--color-surface) 100%); - box-shadow: - 0 4px 12px rgba(129, 140, 248, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.skill-category h3 i { - color: var(--color-accent); - font-size: 24px; -} - -.skill-card { - padding: 28px; - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-l); - border: 1.5px solid var(--color-border); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); -} - -.skill-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-accent), transparent); - opacity: 0; - transition: opacity 0.3s ease; -} - -.skill-card::after { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 40px; - height: 40px; - background: linear-gradient(135deg, transparent 50%, var(--color-accent) 50%); - opacity: 0.1; - pointer-events: none; - transition: opacity 0.3s ease; -} - -.skill-card:hover { - border-color: var(--color-accent); - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.15); -} - -.skill-card:hover::before { - opacity: 1; -} - -.skill-card:hover::after { - opacity: 0.3; -} - -.skill-card.featured { - background: linear-gradient(135deg, - rgba(129, 140, 248, 0.12) 0%, - rgba(129, 140, 248, 0.06) 50%, - var(--color-surface) 100%); - border-color: var(--color-accent); - box-shadow: - 0 4px 16px rgba(129, 140, 248, 0.25), - 0 0 60px rgba(129, 140, 248, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - position: relative; - overflow: hidden; -} - -.skill-card.featured::before { - background: linear-gradient(90deg, - var(--color-accent) 0%, - rgba(129, 140, 248, 0.6) 100%); - opacity: 1; - height: 4px; -} - -.skill-card.featured:hover { - box-shadow: 0 10px 28px rgba(129, 140, 248, 0.2); - transform: translateY(-2px); -} - -.skill-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-m); - margin-bottom: var(--space-l); - padding-bottom: var(--space-m); - border-bottom: 1px solid rgba(129, 140, 248, 0.1); - position: relative; -} - -.skill-header::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 60px; - height: 2px; - background: linear-gradient(90deg, var(--color-accent), transparent); - opacity: 0; - transition: all 0.3s ease; -} - -.skill-card:hover .skill-header::after { - opacity: 1; - width: 120px; -} - -.skill-name { - font-family: var(--font-mono); - font-size: 16px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.01em; - display: flex; - align-items: center; - gap: 8px; - position: relative; - z-index: 1; -} - -.skill-name::before { - content: '◆'; - color: var(--color-accent); - font-size: 10px; - opacity: 0.6; - transition: all 0.3s ease; -} - -.skill-card:hover .skill-name { - color: var(--color-accent); -} - -.skill-card:hover .skill-name::before { - opacity: 1; - transform: scale(1.2); -} - -.skill-badge { - padding: 6px 12px; - font-size: 11px; - font-weight: 600; - background: var(--color-accent-light); - color: var(--color-accent); - border-radius: 6px; - text-transform: uppercase; - letter-spacing: 0.05em; - white-space: nowrap; - transition: all 0.2s ease; -} - -.skill-badge.highlight { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4); - border-color: var(--color-accent); -} - -.skill-card:hover .skill-badge { - background: var(--color-accent); - color: var(--color-on-accent); -} - -.skill-description { - font-size: 14px; - color: var(--color-text-secondary); - margin: 0 0 var(--space-l) 0; - line-height: 1.65; - position: relative; - z-index: 1; - letter-spacing: 0.01em; -} - -.skill-features { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: var(--space-l); - position: relative; - z-index: 1; -} - -.feature-item { - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - font-weight: 600; - color: var(--color-success); - background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08)); - padding: 8px 14px; - border-radius: 20px; - border: 1px solid rgba(16, 185, 129, 0.3); - transition: all 0.2s ease; - letter-spacing: 0.01em; -} - -.feature-item i { - font-size: 11px; - filter: drop-shadow(0 1px 2px rgba(16, 185, 129, 0.3)); -} - -.feature-item:hover { - background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15)); - border-color: rgba(16, 185, 129, 0.5); - transform: translateY(-1px); - box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2); -} - -.skill-usage { - display: block; - font-family: var(--font-mono); - font-size: 13px; - color: #a6adc8; - background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%); - padding: 14px 18px; - border-radius: var(--radius-m); - margin-bottom: var(--space-s); - border: 1px solid rgba(129, 140, 248, 0.15); - position: relative; - z-index: 1; - transition: all 0.2s ease; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.skill-usage:hover { - border-color: rgba(129, 140, 248, 0.3); - background: linear-gradient(135deg, #242438 0%, #1e1e2e 100%); - transform: translateX(2px); -} - -.skill-note { - font-size: 12px; - color: var(--color-text-tertiary); - margin: 0; - font-style: italic; - position: relative; - z-index: 1; - padding: 8px 12px; - background: rgba(255, 165, 0, 0.08); - border-left: 3px solid rgba(255, 165, 0, 0.4); - border-radius: 4px; -} - -.skill-note::before { - content: '⚠'; - margin-right: 6px; - color: rgba(255, 165, 0, 0.8); -} - -/* ============================================ - MCP Cards - ============================================ */ - -.mcp-card { - padding: 36px; - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-l); - border: 1.5px solid transparent; - background-image: - linear-gradient(135deg, var(--color-surface), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 4px 8px rgba(0, 0, 0, 0.08), - 0 8px 24px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.05); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; -} - -.mcp-card::after { - content: '● ACTIVE'; - position: absolute; - top: 16px; - right: 16px; - font-size: 9px; - font-weight: 600; - letter-spacing: 0.08em; - padding: 5px 10px; - background: rgba(16, 185, 129, 0.15); - color: var(--color-success); - border: 1px solid rgba(16, 185, 129, 0.3); - border-radius: 12px; - z-index: 2; -} - -.mcp-card:hover { - transform: translateY(-2px); - border-color: var(--color-accent); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); -} - -.mcp-card:hover::after { - background: var(--color-success); - color: white; - border-color: var(--color-success); -} - -.mcp-header { - display: flex; - align-items: center; - gap: 20px; - margin-bottom: 24px; - padding-bottom: 20px; - border-bottom: 1px solid rgba(129, 140, 248, 0.1); - position: relative; -} - -.mcp-header::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 80px; - height: 2px; - background: linear-gradient(90deg, var(--color-accent), transparent); - opacity: 0; - transition: all 0.3s ease; -} - -.mcp-card:hover .mcp-header::after { - opacity: 1; - width: 150px; -} - -.mcp-icon { - width: 64px; - height: 64px; - display: flex; - align-items: center; - justify-content: center; - font-size: 32px; - background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); - color: var(--color-accent); - border-radius: 14px; - flex-shrink: 0; - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - z-index: 1; -} - -.mcp-card:hover .mcp-icon { - transform: scale(1.1) translateY(-2px); - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.3); -} - -.mcp-name { - font-size: 24px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.02em; - position: relative; - z-index: 1; - transition: all 0.3s ease; -} - -.mcp-card:hover .mcp-name { - transform: translateX(4px); - background: linear-gradient(135deg, var(--color-text-primary), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.mcp-description { - font-size: 15px; - color: var(--color-text-secondary); - margin-bottom: 28px; - line-height: 1.7; - position: relative; - z-index: 1; - letter-spacing: 0.01em; -} - -.mcp-description::before { - content: ''; - position: absolute; - bottom: -12px; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, - transparent, - rgba(129, 140, 248, 0.1) 20%, - rgba(129, 140, 248, 0.3) 40%, - rgba(129, 140, 248, 0.3) 60%, - rgba(129, 140, 248, 0.1) 80%, - transparent - ); - transition: all 0.4s ease; -} - -.mcp-card:hover .mcp-description::before { - box-shadow: 0 0 12px rgba(129, 140, 248, 0.6); - height: 2px; -} - -.mcp-tools h4 { - font-size: 13px; - font-weight: 700; - color: var(--color-text-primary); - text-transform: uppercase; - letter-spacing: 0.08em; - margin-bottom: 16px; - display: flex; - align-items: center; - gap: 8px; - position: relative; - z-index: 1; -} - -.mcp-tools h4::before { - content: '▸'; - color: var(--color-accent); - font-size: 14px; -} - -.tools-count { - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - padding: 4px 10px; - background: rgba(129, 140, 248, 0.15); - color: var(--color-accent); - border-radius: 12px; - margin-left: 8px; - border: 1px solid rgba(129, 140, 248, 0.25); - display: inline-flex; - align-items: center; - gap: 4px; - box-shadow: 0 1px 3px rgba(129, 140, 248, 0.1); -} - -.mcp-card-browser .tools-count { - background: var(--server-color-lighter); - color: var(--server-color); - border-color: var(--server-color-light); -} - -.mcp-card-docs .tools-count { - background: var(--server-color-lighter); - color: var(--server-color); - border-color: var(--server-color-light); -} - -.mcp-tools ul { - margin: 0; - padding: 0; - list-style: none; - display: flex; - flex-direction: column; - gap: 8px; - position: relative; - z-index: 1; -} - -.mcp-tools li { - font-size: 14px; - color: var(--color-text-secondary); - display: flex; - align-items: center; - gap: 10px; - padding: 10px 14px; - background: rgba(129, 140, 248, 0.04); - border-left: 2px solid rgba(129, 140, 248, 0.2); - border-radius: 6px; - transition: all 0.2s ease; - line-height: 1.5; -} - -.mcp-tools li::before { - content: '◆'; - color: var(--color-accent); - font-size: 8px; - flex-shrink: 0; - opacity: 0.6; -} - -.mcp-tools li:hover { - background: rgba(129, 140, 248, 0.08); - border-left-color: var(--color-accent); - transform: translateX(4px); -} - -.mcp-tools li:hover::before { - opacity: 1; -} - -.mcp-tools code { - color: var(--color-accent); - background: rgba(129, 140, 248, 0.1); - padding: 3px 8px; - border-radius: 4px; - font-weight: 600; - font-size: 13px; - font-family: var(--font-mono); - transition: all 0.2s ease; -} - -.mcp-tools li:hover code { - background: rgba(129, 140, 248, 0.2); -} - -.mcp-note { - font-size: 12px; - color: var(--color-text-secondary); - margin-top: 16px; - padding: 12px 16px; - background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.04)); - border-left: 3px solid var(--color-accent); - border-radius: 8px; - line-height: 1.6; - position: relative; - z-index: 1; - font-weight: 500; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.mcp-note::before { - content: '→'; - color: var(--color-accent); - margin-right: 8px; - font-weight: 700; - font-size: 14px; -} - -/* Browser Server Theme (Teal/Cyan) */ -.mcp-card-browser { - --server-color: #14b8a6; - --server-color-light: rgba(20, 184, 166, 0.15); - --server-color-lighter: rgba(20, 184, 166, 0.08); - --server-color-hover: #0d9488; -} - -.mcp-card-browser .mcp-icon { - background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); - color: var(--server-color); -} - -.mcp-card-browser:hover .mcp-icon { - background: linear-gradient(135deg, var(--server-color), var(--server-color-hover)); - color: white; - box-shadow: 0 8px 20px rgba(20, 184, 166, 0.4); -} - -.mcp-card-browser .mcp-header::after { - background: linear-gradient(90deg, var(--server-color), transparent); -} - -.mcp-card-browser .mcp-tools li::before { - color: var(--server-color); -} - -.mcp-card-browser .mcp-tools li:hover { - border-left-color: var(--server-color); -} - -.mcp-card-browser .mcp-tools code { - color: var(--server-color); - background: var(--server-color-lighter); -} - -.mcp-card-browser .mcp-tools h4::before { - color: var(--server-color); -} - -/* Docs Server Theme (Amber/Orange) */ -.mcp-card-docs { - --server-color: #f59e0b; - --server-color-light: rgba(245, 158, 11, 0.15); - --server-color-lighter: rgba(245, 158, 11, 0.08); - --server-color-hover: #d97706; -} - -.mcp-card-docs .mcp-icon { - background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); - color: var(--server-color); -} - -.mcp-card-docs:hover .mcp-icon { - background: linear-gradient(135deg, var(--server-color), var(--server-color-hover)); - color: white; - box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4); -} - -.mcp-card-docs .mcp-header::after { - background: linear-gradient(90deg, var(--server-color), transparent); -} - -.mcp-card-docs .mcp-tools li::before { - color: var(--server-color); -} - -.mcp-card-docs .mcp-tools li:hover { - border-left-color: var(--server-color); -} - -.mcp-card-docs .mcp-tools code { - color: var(--server-color); - background: var(--server-color-lighter); -} - -.mcp-card-docs .mcp-tools h4::before { - color: var(--server-color); -} - -.mcp-card-docs .mcp-note { - background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); - border-left-color: var(--server-color); -} - -.mcp-card-docs .mcp-note::before { - color: var(--server-color); -} - -/* ============================================ - Installation Section - ============================================ */ - -.install-section { - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-xl); - margin: var(--space-xxl) 0; - padding: var(--space-xxl); - border: 1.5px solid var(--color-border); - position: relative; - overflow: hidden; -} - -.install-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-accent), var(--color-promo-start), var(--color-accent)); - opacity: 0.6; -} - -.install-steps { - max-width: 750px; - margin: 0 auto; - position: relative; -} - -.install-steps::before { - content: ''; - position: absolute; - left: 26px; - top: 52px; - bottom: 52px; - width: 2px; - background: linear-gradient(180deg, - var(--color-accent) 0%, - var(--color-accent) 33%, - var(--color-accent) 66%, - var(--color-success) 100% - ); - opacity: 0.3; - z-index: 0; -} - -.install-step { - display: flex; - gap: var(--space-xl); - margin-bottom: var(--space-xxl); - padding: var(--space-xl); - background: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid var(--color-border); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} - -.install-step::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - transition: opacity 0.3s ease; - border-radius: var(--radius-l); - pointer-events: none; -} - -.install-step:hover { - border-color: var(--color-accent); - transform: translateX(4px); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.15); -} - -.install-step:hover::before { - opacity: 0.4; -} - -.install-step:last-child { - margin-bottom: 0; - background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), var(--color-background)); - border-color: rgba(16, 185, 129, 0.3); -} - -.install-step:last-child .step-number { - background: linear-gradient(135deg, var(--color-success), #0d9488); - box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4); -} - -.step-number { - flex-shrink: 0; - width: 52px; - height: 52px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - color: var(--color-on-accent); - font-weight: 700; - font-size: 24px; - border-radius: 50%; - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - z-index: 1; -} - -.install-step:hover .step-number { - transform: scale(1.1) rotate(5deg); - box-shadow: 0 6px 20px rgba(129, 140, 248, 0.5); -} - -.step-content { - flex: 1; - position: relative; - z-index: 1; -} - -.step-content h3 { - margin-top: 8px; - margin-bottom: var(--space-m); - font-size: 22px; - color: var(--color-text-primary); -} - -/* ============================================ - Code Blocks - ============================================ */ - -.card-code-block { - background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); - border-radius: var(--radius-m); - padding: 18px 20px; - overflow-x: auto; - border: 1px solid rgba(129, 140, 248, 0.2); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.05), - 0 4px 12px rgba(0, 0, 0, 0.4); - position: relative; -} - -.card-code-block::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: repeating-linear-gradient( - 0deg, - rgba(255, 255, 255, 0.03) 0px, - rgba(255, 255, 255, 0.03) 1px, - transparent 1px, - transparent 2px - ); - pointer-events: none; - opacity: 0.3; -} - -.card-code-block pre { - margin: 0; - position: relative; - z-index: 1; -} - -.card-code-block code { - font-family: var(--font-mono); - font-size: 14px; - color: #cdd6f4; - background: none; - padding: 0; - line-height: 1.8; - white-space: pre; - text-shadow: 0 0 8px rgba(205, 214, 244, 0.3); -} - -/* ============================================ - Accordion / FAQ - ============================================ */ -.accordion-container { - display: flex; - flex-direction: column; - gap: var(--space-m); - max-width: 900px; - margin: 0 auto; -} - -.accordion-item { - background: var(--color-surface); - border: 1.5px solid var(--color-border); - border-radius: var(--radius-l); - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - position: relative; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); -} - -.accordion-item::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, var(--color-accent), var(--color-accent-hover)); - opacity: 0; - transition: opacity 0.35s ease; - z-index: 2; -} - -.accordion-item[open]::before { - opacity: 1; -} - -.accordion-item:hover { - border-color: var(--color-accent); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); - transform: translateY(-2px); -} - -.accordion-item[open] { - background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), var(--color-surface)); - border-color: var(--color-accent); - box-shadow: 0 12px 32px rgba(129, 140, 248, 0.25); -} - -.accordion-toggle { - display: flex; - align-items: center; -/* ============================================ - Promo CTA Section - Final Polish - ============================================ */ - -.promo-cta { - background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); - border-radius: var(--radius-xl); - padding: 96px var(--space-xxl); - margin-bottom: var(--space-xxl); - position: relative; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(129, 140, 248, 0.5), - 0 8px 24px rgba(0, 0, 0, 0.2); -} - -.promo-cta::before { - content: ''; - position: absolute; - inset: 0; - background: - repeating-linear-gradient( - 45deg, - transparent, - transparent 20px, - rgba(255, 255, 255, 0.04) 20px, - rgba(255, 255, 255, 0.04) 40px - ); - pointer-events: none; -} - -.promo-cta::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 600px; - height: 600px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); - pointer-events: none; - animation: glow-pulse 6s ease-in-out infinite; -} - -@keyframes glow-pulse { - 0%, 100% { - opacity: 0.4; - transform: translate(-50%, -50%) scale(0.95); - } - 50% { - opacity: 0.7; - transform: translate(-50%, -50%) scale(1.05); - } -} - -.cta-badge { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 10px 22px; - background: rgba(255, 255, 255, 0.25); - backdrop-filter: blur(12px); - border: 1.5px solid rgba(255, 255, 255, 0.4); - border-radius: 50px; - color: white; - font-size: 13px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.1em; - margin-bottom: 28px; - position: relative; - z-index: 1; - box-shadow: - 0 4px 16px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.cta-badge i { - font-size: 16px; - animation: bolt-flash 2.5s ease-in-out infinite; - filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)); -} - -@keyframes bolt-flash { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.7; transform: scale(1.15); } -} - -.promo-cta h2 { - color: white; - font-size: 52px; - font-weight: 850; - line-height: 1.1; - margin-bottom: 28px; - position: relative; - z-index: 1; - text-shadow: - 0 2px 4px rgba(0, 0, 0, 0.2), - 0 4px 20px rgba(0, 0, 0, 0.15); - letter-spacing: -0.03em; -} - -.cta-subheading { - color: rgba(255, 255, 255, 0.98); - font-size: 20px; - line-height: 1.65; - max-width: 720px; - margin-left: auto; - margin-right: auto; - position: relative; - z-index: 1; -} - -.cta-subheading strong { - color: white; - font-weight: 700; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.promo-cta .button { - position: relative; - z-index: 1; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.promo-cta .button.primary { - background: white; - color: var(--color-promo-end); - font-size: 19px; - font-weight: 700; - padding: 20px 42px; - box-shadow: - 0 8px 28px rgba(0, 0, 0, 0.3), - 0 4px 12px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.4); -} - -.promo-cta .button.primary:hover { - background: rgba(255, 255, 255, 0.98); - transform: translateY(-2px); - box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); -} - -.promo-cta .button.primary i { - font-size: 20px; - margin-right: 4px; -} - -.button-arrow { - display: inline-block; - margin-left: 8px; - transition: transform 0.3s ease; - font-weight: 700; - font-size: 20px; -} - -.promo-cta .button.primary:hover .button-arrow { - transform: translateX(4px); -} - -.promo-cta .button.tertiary { - border: 2px solid rgba(255, 255, 255, 0.5); - color: white; - font-size: 18px; - padding: 18px 36px; - background: rgba(255, 255, 255, 0.08); - backdrop-filter: blur(8px); -} - -.promo-cta .button.tertiary:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.8); - transform: translateY(-2px); -} - -.cta-trust { - margin-top: 32px; - margin-bottom: 0; - font-size: 15px; - color: rgba(255, 255, 255, 0.85); - font-weight: 500; - letter-spacing: 0.01em; - position: relative; - z-index: 1; -} - -.cta-trust::before { - content: '✓'; - display: inline-block; - margin-right: 8px; - color: rgba(255, 255, 255, 0.9); - font-weight: 700; - font-size: 18px; -} - -@media (max-width: 767px) { - .promo-cta { - padding: 64px var(--space-xl); - } - - .promo-cta h2 { - font-size: 38px; - } - - .cta-subheading { - font-size: 18px; - } - - .promo-cta .button.primary { - font-size: 17px; - padding: 18px 32px; - } - - .button-group { - flex-direction: column; - width: 100%; - } - - .button-group .button { - width: 100%; - } -} -/* Add subtle numbers */ -.accordion-item:nth-child(1) .accordion-toggle::after { content: '01'; } -.accordion-item:nth-child(2) .accordion-toggle::after { content: '02'; } -.accordion-item:nth-child(3) .accordion-toggle::after { content: '03'; } -.accordion-item:nth-child(4) .accordion-toggle::after { content: '04'; } -.accordion-item:nth-child(5) .accordion-toggle::after { content: '05'; } - -.accordion-toggle::after { - position: absolute; - right: 70px; - font-size: 10px; - font-weight: 700; - color: var(--color-text-tertiary); - opacity: 0.4; - font-family: var(--font-mono); - letter-spacing: 0.05em; - transition: all 0.3s ease; -} - -.accordion-item:hover .accordion-toggle::after { - opacity: 0.7; - color: var(--color-accent); -} - -.accordion-item[open] .accordion-toggle::after { - opacity: 0; -} - -/* ============================================ - Promo CTA Section - ============================================ */ - -.promo-cta { - background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); - border-radius: var(--radius-xl); - padding: 80px var(--space-xxl); - margin-bottom: var(--space-xxl); - position: relative; - overflow: hidden; - box-shadow: 0 20px 60px rgba(129, 140, 248, 0.4); -} - -.promo-cta::before { - content: ''; - position: absolute; - inset: 0; - background: - repeating-linear-gradient( - 45deg, - transparent, - transparent 20px, - rgba(255, 255, 255, 0.03) 20px, - rgba(255, 255, 255, 0.03) 40px - ); - pointer-events: none; -} - -.promo-cta::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 500px; - height: 500px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); - pointer-events: none; - animation: glow-pulse 4s ease-in-out infinite; -} - -@keyframes glow-pulse { - 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } - 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } -} - -.cta-badge { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 10px 20px; - background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); - border: 1.5px solid rgba(255, 255, 255, 0.3); - border-radius: 50px; - color: white; - font-size: 14px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - margin-bottom: 24px; - position: relative; - z-index: 1; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -.cta-badge i { - font-size: 16px; -} - -.promo-cta h2 { - color: white; - font-size: 48px; - font-weight: 800; - line-height: 1.15; - margin-bottom: 24px; - position: relative; - z-index: 1; - text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); -} - -.promo-cta p { - color: rgba(255, 255, 255, 0.95); - font-size: 21px; - line-height: 1.6; - max-width: 700px; - margin-left: auto; - margin-right: auto; - position: relative; - z-index: 1; -} - -.promo-cta .button { - position: relative; - z-index: 1; -} - -.promo-cta .button.primary { - background-color: white; - color: var(--color-promo-end); - font-size: 18px; - padding: 18px 36px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.promo-cta .button.primary:hover { - background-color: rgba(255, 255, 255, 0.95); - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); -} - -.promo-cta .button.primary i { - font-size: 20px; -} - -.promo-cta .button.tertiary { - border-color: rgba(255, 255, 255, 0.4); - color: white; - font-size: 18px; - padding: 18px 36px; -} - -.promo-cta .button.tertiary:hover { - background-color: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.6); -} - -.accordion-content code { - background: rgba(129, 140, 248, 0.15); - color: var(--color-accent); - padding: 3px 8px; - border-radius: 4px; - font-weight: 600; -} - -.accordion-content strong { - color: var(--color-text-primary); - font-weight: 600; -} - -/* ============================================ - 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); - } -} - -/* ============================================ - Philosophy Section (Enhanced) - ============================================ */ - -.philosophy-section { - padding: var(--space-section) 0; - position: relative; -} - -.philosophy-section::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 400px; - height: 400px; - background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); - opacity: 0.08; - pointer-events: none; - z-index: 0; -} - -.philosophy-section > * { - position: relative; - z-index: 1; -} - -.philosophy-quote { - max-width: 900px; - margin: 0 auto var(--space-xxl); - text-align: center; - position: relative; -} - -.philosophy-quote::before { - content: '"'; - position: absolute; - top: -20px; - left: 50%; - transform: translateX(-50%); - font-size: 120px; - font-weight: 700; - color: var(--color-accent); - opacity: 0.1; - line-height: 1; - font-family: Georgia, serif; - z-index: 0; -} - -.philosophy-quote blockquote { - font-size: 22px; - font-style: italic; - color: var(--color-text-secondary); - line-height: 1.7; - margin: 0; - padding: var(--space-xxl); - background: linear-gradient(135deg, var(--color-accent-lighter) 0%, transparent 50%); - border-left: 5px solid var(--color-accent); - border-radius: var(--radius-l); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.12); - position: relative; - z-index: 1; - font-weight: 400; -} - -/* 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: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid transparent; - background-image: - linear-gradient(var(--color-background), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.pillar::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - transition: opacity 0.35s ease; - z-index: 0; -} - -.pillar:hover { - transform: translateY(-2px); - border-color: var(--color-accent); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); -} - -.pillar:hover::before { - opacity: 0.3; -} - -.pillar > * { - position: relative; - z-index: 1; -} - -.pillar-icon { - flex-shrink: 0; - width: 72px; - height: 72px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - border-radius: var(--radius-l); - font-size: 36px; - color: var(--color-on-accent); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.3); - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); -} - -.pillar:hover .pillar-icon { - transform: scale(1.1) rotateY(10deg); - box-shadow: 0 12px 30px rgba(129, 140, 248, 0.5); -} - -.pillar-content h3 { - margin: 0 0 var(--space-xs) 0; - font-size: 28px; - font-weight: 700; - color: var(--color-text-primary); - letter-spacing: -0.02em; -} - -.pillar-tagline { - margin: 0 0 var(--space-m) 0; - font-size: 16px; - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - font-weight: 600; - font-style: italic; -} - -.pillar-description { - margin: 0 0 var(--space-l) 0; - font-size: 15px; - color: var(--color-text-secondary); - line-height: 1.7; - letter-spacing: 0.01em; -} - -.pillar-tools { - display: flex; - flex-wrap: wrap; - gap: var(--space-s); -} - -.tool-tag { - font-family: var(--font-mono); - font-size: 11px; - padding: 6px 12px; - background-color: var(--color-surface-hover); - color: var(--color-text-secondary); - border-radius: var(--radius-s); - border: 1px solid var(--color-border); - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - cursor: default; - font-weight: 500; -} - -.tool-tag:hover { - background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface-hover)); - border-color: var(--color-accent); - color: var(--color-accent); - transform: translateY(-1px) scale(1.05); - box-shadow: 0 4px 8px rgba(129, 140, 248, 0.15); -} - -/* Compound Effect Timeline */ -.compound-effect { - background: linear-gradient(135deg, var(--color-surface), var(--color-background)); - border-radius: var(--radius-xl); - padding: var(--space-xxl); - border: 1.5px solid transparent; - background-image: - linear-gradient(135deg, var(--color-surface), var(--color-background)), - linear-gradient(135deg, var(--color-accent-light), var(--color-border)); - background-origin: border-box; - background-clip: padding-box, border-box; - position: relative; - overflow: hidden; -} - -.compound-effect::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at 50% 0%, var(--color-accent-lighter), transparent 60%); - opacity: 0.3; - pointer-events: none; -} - -.compound-effect h3 { - text-align: center; - margin: 0 0 var(--space-xxl) 0; - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-s); - font-size: 28px; - position: relative; - z-index: 1; -} - -.compound-effect h3 i { - font-size: 32px; - animation: chart-pulse 2s ease-in-out infinite; -} - -@keyframes chart-pulse { - 0%, 100% { transform: scale(1) translateY(0); } - 50% { transform: scale(1.15) translateY(-2px); } -} - -.compound-grid { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: var(--space-l); - position: relative; - z-index: 1; -} - -.compound-item { - text-align: center; - padding: var(--space-xl); - background: var(--color-background); - border-radius: var(--radius-l); - border: 1.5px solid var(--color-border); - min-width: 160px; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.compound-item::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, var(--color-accent-lighter), transparent); - opacity: 0; - border-radius: var(--radius-l); - transition: opacity 0.35s ease; -} - -.compound-item:hover { - transform: translateY(-2px); - border-color: var(--color-accent); - box-shadow: 0 8px 20px rgba(129, 140, 248, 0.2); -} - -.compound-item:hover::before { - opacity: 0.2; -} - -.compound-item.highlight { - background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); - border-color: var(--color-accent); - box-shadow: 0 12px 32px rgba(129, 140, 248, 0.4); - transform: scale(1.08); -} - -.compound-item.highlight .compound-number, -.compound-item.highlight .compound-text { - color: var(--color-on-accent); -} - -.compound-item.highlight:hover { - transform: translateY(-2px); - box-shadow: 0 10px 28px rgba(129, 140, 248, 0.4); -} - -.compound-number { - font-size: 18px; - font-weight: 700; - color: var(--color-accent); - margin-bottom: var(--space-s); - text-transform: uppercase; - letter-spacing: 0.05em; - position: relative; - z-index: 1; -} - -.compound-text { - font-size: 14px; - color: var(--color-text-secondary); - line-height: 1.5; - position: relative; - z-index: 1; -} - -.compound-arrow { - color: var(--color-accent); - font-size: 24px; - opacity: 0.6; - animation: arrow-slide 2s ease-in-out infinite; -} - -@keyframes arrow-slide { - 0%, 100% { transform: translateX(0); opacity: 0.6; } - 50% { transform: translateX(4px); opacity: 1; } -} - -@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/docs/index.html b/docs/index.html deleted file mode 100644 index 0802199..0000000 --- a/docs/index.html +++ /dev/null @@ -1,1046 +0,0 @@ - - - - - - Compounding Engineering - AI-Powered Development Tools for Claude Code - - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
- -
-
-
- - Version 2.32.2 released! - -

- Your Code Reviews Just Got 12 Expert Opinions. In 30 Seconds. -

-

- Here's what happened when we shipped yesterday: security audit, performance analysis, architectural review, pattern detection, and eight more specialized checks—all running in parallel. No meetings. No waiting. Just answers. That's compounding engineering: 29 specialized agents, 23 workflow commands, and 18 skills that make today's work easier than yesterday's. -

- -
-
- - -
-
-
-
-
29
-
Specialized Agents
-
-
-
-
23
-
Slash Commands
-
-
-
-
18
-
Intelligent Skills
-
-
-
-
1
-
MCP Server
-
-
-
- - -
-
-

Why Your Third Code Review Should Be Easier Than Your First

-

- Think about the last time you fixed a Rails N+1 query. You found it. You fixed it. Then next month, different developer, same bug, same investigation. That's linear engineering—you solved it, but the solution evaporated. -

-
- - -
-
- "Most engineering work is amnesia. You solve a problem on Tuesday, forget the solution by Friday, and re-solve it next quarter. Compounding engineering is different: each solved problem teaches the system. The security review you run today makes tomorrow's review smarter. The pattern you codify this sprint prevents bugs in the next three." -
-
- - -
-
-
-
-

Plan

-

Stop starting over from scratch

-

- You know that moment when you open a ticket and think "how did we solve this last time?" The framework-docs-researcher already knows. The git-history-analyzer remembers what worked in March. Run /plan and three research agents work in parallel—one reading docs, one analyzing your repo's history, one finding community patterns. In 60 seconds, you have a plan built on institutional memory instead of starting cold. -

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

Delegate

-

Work with experts who never forget

-

- The security-sentinel has checked 10,000 PRs for SQL injection. The kieran-rails-reviewer never approves a controller with business logic. They don't get tired, don't skip Friday afternoon reviews, don't forget the conventions you agreed on in March. Run /work and watch your plan execute with quality gates that actually enforce your standards—every single time. -

-
- 29 specialized agents - /work - dhh-rails-style skill - git-worktree skill -
-
-
- -
-
-
-

Assess

-

Get twelve opinions without twelve meetings

-

- Type /review PR#123 and go get coffee. When you come back, you'll have a security audit (did you sanitize that user input?), performance analysis (N+1 spotted on line 47), architecture review (this breaks the pattern from v2.3), data integrity check (that migration will fail in production), and eight more specialized reviews. All running in parallel. All categorized by severity. All stored as actionable P1/P2/P3 todos you can knock out in order. -

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

Compound

-

Make sure you never solve the same bug twice

-

- Remember that CORS issue you debugged for three hours last month? Neither do I. That's the problem. Run /compound right after you fix something and it captures the solution as searchable documentation with YAML frontmatter. Next time someone hits the same issue, they grep for "CORS production" and find your answer in five seconds instead of re-debugging for three hours. That's how you compound. -

-
- /compound - compound-docs skill - file-todos skill -
-
-
-
- -
- - -
-
-

- 29 Specialized Agents -

-

- Think of them as coworkers who never quit. The security-sentinel has seen every SQL injection variant. The kieran-rails-reviewer enforces conventions with zero compromise. The performance-oracle spots N+1 queries while you're still reading the PR. Run them solo or launch twelve in parallel—your choice. -

-
- - -
-

Review Agents (11)

-
-
-
- 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 -
-
-
- julik-frontend-races-reviewer - JavaScript -
-

Review JavaScript and Stimulus code for race conditions, DOM event handling, promise management, and timer cleanup.

- claude agent julik-frontend-races-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 (5)

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

- 23 Powerful Commands -

-

- Slash commands that replace entire workflows. /review is your code review committee. /plan is your research team. /triage sorts 50 todos in the time it takes you to read five. Each one automates hours of work into a single line. -

-
- - -
-

Workflow Commands

-
-
-
- /plan - core -
-

Create comprehensive implementation plans with research agents and stakeholder analysis.

-
-
-
- /review - core -
-

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

-
-
-
- /work - core -
-

Execute work items systematically with progress tracking and validation.

-
-
-
- /compound - core -
-

Document solved problems to compound team knowledge. Turn learnings into reusable patterns.

-
-
-
- - -
-

Utility Commands

-
-
-
- /changelog - util -
-

Create engaging changelogs for recent merges.

-
-
-
- /create-agent-skill - util -
-

Create or edit Claude Code skills with expert guidance.

-
-
-
- /generate_command - util -
-

Generate new slash commands from templates.

-
-
-
- /heal-skill - util -
-

Fix skill documentation issues automatically.

-
-
-
- /plan_review - util -
-

Multi-agent plan review in parallel.

-
-
-
- /prime - util -
-

Prime/setup command for project initialization.

-
-
-
- /report-bug - util -
-

Report bugs in the plugin with structured templates.

-
-
-
- /reproduce-bug - util -
-

Reproduce bugs using logs and console output.

-
-
-
- /triage - util -
-

Triage and prioritize issues interactively.

-
-
-
- /resolve_parallel - util -
-

Resolve TODO comments in parallel.

-
-
-
- /resolve_pr_parallel - util -
-

Resolve PR comments in parallel.

-
-
-
- /resolve_todo_parallel - util -
-

Resolve file-based todos in parallel.

-
-
-
- /release-docs - util -
-

Build and update the documentation site with current plugin components.

-
-
-
- /deploy-docs - util -
-

Validate and prepare documentation for GitHub Pages deployment.

-
-
-
-
- - -
-
-

- 18 Intelligent Skills -

-

- Domain expertise on tap. Need to write a Ruby gem? The andrew-kane-gem-writer knows the patterns Andrew uses in 50+ popular gems. Building a Rails app? The dhh-rails-style enforces 37signals conventions. Generating images? The gemini-imagegen has Google's AI on speed dial. Just invoke the skill and watch it work. -

-
- - -
-

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-rails-style - Rails -
-

Write Ruby/Rails code in DHH's 37signals style. REST purity, fat models, thin controllers, Hotwire patterns.

- skill: dhh-rails-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 -
-
-
- compound-docs - Docs -
-

Capture solved problems as categorized documentation with YAML schema.

- skill: compound-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

-
- -
-
-
- - -
-
-

- 1 MCP Server -

-

- Playwright gives Claude a browser—it can click buttons, take screenshots, fill forms, and validate what your users actually see. Context7 gives it instant access to docs for 100+ frameworks. Need to know how Next.js handles dynamic routes? Context7 fetches the answer in real-time instead of hallucinating from outdated training data. -

-
- -
-
-
- - Playwright -
-

Your AI can now see and click like a user. Test flows, grab screenshots, debug what's actually rendering.

-
-

Tools Provided: 6 tools

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

Stop getting outdated answers. Context7 fetches current docs from 100+ frameworks in real-time.

-
-

Tools Provided: 2 tools

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

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

-
-
-
-
- - -
-
-

Three Commands. Zero Configuration.

-

- You're literally 30 seconds from running your first 12-agent code review. No config files. No API keys (except for image generation). Just copy, paste, go. -

-
- -
-
-
1
-
-

Add the Marketplace

-
-
claude /plugin marketplace add https://github.com/EveryInc/compound-engineering-plugin
-
-
-
-
-
2
-
-

Install the Plugin

-
-
claude /plugin install compound-engineering
-
-
-
-
-
3
-
-

Ship Faster

-
-
# Run a 12-agent code review
-/review PR#123
-
-# Get a security audit
-claude agent security-sentinel
-
-# Generate an image
-skill: gemini-imagegen
-
-
-
-
-
- - -
-
-

Frequently Asked Questions

-
-
-
- -

What is Compounding Engineering?

- -
-
-

- It's the opposite of how most teams work. Normally, you fix a bug, ship it, and forget it. Next month someone hits the same bug and re-solves it from scratch. Compounding engineering means each fix teaches the system. Your third code review is faster than your first because the agents learned patterns. Your tenth security audit catches issues you missed in audit #2. The work accumulates instead of evaporating. -

-
-
-
- -

How do agents differ from skills?

- -
-
-

- Agents are coworkers with specific jobs. The security-sentinel does security reviews. The kieran-rails-reviewer enforces Rails conventions. You call them directly: claude agent security-sentinel. -

-

- Skills are expertise Claude can tap into when needed. The dhh-rails-style knows 37signals Rails patterns. The gemini-imagegen knows how to generate images. Claude invokes them automatically when relevant, or you can explicitly call them: skill: dhh-rails-style. -

-
-
-
- -

Why aren't MCP servers loading automatically?

- -
-
-

- Yeah, we know. It's a current limitation. The workaround is simple: manually add the MCP servers to your .claude/settings.json file. Check the README for copy-paste config. Takes 30 seconds and you're done. -

-
-
-
- -

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

- -
-
-

- Absolutely. We've got Python and TypeScript reviewers alongside the Rails ones. And the workflow commands, research agents, and skills like gemini-imagegen don't care what language you write. The security-sentinel finds SQL injection whether it's in Rails, Django, or Laravel. -

-
-
-
- -

How do I create my own agents or skills?

- -
-
-

- Run /create-agent-skill or invoke the create-agent-skills skill. Both give you templates, enforce best practices, and walk you through the structure. You'll have a working agent or skill in minutes instead of reverse-engineering from examples. -

-
-
-
-
- - -
-
- Free & Open Source -

Install Once. Compound Forever.

-

- Your next code review takes 30 seconds. The one after that? Even faster. That's compounding. Get 29 expert agents, 23 workflow commands, and 18 specialized skills working for you right now. -

- -

Join developers who ship faster because yesterday's work makes today easier

-
-
-
- - -
- - - diff --git a/docs/js/main.js b/docs/js/main.js deleted file mode 100644 index bc71913..0000000 --- a/docs/js/main.js +++ /dev/null @@ -1,225 +0,0 @@ -/** - * 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/docs/pages/agents.html b/docs/pages/agents.html deleted file mode 100644 index eb39b75..0000000 --- a/docs/pages/agents.html +++ /dev/null @@ -1,649 +0,0 @@ - - - - - - Agent Reference - Compounding Engineering - - - - - - - - - - -
-
- - -
-
- - -
- -
-

Agent Reference

-

- Think of agents as your expert teammates who never sleep. You've got 23 specialists here—each one obsessed with a single domain. Call them individually when you need focused expertise, or orchestrate them together for multi-angle analysis. They're opinionated, they're fast, and they remember your codebase better than you do. -

- -
-

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)

-

Your code review dream team. These agents catch what humans miss at 2am—security holes, performance cliffs, architectural drift, and those "it works but I hate it" moments. They're picky. They disagree with each other. That's the point.

- -
-
-

kieran-rails-reviewer

- Rails -
-

- Your senior Rails developer who's seen too many "clever" solutions fail in production. Obsessed with code that's boring, predictable, and maintainable. Strict on existing code (because touching it risks everything), pragmatic on new isolated features (because shipping matters). If you've ever thought "this works but feels wrong," this reviewer will tell you why. -

-

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

- What if DHH reviewed your Rails PR? He'd ask why you're building React inside Rails, why you need six layers of abstraction for a form, and whether you've forgotten that Rails already solved this problem. This agent channels that energy—blunt, opinionated, allergic to complexity. -

-

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

- Your Pythonic perfectionist who believes type hints aren't optional and dict.get() beats try/except KeyError. Expects modern Python 3.10+ patterns—no legacy syntax, no typing.List when list works natively. If your code looks like Java translated to Python, prepare for rewrites. -

-

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

- TypeScript's type system is a gift—don't throw it away with any. This reviewer treats any like a code smell that needs justification. Expects proper types, clean imports, and code that doesn't need comments because the types explain everything. You added TypeScript for safety; this agent makes sure you actually get it. -

-

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

- Security vulnerabilities hide in boring code—the "just grab the user ID from params" line that ships a privilege escalation bug to production. This agent thinks like an attacker: SQL injection, XSS, auth bypass, leaked secrets. Run it before touching authentication, payments, or anything with PII. Your users' data depends on paranoia. -

-

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

- Your code works fine with 10 users. What happens at 10,000? This agent time-travels to your future scaling problems—N+1 queries that murder your database, O(n²) algorithms hiding in loops, missing indexes, memory leaks. It thinks in Big O notation and asks uncomfortable questions about what breaks first when traffic spikes. -

-

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

- Every "small change" either reinforces your architecture or starts eroding it. This agent zooms out to see if your fix actually fits the system's design—or if you're bolting duct tape onto a crumbling foundation. It speaks SOLID principles, microservice boundaries, and API contracts. Call it when you're about to make a change that "feels weird." -

-

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

- Migrations can't be rolled back once they're run on production. This agent is your last line of defense before you accidentally drop a column with user data, create a race condition in transactions, or violate GDPR. It obsesses over referential integrity, rollback safety, and data constraints. Your database is forever; migrations should be paranoid. -

-

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

- Patterns tell stories—Factory, Observer, God Object, Copy-Paste Programming. This agent reads your code like an archaeologist reading artifacts. It spots the good patterns (intentional design), the anti-patterns (accumulated tech debt), and the duplicated blocks you swore you'd refactor later. Runs tools like jscpd because humans miss repetition that machines catch instantly. -

-

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

- Simplicity is violent discipline. This agent asks "do you actually need this?" about every line, every abstraction, every dependency. YAGNI isn't a suggestion—it's the law. Your 200-line feature with three layers of indirection? This agent will show you the 50-line version that does the same thing. Complexity is a liability; simplicity compounds. -

-

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)

-

Stop guessing. These agents dig through documentation, GitHub repos, git history, and real-world examples to give you answers backed by evidence. They read faster than you, remember more than you, and synthesize patterns you'd miss. Perfect for "how should I actually do this?" questions.

- -
-
-

framework-docs-researcher

- Research -
-

- Official docs are scattered. GitHub examples are inconsistent. Deprecations hide in changelogs. This agent pulls it all together—docs, source code, version constraints, real-world examples. Ask "how do I use Hotwire Turbo?" and get back patterns that actually work in production, not toy tutorials. -

-

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

- "Best practices" are everywhere and contradictory. This agent cuts through the noise by evaluating sources (official docs, trusted blogs, real GitHub repos), checking recency, and synthesizing actionable guidance. You get code templates, patterns that scale, and answers you can trust—not StackOverflow copy-paste roulette. -

-

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

- Your codebase has a history—decisions, patterns, mistakes. This agent does archaeology with git tools: file evolution, blame analysis, contributor expertise mapping. Ask "why does this code exist?" and get the commit that explains it. Spot patterns in how bugs appear. Understand the design decisions buried in history. -

-

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

- Every repo has conventions—some documented, most tribal knowledge. This agent reads ARCHITECTURE.md, issue templates, PR patterns, and actual code to reverse-engineer the standards. Perfect for joining a new project or ensuring your PR matches the team's implicit style. Finds the rules nobody wrote down. -

-

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 (5)

-

Tedious work you hate doing. These agents handle the grind—reproducing bugs, resolving PR comments, running linters, analyzing specs. They're fast, they don't complain, and they free you up to solve interesting problems instead of mechanical ones.

- -
-
-

bug-reproduction-validator

- Bugs -
-

- Half of bug reports aren't bugs—they're user errors, environment issues, or misunderstood features. This agent systematically reproduces the reported behavior, classifies what it finds (Confirmed, Can't Reproduce, Not a Bug, etc.), and assesses severity. Saves you from chasing ghosts or missing real issues. -

-

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

- Code review comments pile up. This agent reads them, plans fixes, implements changes, and reports back what it did. It doesn't argue with reviewers or skip hard feedback—it just resolves the work systematically. Great for burning through a dozen "change this variable name" comments in seconds. -

-

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

lint

- Quality -
-

- Linters are pedantic robots that enforce consistency. This agent runs StandardRB, ERBLint, and Brakeman for you—checking Ruby style, ERB templates, and security issues. It's fast (uses the Haiku model) and catches the formatting noise before CI does. -

-

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

- Specs always have gaps—edge cases nobody thought about, ambiguous requirements, missing error states. This agent maps all possible user flows, identifies what's unclear or missing, and generates the questions you need to ask stakeholders. Runs before you code to avoid building the wrong thing. -

-

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

- Style guides are arbitrary rules that make writing consistent. This agent enforces Every's particular quirks—title case in headlines, no overused filler words ("actually," "very"), active voice, Oxford commas. It's a line-by-line grammar cop for content that needs to match the brand. -

-

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 is iteration. These agents take screenshots, compare them to Figma, make targeted improvements, and repeat. They fix spacing, alignment, colors, typography—the visual details that compound into polish. Perfect for closing the gap between "it works" and "it looks right."

- -
-
-

design-iterator

- Design -
-

- Design doesn't happen in one pass. This agent runs a loop: screenshot the UI, analyze what's off (spacing, colors, alignment), implement 3-5 targeted fixes, repeat. Run it for 10 iterations and watch rough interfaces transform into polished designs through systematic refinement. -

-

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

- Designers hand you a Figma file. You build it. Then: "the spacing is wrong, the font is off, the colors don't match." This agent compares your implementation to the Figma spec, identifies every visual discrepancy, and fixes them automatically. Designers stay happy. You stay sane. -

-

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

- Before you ship UI changes, run this agent. It compares your implementation against Figma at a pixel level—layouts, typography, colors, spacing, responsive behavior. Uses the Opus model for detailed visual analysis. Catches the "close enough" mistakes that users notice but you don't. -

-

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

- Andrew Kane writes READMEs that are models of clarity—concise, scannable, zero fluff. This agent generates gem documentation in that style: 15 words max per sentence, imperative voice, single-purpose code examples. If your README rambles, this agent will fix it. -

-

Section Order

-
    -
  1. Header (title + description)
  2. -
  3. Installation
  4. -
  5. Quick Start
  6. -
  7. Usage
  8. -
  9. Options
  10. -
  11. Upgrading
  12. -
  13. Contributing
  14. -
  15. License
  16. -
-

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/docs/pages/changelog.html b/docs/pages/changelog.html deleted file mode 100644 index dd0c72d..0000000 --- a/docs/pages/changelog.html +++ /dev/null @@ -1,534 +0,0 @@ - - - - - - Changelog - Compounding Engineering - - - - - - - - - - -
-
- - -
-
- - -
- -
-

Changelog

-

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

- - -
-
-

v2.32.2

- 2026-02-12 -
- -
-

Changed

-
    -
  • - /release-docs command moved from plugin to local .claude/commands/ - - This is a repository maintenance command and should not be distributed to users. Command count reduced from 24 to 23. -
  • -
-
-
- - -
-
-

v2.32.1

- 2026-02-12 -
- -
-

Changed

-
    -
  • - /workflows:review command - Added learnings-researcher - agent to the parallel review phase. The review now searches docs/solutions/ for past - issues related to the PR's modules and patterns, surfacing "Known Pattern" findings during synthesis. -
  • -
-
-
- - -
-
-

v2.6.0

- 2024-11-26 -
- -
-

Removed

-
    -
  • - feedback-codifier agent - Removed from workflow agents. - Agent count reduced from 24 to 23. -
  • -
-
-
- - -
-
-

v2.5.0

- 2024-11-25 -
- -
-

Added

-
    -
  • - /report-bug command - New slash command for reporting bugs in the - compound-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/compound-engineering-plugin 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 more than 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 (seven)

-
    -
  • 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 (nine)

-
    -
  • /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
  • -
  • /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/ (four agents) - Documentation, patterns, history analysis
  • -
  • design/ (three agents) - UI/design review and iteration
  • -
  • workflow/ (six agents) - PR resolution, bug validation, linting
  • -
  • docs/ (one 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 compound-engineering plugin. -

- -
-

Added

- -

17 Specialized Agents

- -

Code Review (five)

-
    -
  • 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 (four)

-
    -
  • 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 (four)

-
    -
  • 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 (three)

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

Six 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/docs/pages/commands.html b/docs/pages/commands.html deleted file mode 100644 index c5be692..0000000 --- a/docs/pages/commands.html +++ /dev/null @@ -1,523 +0,0 @@ - - - - - - Command Reference - Compounding Engineering - - - - - - - - - - -
-
- - -
-
- - -
- -
-

Command Reference

-

- Here's the thing about slash commands: they're workflows you'd spend 20 minutes doing manually, compressed into one line. Type /plan and watch three agents launch in parallel to research your codebase while you grab coffee. That's the point—automation that actually saves time, not busywork dressed up as productivity. -

- - -
-

Workflow Commands (four)

-

These are the big four: Plan your feature, Review your code, Work through the implementation, and Codify what you learned. Every professional developer does this cycle—these commands just make you faster at it.

- -
-
- /plan -
-

- You've got a feature request and a blank page. This command turns "we need OAuth" into a structured plan that actually tells you what to build—researched, reviewed, and ready to execute. -

-

Arguments

-

[feature description, bug report, or improvement idea]

-

Workflow

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

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

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

- Twelve specialized reviewers examine your PR in parallel—security, performance, architecture, patterns. It's like code review by committee, except the committee finishes in two minutes instead of two days. -

-

Arguments

-

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

-

Workflow

-
    -
  1. Setup - Detect review target, optionally use git-worktree for isolation
  2. -
  3. 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...
    • -
    -
  4. -
  5. Ultra-Thinking Analysis - Stakeholder perspectives, scenario exploration
  6. -
  7. Simplification Review - Run code-simplicity-reviewer
  8. -
  9. Synthesize Findings - Categorize by severity (P1/P2/P3)
  10. -
  11. Create Todo Files - Using file-todos skill for all findings
  12. -
-
-
-
-

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

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

- Point this at a plan file and watch it execute—reading requirements, setting up environment, running tests, creating commits, opening PRs. It's the "just build the thing" button you wish you always had. -

-

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. -
  3. Execute -
      -
    • Task execution loop with progress tracking
    • -
    • Follow existing patterns
    • -
    • Test continuously
    • -
    • Figma sync if applicable
    • -
    -
  4. -
  5. Quality Check -
      -
    • Run test suite
    • -
    • Run linting
    • -
    • Optional reviewer agents for complex changes
    • -
    -
  6. -
  7. Ship It -
      -
    • Create commit with conventional format
    • -
    • Create pull request
    • -
    • Notify with summary
    • -
    -
  8. -
-
-
/work plans/user-authentication.md
-/work todos/042-ready-p1-performance-issue.md
-
-
- -
-
- /compound -
-

- Just fixed a gnarly bug? This captures the solution before you forget it. Seven agents analyze what you did, why it worked, and how to prevent it next time. Each documented solution compounds your team's knowledge. -

-

Arguments

-

[optional: brief context about the fix]

-

Workflow

-
    -
  1. Preconditions - Verify problem is solved and verified working
  2. -
  3. Launch seven 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
    • -
    -
  4. -
  5. Create Documentation - File in docs/solutions/[category]/
  6. -
-

Auto-Triggers

-

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

-
-
/compound
-/compound N+1 query optimization
-
-
-
- - -
-

Utility Commands (12)

-

The supporting cast—commands that do one specific thing really well. Generate changelogs, resolve todos in parallel, triage findings, create new commands. The utilities you reach for daily.

- -
-
- /changelog -
-

- Turn your git history into a changelog people actually want to read. Breaking changes at the top, fun facts at the bottom, everything organized by what matters to your users. -

-

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

- Need a new skill? This walks you through creating one that actually works—proper frontmatter, clear documentation, all the conventions baked in. Think of it as scaffolding for skills. -

-

Arguments

-

[skill description or requirements]

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

- Same idea, but for commands instead of skills. Tell it what workflow you're tired of doing manually, and it generates a proper slash command with all the right patterns. -

-

Arguments

-

[command purpose and requirements]

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

- Skills drift—APIs change, URLs break, parameters get renamed. When a skill stops working, this figures out what's wrong and fixes the documentation. You approve the changes before anything commits. -

-

Arguments

-

[optional: specific issue to fix]

-

Approval Options

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

- Before you execute a plan, have three reviewers tear it apart—Rails conventions, best practices, simplicity. Better to find the problems in the plan than in production. -

-

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

- Something broken? This collects all the context—what broke, what you expected, error messages, environment—and files a proper bug report. No more "it doesn't work" issues. -

-

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

- Give it a GitHub issue number and it tries to actually reproduce the bug—reading the issue, analyzing code paths, iterating until it finds the root cause. Then it posts findings back to the issue. -

-

Arguments

-

[GitHub issue number]

-

Investigation Process

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

- Got a pile of code review findings or security audit results? This turns them into actionable todos—one at a time, you decide: create the todo, skip it, or modify and re-present. -

-

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

- All those TODO comments scattered through your codebase? This finds them, builds a dependency graph, and spawns parallel agents to resolve them all at once. Clears the backlog in minutes. -

-

Arguments

-

[optional: specific TODO pattern or file]

-

Process

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

- Same deal, but for PR review comments. Fetch unresolved threads, spawn parallel resolver agents, commit the fixes, and mark threads as resolved. Your reviewers will wonder how you're so fast. -

-

Arguments

-

[optional: PR number or current PR]

-

Process

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

- Those todo files in your /todos directory? Point this at them and watch parallel agents knock them out—analyzing dependencies, executing in the right order, marking resolved as they finish. -

-

Arguments

-

[optional: specific todo ID or pattern]

-

Process

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

- Your project initialization command. What exactly it does depends on your project setup—think of it as the "get everything ready" button before you start coding. -

-
-
/prime
-
-
-
- - - -
-
-
- - - - - diff --git a/docs/pages/getting-started.html b/docs/pages/getting-started.html deleted file mode 100644 index be37682..0000000 --- a/docs/pages/getting-started.html +++ /dev/null @@ -1,582 +0,0 @@ - - - - - - Getting Started - Compounding Engineering - - - - - - - - - - - -
-
- - - - -
-
- - -
- -
-

Getting Started with Compounding Engineering

-

- Five minutes from now, you'll run a single command that spins up 10 AI agents—each with a different specialty—to review your pull request in parallel. Security, performance, architecture, accessibility, all happening at once. That's the plugin. Let's get you set up. -

- - -
-

Installation

- -

Prerequisites

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

Step 1: Add the Marketplace

-

Think of the marketplace as an app store. You're adding it to Claude Code's list of places to look for plugins:

-
-
claude /plugin marketplace add https://github.com/EveryInc/compound-engineering-plugin
-
- -

Step 2: Install the Plugin

-

Now grab the plugin itself:

-
-
claude /plugin install compound-engineering
-
- -

Step 3: Verify Installation

-

Check that it worked:

-
-
claude /plugin list
-
-

You'll see compound-engineering in the list. If you do, you're ready.

- -
-
-
-

Known Issue: MCP Servers

-

- The bundled MCP servers (Playwright for browser automation, Context7 for docs) don't always auto-load. If you need them, there's a manual config step below. Otherwise, ignore this—everything else works fine. -

-
-
-
- - -
-

Quick Start

- -

Let's see what this thing can actually do. I'll show you three workflows you'll use constantly:

- -

Run a Code Review

-

This is the big one. Type /review and watch it spawn 10+ specialized reviewers:

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

Use a Specialized Agent

-

Sometimes you just need one expert. Call them directly:

-
-
# 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 are like loading a reference book into Claude's brain. When you need deep knowledge in a specific domain:

-
-
# 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 the MCP servers didn't load automatically, paste this into .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

-

Right now, only one skill needs an API key. If you use Gemini's image generation:

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

Here's how it works in practice—the four-step loop you'll run over and over:

- -
-
-
-

1. Plan

-

- Before you write a single line, figure out what you're building and why. Use research agents to gather examples, patterns, and context. Think of it as Google Search meets expert consultation. -

-
-
-
-

2. Delegate

-

- Now build it—with help. Each agent specializes in something (Rails, security, design). You stay in the driver's seat, but you've got a team of specialists riding shotgun. -

-
-
-
-

3. Assess

-

- Before you ship, run the gauntlet. Security agent checks for vulnerabilities. Performance agent flags N+1 queries. Architecture agent questions your design choices. All at once, all in parallel. -

-
-
-
-

4. Codify

-

- You just solved a problem. Write it down. Next time you (or your teammate) face this, you'll have a runbook. That's the "compounding" part—each solution makes the next one faster. -

-
-
-
- - -
-

Using Agents

- -

- Think of agents as coworkers with different job titles. You wouldn't ask your security engineer to design your UI, right? Same concept here—each agent has a specialty, and you call the one you need. -

- -

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
ResearchfourBest practices, documentation, git history
DesignthreeUI iteration, Figma sync, design review
WorkflowfiveBug reproduction, PR resolution, linting
DocsoneREADME generation
- -

- - View All Agents - -

-
- - -
-

Using Commands

- -

- Commands are macros that run entire workflows for you. One command can spin up a dozen agents, coordinate their work, collect results, and hand you a summary. It's automation all the way down. -

- -

Running Commands

-
-
# Workflow commands
-/plan
-/review 123
-/work
-/compound
-
-# Utility commands
-/changelog
-/triage
-/reproduce-bug
-
- -

The Review Workflow

-

Let me show you what happens when you run /review. Here's the sequence:

-
    -
  1. Detection - Figures out what you want reviewed (PR number, branch name, or current changes)
  2. -
  3. Isolation - Spins up a git worktree so the review doesn't mess with your working directory
  4. -
  5. Parallel execution - Launches 10+ agents simultaneously (security, performance, architecture, accessibility...)
  6. -
  7. Synthesis - Sorts findings by severity (P1 = blocks merge, P2 = should fix, P3 = nice-to-have)
  8. -
  9. Persistence - Creates todo files so you don't lose track of issues
  10. -
  11. Summary - Hands you a readable report with action items
  12. -
- -

- - View All Commands - -

-
- - -
-

Using Skills

- -

- Here's the difference: agents are who does the work, skills are what they know. When you invoke a skill, you're loading a reference library into Claude's context—patterns, templates, examples, workflows. It's like handing Claude a technical manual. -

- -

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

-

Peek inside a skill directory and you'll usually find:

-
    -
  • SKILL.md - The main instructions (what Claude reads first)
  • -
  • references/ - Deep dives on concepts and patterns
  • -
  • templates/ - Copy-paste code snippets
  • -
  • workflows/ - Step-by-step "how to" guides
  • -
  • scripts/ - Actual executable code (when words aren't enough)
  • -
- -

- - View All Skills - -

-
- - -
-

Code Review Workflow Guide

- -

- You'll spend most of your time here. This workflow is why the plugin exists—to turn code review from a bottleneck into a superpower. -

- -

Basic Review

-
-
# Review a PR
-/review 123
-
-# Review current branch
-/review
-
- -

Understanding Findings

-

Every finding gets a priority label. Here's what they mean:

-
    -
  • P1 Critical - Don't merge until this is fixed. Think: SQL injection, data loss, crashes in production.
  • -
  • P2 Important - Fix before shipping. Performance regressions, N+1 queries, shaky architecture.
  • -
  • P3 Nice-to-Have - Would be better, but ship without it if you need to. Documentation, minor cleanup, style issues.
  • -
- -

Working with Todo Files

-

After a review, you'll have a todos/ directory full of markdown files. Each one is a single issue to fix:

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

Creating Custom Agents

- -

- The built-in agents cover a lot of ground, but every team has unique needs. Maybe you want a "rails-api-reviewer" that enforces your company's API standards. That's 10 minutes of work. -

- -

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

-

Drop your agent file in one of these directories:

-
    -
  • .claude/agents/ - Just for this project (committed to git)
  • -
  • ~/.claude/agents/ - Available in all your projects (stays on your machine)
  • -
- -
-
-
-

The Easy Way

-

- Don't write the YAML by hand. Just run /create-agent-skill and answer a few questions. The command generates the file, validates the format, and puts it in the right place. -

-
-
-
- - -
-

Creating Custom Skills

- -

- Skills are heavier than agents—they're knowledge bases, not just prompts. You're building a mini library that Claude can reference. Worth the effort for things you do repeatedly. -

- -

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

Get Help Building Skills

-

- Type skill: create-agent-skills and Claude loads expert guidance on skill architecture, best practices, file organization, and validation. It's like having a senior engineer walk you through it. -

-
-
-
- - - -
-
-
- - - - - diff --git a/docs/pages/mcp-servers.html b/docs/pages/mcp-servers.html deleted file mode 100644 index ecc2f3c..0000000 --- a/docs/pages/mcp-servers.html +++ /dev/null @@ -1,409 +0,0 @@ - - - - - - MCP Servers Reference - Compounding Engineering - - - - - - - - - - -
-
- - -
-
- - -
- -
-

MCP Servers Reference

-

- Think of MCP servers as power tools that plug into Claude Code. Want Claude to actually open a browser and click around your app? That's Playwright. Need the latest Rails docs without leaving your terminal? That's Context7. The plugin bundles both servers—they just work when you install. -

- -
-
-
-

Known Issue: Auto-Loading

-

- Sometimes MCP servers don't wake up automatically. If Claude can't take screenshots or look up docs, you'll need to add them manually. See Manual Configuration for the fix. -

-
-
- - -
-

Playwright

-

- You know how you can tell a junior developer "open Chrome and click the login button"? Now you can tell Claude the same thing. Playwright gives Claude hands to control a real browser—clicking buttons, filling forms, taking screenshots, running JavaScript. It's like pair programming with someone who has a browser open next to you. -

- -

Tools Provided

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ToolDescription
browser_navigateGo to any URL—your localhost dev server, production, staging, that competitor's site you're studying
browser_take_screenshotCapture what you're seeing right now. Perfect for "does this look right?" design reviews
browser_clickClick buttons, links, whatever. Claude finds it by text or CSS selector, just like you would
browser_fill_formType into forms faster than you can. Great for testing signup flows without manual clicking
browser_snapshotGet the page's accessibility tree—how screen readers see it. Useful for understanding structure without HTML noise
browser_evaluateRun any JavaScript in the page. Check localStorage, trigger functions, read variables—full console access
- -

When You'll Use This

-
    -
  • Design reviews without leaving the terminal - "Take a screenshot of the new navbar on mobile" gets you a PNG in seconds
  • -
  • Testing signup flows while you code - "Fill in the registration form with test@example.com and click submit" runs the test for you
  • -
  • Debugging production issues - "Navigate to the error page and show me what's in localStorage" gives you the state without opening DevTools
  • -
  • Competitive research - "Go to competitor.com and screenshot their pricing page" builds your swipe file automatically
  • -
- -

Example Usage

-
-
# Just talk to Claude naturally—it knows when to use Playwright
-
-# Design review
-"Take a screenshot of the login page"
-
-# Testing a form
-"Navigate to /signup and fill in the email field with test@example.com"
-
-# Debug JavaScript state
-"Go to localhost:3000 and run console.log(window.currentUser)"
-
-# The browser runs in the background. You'll get results without switching windows.
-
- -

Configuration

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

Context7

-

- Ever ask Claude about a framework and get an answer from 2023? Context7 fixes that. It's a documentation service that keeps Claude current with 100+ frameworks—Rails, React, Next.js, Django, whatever you're using. Think of it as having the official docs piped directly into Claude's brain. -

- -

Tools Provided

- - - - - - - - - - - - - - - - - -
ToolDescription
resolve-library-idMaps "Rails" to the actual library identifier Context7 uses. You don't call this—Claude does it automatically
get-library-docsFetches the actual documentation pages. Ask "How does useEffect work?" and this grabs the latest React docs
- -

What's Covered

-

Over 100 frameworks and libraries. Here's a taste of what you can look up:

-
-
-

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

-
-
# Just ask about the framework—Claude fetches current docs automatically
-
-"Look up the Rails ActionCable documentation"
-
-"How does the useEffect hook work in React?"
-
-"What are the best practices for PostgreSQL indexes?"
-
-# You get answers based on the latest docs, not Claude's training cutoff
-
- -

Configuration

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

Manual Configuration

-

- If the servers don't load automatically (you'll know because Claude can't take screenshots or fetch docs), you need to wire them up yourself. It's a two-minute copy-paste job. -

- -

Project-Level Configuration

-

To enable for just this project, add this to .claude/settings.json in your project root:

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

Global Configuration

-

Or enable everywhere—every project on your machine gets these servers. Add to ~/.claude/settings.json:

-
-
{
-  "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 you add the config, restart Claude Code. Then test that everything works:

-
-
# Ask Claude what it has
-"What MCP tools do you have access to?"
-
-# Test Playwright (should work now)
-"Take a screenshot of the current directory listing"
-
-# Test Context7 (should fetch real docs)
-"Look up Rails Active Record documentation"
-
-# If either fails, double-check your JSON syntax and file paths
-
-
- - - -
-
-
- - - - - - - diff --git a/docs/pages/skills.html b/docs/pages/skills.html deleted file mode 100644 index a86ae91..0000000 --- a/docs/pages/skills.html +++ /dev/null @@ -1,611 +0,0 @@ - - - - - - Skill Reference - Compounding Engineering - - - - - - - - - - -
-
- - -
-
- - -
- -
-

Skill Reference

-

- Think of skills as reference manuals that Claude Code can read mid-conversation. When you're writing Rails code and want DHH's style, or building a gem like Andrew Kane would, you don't need to paste documentation—just invoke the skill. Claude reads it, absorbs the patterns, and writes code that way. -

- -
-

How to Use Skills

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

Skills vs Agents

-

- Agents are personas—they do things. Skills are knowledge—they teach Claude how to do things. Use claude agent [name] when you want someone to review your code. Use skill: [name] when you want to write code in a particular style yourself. -

-
-
- - -
-

Development Tools (8)

-

These skills teach Claude specific coding styles and architectural patterns. Use them when you want code that follows a particular philosophy—not just any working code, but code that looks like it was written by a specific person or framework.

- -
-
-

create-agent-skills

- Meta -
-

- You're writing a skill right now, but you're not sure if you're structuring the SKILL.md file correctly. Should the examples go before the theory? How do you organize workflows vs. references? This skill is the answer—it's the master template for building skills themselves. -

-

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

- The simpler, step-by-step version of create-agent-skills. When you just want a checklist to follow from blank file to packaged skill, use this. It's less about theory, more about "do step 1, then step 2." -

-

6-Step Process

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

dhh-rails-style

- Rails -
-

- Comprehensive 37signals Rails conventions based on Marc Köhlbrugge's analysis of 265 PRs from the Fizzy codebase. Covers everything from REST mapping to state-as-records, Turbo/Stimulus patterns, CSS with OKLCH colors, Minitest with fixtures, and Solid Queue/Cache/Cable patterns. -

-

Key Patterns

-
    -
  • REST Purity - Verbs become nouns (close → closure)
  • -
  • State as Records - Boolean columns → separate records
  • -
  • Fat Models - Business logic, authorization, broadcasting
  • -
  • Thin Controllers - 1-5 line actions with concerns
  • -
  • Current Attributes - Request context everywhere
  • -
  • Hotwire/Turbo - Model-level broadcasting, morphing
  • -
-

Reference Files (6)

-
    -
  • controllers.md - REST mapping, concerns, Turbo responses
  • -
  • models.md - Concerns, state records, callbacks, POROs
  • -
  • frontend.md - Turbo, Stimulus, CSS layers, OKLCH
  • -
  • architecture.md - Routing, auth, jobs, caching
  • -
  • testing.md - Minitest, fixtures, integration tests
  • -
  • gems.md - What to use vs avoid, decision framework
  • -
-
-
skill: dhh-rails-style
-
-
- -
-
-

andrew-kane-gem-writer

- Ruby -
-

- Andrew Kane has written 100+ Ruby gems with 374 million downloads. Every gem follows the same patterns: minimal dependencies, class macro DSLs, Rails integration without Rails coupling. When you're building a gem and want it to feel production-ready from day one, this is how you do it. -

-

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

- You're adding AI features to your Rails app, but you don't want brittle prompt strings scattered everywhere. DSPy.rb gives you type-safe signatures, composable predictors, and tool-using agents. This skill shows you how to use it—from basic inference to ReAct agents that iterate until they get the answer right. -

-

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

- You've seen what AI usually generates: Inter font, purple gradients, rounded corners on everything. This skill teaches Claude to design interfaces that don't look like every other AI-generated site. It's about purposeful typography, unexpected color palettes, and interfaces with personality. -

-

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

compound-docs

- Docs -
-

- You just fixed a weird build error after an hour of debugging. Tomorrow you'll forget how you fixed it. This skill automatically detects when you solve something (phrases like "that worked" or "it's fixed") and documents it with YAML frontmatter so you can find it again. Each documented solution compounds your team's knowledge. -

-

Auto-Triggers

-

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

-

7-Step Process

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

Categories

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

agent-native-architecture

- AI -
-

- Build AI agents using prompt-native architecture where features are defined in prompts, not code. When creating autonomous agents, designing MCP servers, or implementing self-modifying systems, this skill guides the "trust the agent's intelligence" philosophy. -

-

Key Patterns

-
    -
  • Prompt-Native Features - Define features in prompts, not code
  • -
  • MCP Tool Design - Build tools agents can use effectively
  • -
  • System Prompts - Write instructions that guide agent behavior
  • -
  • Self-Modification - Allow agents to improve their own prompts
  • -
-

Core Principle

-

Whatever the user can do, the agent can do. Whatever the user can see, the agent can see.

-
-
skill: agent-native-architecture
-
-
-
- - -
-

Content & Workflow (3)

-

Writing, editing, and organizing work. These skills handle everything from style guide compliance to git worktree management—the meta-work that makes the real work easier.

- -
-
-

every-style-editor

- Content -
-

- You wrote a draft, but you're not sure if it matches Every's style guide. Should "internet" be capitalized? Is this comma splice allowed? This skill does a four-phase line-by-line review: context, detailed edits, mechanical checks, and actionable recommendations. It's like having a copy editor who never gets tired. -

-

Four-Phase Review

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

Style Checks

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

file-todos

- Workflow -
-

- Your todo list is a bunch of markdown files in a todos/ directory. Each filename encodes status, priority, and description. No database, no UI, just files with YAML frontmatter. When you need to track work without setting up Jira, this is the system. -

-

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

- You're working on a feature branch, but you need to review a PR without losing your current work. Git worktrees let you have multiple branches checked out simultaneously in separate directories. This skill manages them—create, switch, cleanup—so you can context-switch without stashing or committing half-finished code. -

-

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 /review for isolated PR analysis
  • -
  • Works with /work for parallel feature development
  • -
-

Requirements

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

Image Generation (1)

-

Generate images with AI. Not stock photos you found on Unsplash—images you describe and the model creates.

- - -
- - - -
-
-
- - - - -