Files
claude-engineering-plugin/docs/pages/skills.html
Kieran Klaassen c05708162c Move docs to /docs for GitHub Pages
GitHub Pages is configured to serve from /docs in main branch.
Moved documentation site from plugins/compounding-engineering/docs/
to repository root /docs folder.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

598 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="theme-dark">
<head>
<meta charset="utf-8" />
<title>Skill Reference - Compounding Engineering</title>
<meta content="Complete reference for all 11 intelligent skills in the Compounding Engineering plugin." name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<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" />
<link href="../css/docs.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="docs-layout">
<aside class="docs-sidebar">
<div class="sidebar-header">
<a href="../index.html" class="nav-brand">
<span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
<span class="logo-text">CE Docs</span>
</a>
</div>
<nav class="sidebar-nav">
<div class="nav-section">
<h3>Getting Started</h3>
<ul>
<li><a href="getting-started.html">Installation</a></li>
</ul>
</div>
<div class="nav-section">
<h3>Reference</h3>
<ul>
<li><a href="agents.html">Agents (23)</a></li>
<li><a href="commands.html">Commands (13)</a></li>
<li><a href="skills.html" class="active">Skills (11)</a></li>
<li><a href="mcp-servers.html">MCP Servers (2)</a></li>
</ul>
</div>
<div class="nav-section">
<h3>Resources</h3>
<ul>
<li><a href="changelog.html">Changelog</a></li>
</ul>
</div>
<div class="nav-section">
<h3>On This Page</h3>
<ul>
<li><a href="#development-tools">Development (7)</a></li>
<li><a href="#content-workflow">Content & Workflow (3)</a></li>
<li><a href="#image-generation">Image Generation (1)</a></li>
</ul>
</div>
</nav>
</aside>
<main class="docs-content">
<div class="docs-header">
<nav class="breadcrumb">
<a href="../index.html">Home</a>
<span>/</span>
<a href="getting-started.html">Docs</a>
<span>/</span>
<span>Skills</span>
</nav>
<button class="mobile-menu-toggle" data-sidebar-toggle>
<i class="fa-solid fa-bars"></i>
</button>
</div>
<article class="docs-article">
<h1><i class="fa-solid fa-wand-magic-sparkles color-accent"></i> Skill Reference</h1>
<p class="lead">
Complete documentation for all 11 intelligent skills. Skills provide deep domain expertise
that Claude Code can invoke on-demand, including references, templates, and workflows.
</p>
<div class="usage-box">
<h3>How to Use Skills</h3>
<div class="card-code-block">
<pre><code># In your prompt, reference the skill
skill: [skill-name]
# Examples
skill: gemini-imagegen
skill: dhh-ruby-style
skill: create-agent-skills</code></pre>
</div>
</div>
<div class="callout callout-info">
<div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
<div class="callout-content">
<h4>Skills vs Agents</h4>
<p>
<strong>Agents</strong> are specialized personas invoked with <code>claude agent [name]</code>.
<strong>Skills</strong> are bodies of knowledge (references, templates, workflows) invoked with <code>skill: [name]</code>.
</p>
</div>
</div>
<!-- Development Tools -->
<section id="development-tools">
<h2><i class="fa-solid fa-code"></i> Development Tools (7)</h2>
<p>Skills for code generation, gem writing, and development patterns.</p>
<div class="skill-detail" id="create-agent-skills">
<div class="skill-detail-header">
<h3>create-agent-skills</h3>
<span class="skill-badge">Meta</span>
</div>
<p class="skill-detail-description">
Expert guidance for creating, writing, building, and refining Claude Code Skills.
Use when working with SKILL.md files or authoring new skills.
</p>
<h4>Capabilities</h4>
<ul>
<li>Skill architecture and best practices</li>
<li>Router pattern for complex multi-step skills</li>
<li>Progressive disclosure design principles</li>
<li>SKILL.md structure guidance</li>
<li>Asset management (workflows, references, templates, scripts)</li>
<li>XML structure patterns</li>
</ul>
<h4>Workflows Included</h4>
<ul>
<li><code>create-new-skill</code> - Start from scratch</li>
<li><code>add-reference</code> - Add reference documentation</li>
<li><code>add-template</code> - Add code templates</li>
<li><code>add-workflow</code> - Add step-by-step procedures</li>
<li><code>add-script</code> - Add executable scripts</li>
<li><code>audit-skill</code> - Validate skill structure</li>
<li><code>verify-skill</code> - Test skill functionality</li>
</ul>
<div class="card-code-block">
<pre><code>skill: create-agent-skills</code></pre>
</div>
</div>
<div class="skill-detail" id="skill-creator">
<div class="skill-detail-header">
<h3>skill-creator</h3>
<span class="skill-badge">Meta</span>
</div>
<p class="skill-detail-description">
Guide for creating effective skills with a 6-step process.
</p>
<h4>6-Step Process</h4>
<ol>
<li>Understand skill usage patterns with examples</li>
<li>Plan reusable skill contents</li>
<li>Initialize skill using template</li>
<li>Edit skill with clear instructions</li>
<li>Package skill into distributable zip</li>
<li>Iterate based on testing feedback</li>
</ol>
<div class="card-code-block">
<pre><code>skill: skill-creator</code></pre>
</div>
</div>
<div class="skill-detail" id="dhh-ruby-style">
<div class="skill-detail-header">
<h3>dhh-ruby-style</h3>
<span class="skill-badge">Rails</span>
</div>
<p class="skill-detail-description">
Write Ruby and Rails code in DHH's distinctive 37signals style.
Triggers on Ruby/Rails code generation or when mentioning DHH, 37signals, Basecamp, HEY.
</p>
<h4>Key Patterns</h4>
<ul>
<li><strong>REST Purity</strong> - 7 REST actions only</li>
<li><strong>Fat Models</strong> - Business logic, authorization, broadcasting in models</li>
<li><strong>Thin Controllers</strong> - 1-5 line actions</li>
<li><strong>Current Attributes</strong> - Request context</li>
<li><strong>Hotwire/Turbo</strong> - Model-level broadcasting</li>
</ul>
<h4>Ruby Syntax Preferences</h4>
<ul>
<li>Symbol arrays <code>%i[...]</code></li>
<li>Modern hash syntax</li>
<li>Ternaries for simple conditionals</li>
<li>Bang methods for mutations</li>
</ul>
<div class="card-code-block">
<pre><code>skill: dhh-ruby-style</code></pre>
</div>
</div>
<div class="skill-detail" id="andrew-kane-gem-writer">
<div class="skill-detail-header">
<h3>andrew-kane-gem-writer</h3>
<span class="skill-badge">Ruby</span>
</div>
<p class="skill-detail-description">
Write Ruby gems following Andrew Kane's proven patterns and philosophy.
Based on 100+ gems with 374M+ downloads.
</p>
<h4>Philosophy</h4>
<ul>
<li>Simplicity over cleverness</li>
<li>Zero or minimal dependencies</li>
<li>Explicit code over metaprogramming</li>
<li>Rails integration without Rails coupling</li>
</ul>
<h4>Key Patterns</h4>
<ul>
<li>Class macro DSL for configuration</li>
<li><code>ActiveSupport.on_load</code> for Rails integration</li>
<li><code>class << self</code> with <code>attr_accessor</code></li>
<li>Railtie pattern for hooks</li>
<li>Minitest (no RSpec)</li>
</ul>
<h4>Reference Files</h4>
<ul>
<li><code>references/module-organization.md</code></li>
<li><code>references/rails-integration.md</code></li>
<li><code>references/database-adapters.md</code></li>
<li><code>references/testing-patterns.md</code></li>
</ul>
<div class="card-code-block">
<pre><code>skill: andrew-kane-gem-writer</code></pre>
</div>
</div>
<div class="skill-detail" id="dspy-ruby">
<div class="skill-detail-header">
<h3>dspy-ruby</h3>
<span class="skill-badge">AI</span>
</div>
<p class="skill-detail-description">
Build type-safe, composable LLM applications with DSPy.rb.
Use when implementing predictable AI features in Ruby.
</p>
<h4>Predictor Types</h4>
<ul>
<li><strong>Predict</strong> - Basic inference</li>
<li><strong>ChainOfThought</strong> - Reasoning with explanations</li>
<li><strong>ReAct</strong> - Tool-using agents with iteration</li>
<li><strong>CodeAct</strong> - Dynamic code generation</li>
</ul>
<h4>Supported Providers</h4>
<ul>
<li>OpenAI (GPT-4, GPT-4o-mini)</li>
<li>Anthropic Claude</li>
<li>Google Gemini</li>
<li>Ollama (free, local)</li>
<li>OpenRouter</li>
</ul>
<h4>Requirements</h4>
<table class="docs-table">
<tr>
<td><code>OPENAI_API_KEY</code></td>
<td>For OpenAI provider</td>
</tr>
<tr>
<td><code>ANTHROPIC_API_KEY</code></td>
<td>For Anthropic provider</td>
</tr>
<tr>
<td><code>GOOGLE_API_KEY</code></td>
<td>For Gemini provider</td>
</tr>
</table>
<div class="card-code-block">
<pre><code>skill: dspy-ruby</code></pre>
</div>
</div>
<div class="skill-detail" id="frontend-design">
<div class="skill-detail-header">
<h3>frontend-design</h3>
<span class="skill-badge">Design</span>
</div>
<p class="skill-detail-description">
Create distinctive, production-grade frontend interfaces.
Generates creative, polished code that avoids generic AI aesthetics.
</p>
<h4>Design Thinking</h4>
<ul>
<li><strong>Purpose</strong> - What is the interface for?</li>
<li><strong>Tone</strong> - What feeling should it evoke?</li>
<li><strong>Constraints</strong> - Technical and brand limitations</li>
<li><strong>Differentiation</strong> - How to stand out</li>
</ul>
<h4>Focus Areas</h4>
<ul>
<li>Typography with distinctive font choices</li>
<li>Color & theme coherence with CSS variables</li>
<li>Motion and animation patterns</li>
<li>Spatial composition with asymmetry</li>
<li>Backgrounds (gradients, textures, patterns)</li>
</ul>
<div class="callout callout-tip">
<div class="callout-icon"><i class="fa-solid fa-lightbulb"></i></div>
<div class="callout-content">
<p>Avoids generic AI aesthetics like Inter fonts, purple gradients, and rounded corners everywhere.</p>
</div>
</div>
<div class="card-code-block">
<pre><code>skill: frontend-design</code></pre>
</div>
</div>
<div class="skill-detail" id="codify-docs">
<div class="skill-detail-header">
<h3>codify-docs</h3>
<span class="skill-badge">Docs</span>
</div>
<p class="skill-detail-description">
Capture solved problems as categorized documentation with YAML frontmatter for fast lookup.
</p>
<h4>Auto-Triggers</h4>
<p>Phrases: "that worked", "it's fixed", "working now", "problem solved"</p>
<h4>7-Step Process</h4>
<ol>
<li>Detect confirmation phrase</li>
<li>Gather context (module, symptom, investigation, root cause)</li>
<li>Check existing docs for similar issues</li>
<li>Generate filename</li>
<li>Validate YAML frontmatter</li>
<li>Create documentation in category directory</li>
<li>Cross-reference related issues</li>
</ol>
<h4>Categories</h4>
<ul>
<li><code>build-errors/</code></li>
<li><code>test-failures/</code></li>
<li><code>runtime-errors/</code></li>
<li><code>performance-issues/</code></li>
<li><code>database-issues/</code></li>
<li><code>security-issues/</code></li>
</ul>
<div class="card-code-block">
<pre><code>skill: codify-docs</code></pre>
</div>
</div>
</section>
<!-- Content & Workflow -->
<section id="content-workflow">
<h2><i class="fa-solid fa-pen-fancy"></i> Content & Workflow (3)</h2>
<p>Skills for content editing, task tracking, and parallel development.</p>
<div class="skill-detail" id="every-style-editor">
<div class="skill-detail-header">
<h3>every-style-editor</h3>
<span class="skill-badge">Content</span>
</div>
<p class="skill-detail-description">
Review and edit copy to ensure adherence to Every's style guide.
Provides systematic line-by-line review.
</p>
<h4>Four-Phase Review</h4>
<ol>
<li><strong>Initial Assessment</strong> - Context, type, audience, tone</li>
<li><strong>Detailed Line Edit</strong> - Sentence structure, punctuation, capitalization</li>
<li><strong>Mechanical Review</strong> - Spacing, formatting, consistency</li>
<li><strong>Recommendations</strong> - Actionable improvement suggestions</li>
</ol>
<h4>Style Checks</h4>
<ul>
<li>Grammar and punctuation</li>
<li>Style guide compliance</li>
<li>Capitalization rules</li>
<li>Word choice optimization</li>
<li>Formatting consistency</li>
</ul>
<div class="card-code-block">
<pre><code>skill: every-style-editor</code></pre>
</div>
</div>
<div class="skill-detail" id="file-todos">
<div class="skill-detail-header">
<h3>file-todos</h3>
<span class="skill-badge">Workflow</span>
</div>
<p class="skill-detail-description">
File-based todo tracking system in the <code>todos/</code> directory.
Integrates with code review and slash commands.
</p>
<h4>File Format</h4>
<div class="card-code-block">
<pre><code># 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</code></pre>
</div>
<h4>Status Values</h4>
<ul>
<li><code>pending</code> - Needs triage</li>
<li><code>ready</code> - Approved for work</li>
<li><code>complete</code> - Done</li>
</ul>
<h4>Priority Values</h4>
<ul>
<li><code>p1</code> - Critical</li>
<li><code>p2</code> - Important</li>
<li><code>p3</code> - Nice-to-have</li>
</ul>
<h4>YAML Frontmatter</h4>
<div class="card-code-block">
<pre><code>---
status: pending
priority: p1
issue_id: "001"
tags: [security, authentication]
dependencies: []
---</code></pre>
</div>
<div class="card-code-block">
<pre><code>skill: file-todos</code></pre>
</div>
</div>
<div class="skill-detail" id="git-worktree">
<div class="skill-detail-header">
<h3>git-worktree</h3>
<span class="skill-badge">Git</span>
</div>
<p class="skill-detail-description">
Manage Git worktrees for isolated parallel development.
Handles creating, listing, switching, and cleaning up worktrees.
</p>
<h4>Commands</h4>
<div class="card-code-block">
<pre><code># 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</code></pre>
</div>
<h4>Integration</h4>
<ul>
<li>Works with <code>/workflows:review</code> for isolated PR analysis</li>
<li>Works with <code>/workflows:work</code> for parallel feature development</li>
</ul>
<h4>Requirements</h4>
<ul>
<li>Git 2.8+ (for worktree support)</li>
<li>Worktrees stored in <code>.worktrees/</code> directory</li>
</ul>
<div class="card-code-block">
<pre><code>skill: git-worktree</code></pre>
</div>
</div>
</section>
<!-- Image Generation -->
<section id="image-generation">
<h2><i class="fa-solid fa-image"></i> Image Generation (1)</h2>
<p>AI-powered image generation and editing.</p>
<div class="skill-detail featured" id="gemini-imagegen">
<div class="skill-detail-header">
<h3>gemini-imagegen</h3>
<span class="skill-badge highlight">AI Images</span>
</div>
<p class="skill-detail-description">
Generate and edit images using Google's Gemini API (Nano Banana).
Supports text-to-image, image editing, multi-turn refinement, and composition.
</p>
<h4>Features</h4>
<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 iterative 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>
<h4>Available Models</h4>
<table class="docs-table">
<thead>
<tr>
<th>Model</th>
<th>Resolution</th>
<th>Best For</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>gemini-2.5-flash-image</code></td>
<td>1024px</td>
<td>Speed, high-volume tasks</td>
</tr>
<tr>
<td><code>gemini-3-pro-image-preview</code></td>
<td>Up to 4K</td>
<td>Professional assets, complex instructions</td>
</tr>
</tbody>
</table>
<h4>Quick Start</h4>
<div class="card-code-block">
<pre><code># Text-to-image
python scripts/generate_image.py "A cat wearing a wizard hat" output.png
# Edit existing image
python scripts/edit_image.py input.png "Add a rainbow in the background" output.png
# Multi-turn chat
python scripts/multi_turn_chat.py</code></pre>
</div>
<h4>Image Configuration</h4>
<div class="card-code-block">
<pre><code>from google.genai import types
response = client.models.generate_content(
model="gemini-3-pro-image-preview",
contents=[prompt],
config=types.GenerateContentConfig(
response_modalities=['TEXT', 'IMAGE'],
image_config=types.ImageConfig(
aspect_ratio="16:9", # 1:1, 2:3, 3:2, 4:3, 16:9, 21:9
image_size="2K" # 1K, 2K, 4K (Pro only)
),
)
)</code></pre>
</div>
<h4>Prompting Best Practices</h4>
<ul>
<li><strong>Photorealistic</strong> - Include camera details: lens type, lighting, angle, mood</li>
<li><strong>Stylized Art</strong> - Specify style explicitly: kawaii, cel-shading, bold outlines</li>
<li><strong>Text in Images</strong> - Be explicit about font style and placement (use Pro model)</li>
<li><strong>Product Mockups</strong> - Describe lighting setup and surface</li>
</ul>
<h4>Requirements</h4>
<table class="docs-table">
<tr>
<td><code>GEMINI_API_KEY</code></td>
<td>Required environment variable</td>
</tr>
<tr>
<td><code>google-genai</code></td>
<td>Python package</td>
</tr>
<tr>
<td><code>pillow</code></td>
<td>Python package for image handling</td>
</tr>
</table>
<div class="callout callout-info">
<div class="callout-icon"><i class="fa-solid fa-circle-info"></i></div>
<div class="callout-content">
<p>All generated images include SynthID watermarks. Image-only mode won't work with Google Search grounding.</p>
</div>
</div>
<div class="card-code-block">
<pre><code>skill: gemini-imagegen</code></pre>
</div>
</div>
</section>
<!-- Navigation -->
<nav class="docs-nav-footer">
<a href="commands.html" class="nav-prev">
<span class="nav-label">Previous</span>
<span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Commands</span>
</a>
<a href="mcp-servers.html" class="nav-next">
<span class="nav-label">Next</span>
<span class="nav-title">MCP Servers <i class="fa-solid fa-arrow-right"></i></span>
</a>
</nav>
</article>
</main>
</div>
<script>
document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
document.querySelector('.docs-sidebar').classList.toggle('open');
});
</script>
</body>
</html>