Files
claude-engineering-plugin/plugins/compounding-engineering/docs/index.html
Kieran Klaassen 2f73463110 Remove The Compounding Effect section from landing page
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 12:47:15 -08:00

949 lines
45 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="theme-dark">
<head>
<meta charset="utf-8" />
<title>Compounding Engineering - AI-Powered Development Tools for Claude Code</title>
<meta content="AI-powered development tools that get smarter with every use. 23 agents, 16 commands, 11 skills, two MCP servers." name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Compounding Engineering" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="Compounding Engineering - AI Development Tools" />
<meta property="og:description" content="AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Compounding Engineering" />
<meta name="twitter:description" content="AI-powered development tools for Claude Code" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/main.js" type="text/javascript" defer></script>
</head>
<body>
<div class="background-gradient"></div>
<div class="page-container">
<header class="nav-container">
<a href="index.html" class="nav-brand">
<span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
<span class="logo-text">Compounding Engineering</span>
</a>
<nav role="navigation" class="nav-menu" data-navigation>
<a href="#agents" class="nav-link">Agents</a>
<a href="#commands" class="nav-link">Commands</a>
<a href="#skills" class="nav-link">Skills</a>
<a href="#mcp-servers" class="nav-link">MCP Servers</a>
<a href="pages/getting-started.html" class="nav-link">Docs</a>
<div class="button-group stacked margin-top-l mobile-only">
<a href="#install" class="button primary">Install Plugin</a>
</div>
</nav>
<div class="button-group">
<a href="https://github.com/EveryInc/every-marketplace" class="button ghost compact hide-on-mobile">
<div class="fa-brands fa-github icon l"></div>
</a>
<a href="#install" class="button primary compact">Install</a>
<button class="button ghost compact nav-hamburger" data-mobile-toggle aria-label="Show menu">
<span class="fa-solid fa-bars icon m"></span>
</button>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-decoration"></div>
<div class="heading hero centered">
<a href="https://github.com/EveryInc/every-marketplace/releases" class="eyebrow">
<i class="fa-solid fa-rocket"></i> Version 2.6.0 released!
</a>
<h1 class="balanced" style="margin-bottom: 32px;">
AI-Powered Development Tools That Get Smarter With Every Use
</h1>
<p class="paragraph m secondary balanced" style="margin-bottom: 32px;">
Make each unit of engineering work easier than the last. 23 specialized agents, 16 powerful commands,
11 intelligent skills, and two MCP servers for code review, research, design, and workflow automation.
</p>
<div class="button-group margin-paragraph centered">
<a href="#install" class="button primary">
<i class="fa-solid fa-download"></i> Install Plugin
</a>
<a href="pages/getting-started.html" class="button tertiary">
<i class="fa-solid fa-book"></i> Read the Docs
</a>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats-section">
<div class="stats-container">
<div class="stat-card">
<div class="stat-icon"><i class="fa-solid fa-users-gear"></i></div>
<div class="stat-number">23</div>
<div class="stat-label">Specialized Agents</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fa-solid fa-terminal"></i></div>
<div class="stat-number">16</div>
<div class="stat-label">Slash Commands</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
<div class="stat-number">11</div>
<div class="stat-label">Intelligent Skills</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fa-solid fa-server"></i></div>
<div class="stat-number">2</div>
<div class="stat-label">MCP Servers</div>
</div>
</div>
</section>
<!-- Philosophy Section -->
<section id="philosophy" class="philosophy-section">
<div class="heading centered">
<h2 class="no-top-margin" style="font-size: 42px; margin-bottom: 16px;">The Compounding Engineering Philosophy</h2>
<p class="paragraph l secondary balanced" style="font-size: 21px; line-height: 1.6; font-weight: 500;">
Every unit of engineering work should make subsequent units of work <em style="color: var(--color-accent); font-style: normal;">easier</em>&mdash;not harder.
</p>
</div>
<!-- Philosophy Quote -->
<div class="philosophy-quote">
<blockquote>
"Most engineering creates linear value: you build a feature, it works, done.
Compounding engineering creates exponential value: each solved problem teaches the system,
each pattern becomes reusable, each review strengthens future reviews."
</blockquote>
</div>
<!-- The Four Pillars -->
<div class="philosophy-pillars">
<div class="pillar">
<div class="pillar-icon"><i class="fa-solid fa-brain"></i></div>
<div class="pillar-content">
<h3>Plan</h3>
<p class="pillar-tagline">Understand before you build</p>
<p class="pillar-description">
Before writing a single line of code, gather context. Research agents explore
documentation, analyze git history, and find best practices. The <code>/workflows:plan</code>
command orchestrates three research agents in parallel to create comprehensive implementation plans.
</p>
<div class="pillar-tools">
<span class="tool-tag">framework-docs-researcher</span>
<span class="tool-tag">best-practices-researcher</span>
<span class="tool-tag">repo-research-analyst</span>
<span class="tool-tag">git-history-analyzer</span>
</div>
</div>
</div>
<div class="pillar">
<div class="pillar-icon"><i class="fa-solid fa-robot"></i></div>
<div class="pillar-content">
<h3>Delegate</h3>
<p class="pillar-tagline">Leverage specialized expertise</p>
<p class="pillar-description">
Each agent brings deep domain knowledge. The <code>kieran-rails-reviewer</code> knows Rails
conventions like an expert. The <code>security-sentinel</code> catches OWASP vulnerabilities.
The <code>/workflows:work</code> command executes plans while maintaining quality gates.
</p>
<div class="pillar-tools">
<span class="tool-tag">24 specialized agents</span>
<span class="tool-tag">/workflows:work</span>
<span class="tool-tag">dhh-ruby-style skill</span>
<span class="tool-tag">git-worktree skill</span>
</div>
</div>
</div>
<div class="pillar">
<div class="pillar-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
<div class="pillar-content">
<h3>Assess</h3>
<p class="pillar-tagline">Multiple perspectives, comprehensive coverage</p>
<p class="pillar-description">
The <code>/workflows:review</code> command launches 12 or more review agents in parallel: security,
performance, architecture, data integrity, patterns, and more. Findings are categorized by
severity (P1/P2/P3) and stored as actionable todo files.
</p>
<div class="pillar-tools">
<span class="tool-tag">security-sentinel</span>
<span class="tool-tag">performance-oracle</span>
<span class="tool-tag">architecture-strategist</span>
<span class="tool-tag">data-integrity-guardian</span>
</div>
</div>
</div>
<div class="pillar">
<div class="pillar-icon"><i class="fa-solid fa-book"></i></div>
<div class="pillar-content">
<h3>Codify</h3>
<p class="pillar-tagline">Turn solutions into knowledge</p>
<p class="pillar-description">
Every solved problem should teach the system. The <code>/workflows:codify</code> command
captures solutions as searchable documentation with YAML frontmatter for fast lookup.
</p>
<div class="pillar-tools">
<span class="tool-tag">/workflows:codify</span>
<span class="tool-tag">codify-docs skill</span>
<span class="tool-tag">file-todos skill</span>
</div>
</div>
</div>
</div>
</section>
<!-- Agents Section -->
<section id="agents">
<div class="heading">
<h2 class="no-top-margin">
<i class="fa-solid fa-users-gear color-accent"></i> 23 Specialized Agents
</h2>
<p class="paragraph m secondary">
Each agent brings deep expertise in a specific domain. Run them individually or orchestrate
multiple agents in parallel for comprehensive analysis.
</p>
</div>
<!-- Review Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-code-pull-request"></i> Review Agents (10)</h3>
<div class="grid columns-2">
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">kieran-rails-reviewer</span>
<span class="agent-badge">Rails</span>
</div>
<p class="agent-description">Super senior Rails developer with impeccable taste. Applies strict conventions for Turbo Streams, namespacing, and the "duplication over complexity" philosophy.</p>
<code class="agent-usage">claude agent kieran-rails-reviewer</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">dhh-rails-reviewer</span>
<span class="agent-badge">Rails</span>
</div>
<p class="agent-description">Reviews code from DHH's perspective. Focus on Rails conventions, simplicity, and avoiding over-engineering.</p>
<code class="agent-usage">claude agent dhh-rails-reviewer</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">kieran-python-reviewer</span>
<span class="agent-badge">Python</span>
</div>
<p class="agent-description">Python code review with strict conventions. PEP 8 compliance, type hints, and Pythonic patterns.</p>
<code class="agent-usage">claude agent kieran-python-reviewer</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">kieran-typescript-reviewer</span>
<span class="agent-badge">TypeScript</span>
</div>
<p class="agent-description">TypeScript review with focus on type safety, modern patterns, and clean architecture.</p>
<code class="agent-usage">claude agent kieran-typescript-reviewer</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">security-sentinel</span>
<span class="agent-badge critical">Security</span>
</div>
<p class="agent-description">Security audits and vulnerability assessments. OWASP top 10, injection attacks, authentication flaws.</p>
<code class="agent-usage">claude agent security-sentinel</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">performance-oracle</span>
<span class="agent-badge">Performance</span>
</div>
<p class="agent-description">Performance analysis and optimization recommendations. N+1 queries, caching strategies, bottleneck identification.</p>
<code class="agent-usage">claude agent performance-oracle</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">architecture-strategist</span>
<span class="agent-badge">Architecture</span>
</div>
<p class="agent-description">Analyze architectural decisions, compliance, and system design patterns.</p>
<code class="agent-usage">claude agent architecture-strategist</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">data-integrity-guardian</span>
<span class="agent-badge critical">Data</span>
</div>
<p class="agent-description">Database migrations and data integrity review. Schema changes, foreign keys, data consistency.</p>
<code class="agent-usage">claude agent data-integrity-guardian</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">pattern-recognition-specialist</span>
<span class="agent-badge">Patterns</span>
</div>
<p class="agent-description">Analyze code for patterns and anti-patterns. Design patterns, code smells, refactoring opportunities.</p>
<code class="agent-usage">claude agent pattern-recognition-specialist</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">code-simplicity-reviewer</span>
<span class="agent-badge">Quality</span>
</div>
<p class="agent-description">Final pass for simplicity and minimalism. Remove unnecessary complexity, improve readability.</p>
<code class="agent-usage">claude agent code-simplicity-reviewer</code>
</div>
</div>
</div>
<!-- Research Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-microscope"></i> Research Agents (four)</h3>
<div class="grid columns-2">
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">framework-docs-researcher</span>
<span class="agent-badge">Research</span>
</div>
<p class="agent-description">Research framework documentation and best practices. Find official guidance and community patterns.</p>
<code class="agent-usage">claude agent framework-docs-researcher</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">best-practices-researcher</span>
<span class="agent-badge">Research</span>
</div>
<p class="agent-description">Gather external best practices and examples from the community and industry standards.</p>
<code class="agent-usage">claude agent best-practices-researcher</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">git-history-analyzer</span>
<span class="agent-badge">Git</span>
</div>
<p class="agent-description">Analyze git history and code evolution. Understand how code has changed and why.</p>
<code class="agent-usage">claude agent git-history-analyzer</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">repo-research-analyst</span>
<span class="agent-badge">Research</span>
</div>
<p class="agent-description">Research repository structure and conventions. Understand project patterns and organization.</p>
<code class="agent-usage">claude agent repo-research-analyst</code>
</div>
</div>
</div>
<!-- Design Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-palette"></i> Design Agents (three)</h3>
<div class="grid columns-3">
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">design-iterator</span>
<span class="agent-badge">Design</span>
</div>
<p class="agent-description">Iteratively refine UI through systematic design iterations with screenshots and feedback loops.</p>
<code class="agent-usage">claude agent design-iterator</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">figma-design-sync</span>
<span class="agent-badge">Figma</span>
</div>
<p class="agent-description">Synchronize web implementations with Figma designs. Pixel-perfect matching.</p>
<code class="agent-usage">claude agent figma-design-sync</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">design-implementation-reviewer</span>
<span class="agent-badge">Review</span>
</div>
<p class="agent-description">Verify UI implementations match Figma designs. Catch visual regressions.</p>
<code class="agent-usage">claude agent design-implementation-reviewer</code>
</div>
</div>
</div>
<!-- Workflow Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-gears"></i> Workflow Agents (five)</h3>
<div class="grid columns-2">
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">bug-reproduction-validator</span>
<span class="agent-badge">Bugs</span>
</div>
<p class="agent-description">Systematically reproduce and validate bug reports. Create minimal reproduction cases.</p>
<code class="agent-usage">claude agent bug-reproduction-validator</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">pr-comment-resolver</span>
<span class="agent-badge">PR</span>
</div>
<p class="agent-description">Address PR comments and implement fixes. Batch process review feedback.</p>
<code class="agent-usage">claude agent pr-comment-resolver</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">lint</span>
<span class="agent-badge">Quality</span>
</div>
<p class="agent-description">Run linting and code quality checks on Ruby and ERB files.</p>
<code class="agent-usage">claude agent lint</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">spec-flow-analyzer</span>
<span class="agent-badge">Testing</span>
</div>
<p class="agent-description">Analyze user flows and identify gaps in specifications.</p>
<code class="agent-usage">claude agent spec-flow-analyzer</code>
</div>
<div class="agent-card">
<div class="agent-header">
<span class="agent-name">every-style-editor</span>
<span class="agent-badge">Content</span>
</div>
<p class="agent-description">Edit content to conform to Every's style guide.</p>
<code class="agent-usage">claude agent every-style-editor</code>
</div>
</div>
</div>
<!-- Docs Agent -->
<div class="agent-category">
<h3><i class="fa-solid fa-file-lines"></i> Documentation Agent (one)</h3>
<div class="grid">
<div class="agent-card full-width">
<div class="agent-header">
<span class="agent-name">ankane-readme-writer</span>
<span class="agent-badge">Docs</span>
</div>
<p class="agent-description">Create READMEs following Ankane-style template for Ruby gems. Clean, concise, comprehensive documentation that gets straight to the point.</p>
<code class="agent-usage">claude agent ankane-readme-writer</code>
</div>
</div>
</div>
</section>
<!-- Commands Section -->
<section id="commands">
<div class="heading">
<h2 class="no-top-margin">
<i class="fa-solid fa-terminal color-accent"></i> 16 Powerful Commands
</h2>
<p class="paragraph m secondary">
Slash commands for common workflows. From code review to bug triage,
these commands automate complex multi-step processes.
</p>
</div>
<!-- Workflow Commands -->
<div class="command-category">
<h3><i class="fa-solid fa-arrows-spin"></i> Workflow Commands</h3>
<div class="grid columns-2">
<div class="command-card">
<div class="command-header">
<code class="command-name">/workflows:plan</code>
<span class="command-type-badge">core</span>
</div>
<p class="command-description">Create comprehensive implementation plans with research agents and stakeholder analysis.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/workflows:review</code>
<span class="command-type-badge">core</span>
</div>
<p class="command-description">Run exhaustive code reviews using 12 or more parallel agents, ultra-thinking, and worktrees.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/workflows:work</code>
<span class="command-type-badge">core</span>
</div>
<p class="command-description">Execute work items systematically with progress tracking and validation.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/workflows:codify</code>
<span class="command-type-badge">core</span>
</div>
<p class="command-description">Document solved problems for the knowledge base. Turn learnings into reusable patterns.</p>
</div>
</div>
</div>
<!-- Utility Commands -->
<div class="command-category">
<h3><i class="fa-solid fa-wrench"></i> Utility Commands</h3>
<div class="grid columns-3">
<div class="command-card">
<div class="command-header">
<code class="command-name">/changelog</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Create engaging changelogs for recent merges.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/create-agent-skill</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Create or edit Claude Code skills with expert guidance.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/generate_command</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Generate new slash commands from templates.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/heal-skill</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Fix skill documentation issues automatically.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/plan_review</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Multi-agent plan review in parallel.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/prime</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Prime/setup command for project initialization.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/report-bug</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Report bugs in the plugin with structured templates.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/reproduce-bug</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Reproduce bugs using logs and console output.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/triage</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Triage and prioritize issues interactively.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/resolve_parallel</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Resolve TODO comments in parallel.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/resolve_pr_parallel</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Resolve PR comments in parallel.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/resolve_todo_parallel</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Resolve file-based todos in parallel.</p>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills">
<div class="heading">
<h2 class="no-top-margin">
<i class="fa-solid fa-wand-magic-sparkles color-accent"></i> 11 Intelligent Skills
</h2>
<p class="paragraph m secondary">
Skills provide deep domain expertise that Claude Code can invoke on-demand.
From Ruby gem patterns to image generation.
</p>
</div>
<!-- Development Tools -->
<div class="skill-category">
<h3><i class="fa-solid fa-code"></i> Development Tools</h3>
<div class="grid columns-2">
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">andrew-kane-gem-writer</span>
<span class="skill-badge">Ruby</span>
</div>
<p class="skill-description">Write Ruby gems following Andrew Kane's patterns. Clean APIs, smart defaults, comprehensive testing.</p>
<code class="skill-usage">skill: andrew-kane-gem-writer</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">dhh-ruby-style</span>
<span class="skill-badge">Rails</span>
</div>
<p class="skill-description">Write Ruby/Rails code in DHH's 37signals style. Convention over configuration, beautiful code.</p>
<code class="skill-usage">skill: dhh-ruby-style</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">dspy-ruby</span>
<span class="skill-badge">AI</span>
</div>
<p class="skill-description">Build type-safe LLM applications with DSPy.rb. Structured prompting, optimization, providers.</p>
<code class="skill-usage">skill: dspy-ruby</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">frontend-design</span>
<span class="skill-badge">Design</span>
</div>
<p class="skill-description">Create production-grade frontend interfaces with modern CSS, responsive design, accessibility.</p>
<code class="skill-usage">skill: frontend-design</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">create-agent-skills</span>
<span class="skill-badge">Meta</span>
</div>
<p class="skill-description">Expert guidance for creating Claude Code skills. Templates, best practices, validation.</p>
<code class="skill-usage">skill: create-agent-skills</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">skill-creator</span>
<span class="skill-badge">Meta</span>
</div>
<p class="skill-description">Guide for creating effective Claude Code skills with structured workflows.</p>
<code class="skill-usage">skill: skill-creator</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">codify-docs</span>
<span class="skill-badge">Docs</span>
</div>
<p class="skill-description">Capture solved problems as categorized documentation with YAML schema.</p>
<code class="skill-usage">skill: codify-docs</code>
</div>
</div>
</div>
<!-- Content & Workflow -->
<div class="skill-category">
<h3><i class="fa-solid fa-pen-fancy"></i> Content & Workflow</h3>
<div class="grid columns-3">
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">every-style-editor</span>
<span class="skill-badge">Content</span>
</div>
<p class="skill-description">Review copy for Every's style guide compliance.</p>
<code class="skill-usage">skill: every-style-editor</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">file-todos</span>
<span class="skill-badge">Workflow</span>
</div>
<p class="skill-description">File-based todo tracking system with priorities and status.</p>
<code class="skill-usage">skill: file-todos</code>
</div>
<div class="skill-card">
<div class="skill-header">
<span class="skill-name">git-worktree</span>
<span class="skill-badge">Git</span>
</div>
<p class="skill-description">Manage Git worktrees for parallel development on multiple branches.</p>
<code class="skill-usage">skill: git-worktree</code>
</div>
</div>
</div>
<!-- Image Generation -->
<div class="skill-category">
<h3><i class="fa-solid fa-image"></i> Image Generation</h3>
<div class="grid">
<div class="skill-card featured full-width">
<div class="skill-header">
<span class="skill-name">gemini-imagegen</span>
<span class="skill-badge highlight">AI Images</span>
</div>
<p class="skill-description">
Generate and edit images using Google's Gemini API. Text-to-image, image editing,
multi-turn refinement, and composition from up to 14 reference images.
</p>
<div class="skill-features">
<div class="feature-item">
<i class="fa-solid fa-check"></i> Text-to-image generation
</div>
<div class="feature-item">
<i class="fa-solid fa-check"></i> Image editing & manipulation
</div>
<div class="feature-item">
<i class="fa-solid fa-check"></i> Multi-turn refinement
</div>
<div class="feature-item">
<i class="fa-solid fa-check"></i> Multiple reference images (up to 14)
</div>
<div class="feature-item">
<i class="fa-solid fa-check"></i> Google Search grounding (Pro)
</div>
</div>
<code class="skill-usage">skill: gemini-imagegen</code>
<p class="skill-note">Requires: GEMINI_API_KEY environment variable</p>
</div>
</div>
</div>
</section>
<!-- MCP Servers Section -->
<section id="mcp-servers">
<div class="heading">
<h2 class="no-top-margin">
<i class="fa-solid fa-server color-accent"></i> Two MCP Servers
</h2>
<p class="paragraph m secondary">
Model Context Protocol servers extend Claude Code's capabilities with
browser automation and framework documentation lookup.
</p>
</div>
<div class="grid columns-2">
<div class="mcp-card mcp-card-browser">
<div class="mcp-header">
<i class="fa-brands fa-chrome mcp-icon"></i>
<span class="mcp-name">Playwright</span>
</div>
<p class="mcp-description">Browser automation for testing, screenshots, and web interactions.</p>
<div class="mcp-tools">
<h4>Tools Provided: <span class="tools-count">6 tools</span></h4>
<ul>
<li><code>browser_navigate</code> - Navigate to URLs</li>
<li><code>browser_take_screenshot</code> - Take screenshots</li>
<li><code>browser_click</code> - Click elements</li>
<li><code>browser_fill_form</code> - Fill form fields</li>
<li><code>browser_snapshot</code> - Get accessibility snapshot</li>
<li><code>browser_evaluate</code> - Execute JavaScript</li>
</ul>
</div>
</div>
<div class="mcp-card mcp-card-docs">
<div class="mcp-header">
<i class="fa-solid fa-book-open mcp-icon"></i>
<span class="mcp-name">Context7</span>
</div>
<p class="mcp-description">Framework documentation lookup for more than 100 frameworks.</p>
<div class="mcp-tools">
<h4>Tools Provided: <span class="tools-count">2 tools</span></h4>
<ul>
<li><code>resolve-library-id</code> - Find library ID</li>
<li><code>get-library-docs</code> - Get documentation</li>
</ul>
<p class="mcp-note">Supports: Rails, React, Next.js, Vue, Django, Laravel, and more than 100 others</p>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section id="install" class="install-section">
<div class="heading centered">
<h2 class="no-top-margin">Get Started in Seconds</h2>
<p class="paragraph m secondary">
Install the plugin and start using AI-powered development tools immediately.
</p>
</div>
<div class="install-steps">
<div class="install-step">
<div class="step-number">1</div>
<div class="step-content">
<h3>Add the Marketplace</h3>
<div class="card-code-block">
<pre><code>claude /plugin marketplace add https://github.com/EveryInc/every-marketplace</code></pre>
</div>
</div>
</div>
<div class="install-step">
<div class="step-number">2</div>
<div class="step-content">
<h3>Install the Plugin</h3>
<div class="card-code-block">
<pre><code>claude /plugin install compounding-engineering</code></pre>
</div>
</div>
</div>
<div class="install-step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Start Using</h3>
<div class="card-code-block">
<pre><code># Run a code review
/workflows:review PR#123
# Use an agent
claude agent kieran-rails-reviewer
# Invoke a skill
skill: gemini-imagegen</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq">
<div class="heading centered">
<h2 class="no-top-margin">Frequently Asked Questions</h2>
</div>
<div class="accordion-container">
<details class="accordion-item" name="faq">
<summary class="accordion-toggle">
<p class="paragraph m bold">What is Compounding Engineering?</p>
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
</summary>
<div class="accordion-content">
<p>
Compounding Engineering is a philosophy that every unit of engineering work should make subsequent
units easier&mdash;not harder. This plugin embodies that philosophy with tools that learn from patterns,
automate repetitive tasks, and build institutional knowledge.
</p>
</div>
</details>
<details class="accordion-item" name="faq">
<summary class="accordion-toggle">
<p class="paragraph m bold">How do agents differ from skills?</p>
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
</summary>
<div class="accordion-content">
<p>
<strong>Agents</strong> are specialized personas that can be invoked to perform specific tasks
(e.g., code review, research). They're called with <code>claude agent [name]</code>.
</p>
<p>
<strong>Skills</strong> provide domain expertise that Claude Code can use on-demand. They include
reference materials, templates, and workflows. They're invoked with <code>skill: [name]</code>.
</p>
</div>
</details>
<details class="accordion-item" name="faq">
<summary class="accordion-toggle">
<p class="paragraph m bold">Why aren't MCP servers loading automatically?</p>
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
</summary>
<div class="accordion-content">
<p>
This is a known issue. As a workaround, manually add the MCP servers to your
<code>.claude/settings.json</code> file. See the README for the exact configuration.
</p>
</div>
</details>
<details class="accordion-item" name="faq">
<summary class="accordion-toggle">
<p class="paragraph m bold">Can I use this with languages other than Ruby/Rails?</p>
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
</summary>
<div class="accordion-content">
<p>
Yes! While many agents are specialized for Rails, we also have Python and TypeScript reviewers.
The workflow commands, research agents, and skills like gemini-imagegen work with any language.
</p>
</div>
</details>
<details class="accordion-item" name="faq">
<summary class="accordion-toggle">
<p class="paragraph m bold">How do I create my own agents or skills?</p>
<span class="accordion-chevron fa-solid fa-chevron-down"></span>
</summary>
<div class="accordion-content">
<p>
Use the <code>/create-agent-skill</code> command or the <code>create-agent-skills</code> skill
for expert guidance. The skill includes templates, best practices, and validation workflows.
</p>
</div>
</details>
</div>
</section>
<!-- CTA Section -->
<section class="promo-cta">
<div class="heading centered">
<span class="cta-badge"><i class="fa-solid fa-bolt"></i> Free & Open Source</span>
<h2>Transform Your Development Workflow in Minutes</h2>
<p class="paragraph m cta-subheading">
<strong>Install once. Compound forever.</strong> Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you—starting now.
</p>
<div class="button-group margin-paragraph centered">
<a href="#install" class="button primary cta-primary">
<i class="fa-solid fa-download"></i> Install Plugin Now
<span class="button-arrow"></span>
</a>
<a href="https://github.com/EveryInc/every-marketplace" class="button tertiary cta-secondary">
<i class="fa-brands fa-github"></i> View on GitHub
</a>
</div>
<p class="cta-trust">Join 1,000+ developers building smarter with AI-powered workflows</p>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-menu">
<div>
<p class="paragraph s">
&copy; 2025 Every, Inc.<br />
Built with <a href="https://launchkit.evilmartians.io" target="_blank">LaunchKit</a> template by
<a href="https://evilmartians.com" target="_blank">Evil Martians</a>
</p>
</div>
<div>
<div class="link-list">
<a href="#agents" class="ui s">Agents</a>
<a href="#commands" class="ui s">Commands</a>
<a href="#skills" class="ui s">Skills</a>
<a href="pages/getting-started.html" class="ui s">Documentation</a>
</div>
</div>
<div>
<div class="link-list">
<a href="https://github.com/EveryInc/every-marketplace" class="icon-link ui s" target="_blank">
<div class="fa-brands fa-github icon m color-accent"></div>
<div class="pseudo-link">GitHub</div>
</a>
<a href="https://every.to" class="icon-link ui s" target="_blank">
<div class="fa-solid fa-globe icon m color-accent"></div>
<div class="pseudo-link">Every.to</div>
</a>
</div>
</div>
</div>
<div class="link-list-horizontal">
<a href="https://every.to/legal/privacy" class="ui s tertiary">Privacy Policy</a>
<a href="https://every.to/legal/terms" class="ui s tertiary">Terms of Service</a>
</div>
</footer>
</div>
</body>
</html>