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