141bbb42cb
- Merge dhh-ruby-style into dhh-rails-style for comprehensive Rails conventions - Add testing.md reference covering Rails testing patterns - Add /feature-video command for recording PR demo videos - Update docs and component counts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
612 lines
28 KiB
HTML
612 lines
28 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 12 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 (27)</a></li>
|
|
<li><a href="commands.html">Commands (19)</a></li>
|
|
<li><a href="skills.html" class="active">Skills (12)</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 (8)</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">
|
|
Think of skills as reference manuals that Claude Code can read mid-conversation. When you're writing Rails code and want DHH's style, or building a gem like Andrew Kane would, you don't need to paste documentation—just invoke the skill. Claude reads it, absorbs the patterns, and writes code that way.
|
|
</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-rails-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 personas—they <em>do</em> things. <strong>Skills</strong> are knowledge—they teach Claude <em>how</em> to do things. Use <code>claude agent [name]</code> when you want someone to review your code. Use <code>skill: [name]</code> when you want to write code in a particular style yourself.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Development Tools -->
|
|
<section id="development-tools">
|
|
<h2><i class="fa-solid fa-code"></i> Development Tools (8)</h2>
|
|
<p>These skills teach Claude specific coding styles and architectural patterns. Use them when you want code that follows a particular philosophy—not just any working code, but code that looks like it was written by a specific person or framework.</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">
|
|
You're writing a skill right now, but you're not sure if you're structuring the SKILL.md file correctly. Should the examples go before the theory? How do you organize workflows vs. references? This skill is the answer—it's the master template for building skills themselves.
|
|
</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">
|
|
The simpler, step-by-step version of <code>create-agent-skills</code>. When you just want a checklist to follow from blank file to packaged skill, use this. It's less about theory, more about "do step 1, then step 2."
|
|
</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-rails-style">
|
|
<div class="skill-detail-header">
|
|
<h3>dhh-rails-style</h3>
|
|
<span class="skill-badge">Rails</span>
|
|
</div>
|
|
<p class="skill-detail-description">
|
|
Comprehensive 37signals Rails conventions based on Marc Köhlbrugge's analysis of 265 PRs from the Fizzy codebase. Covers everything from REST mapping to state-as-records, Turbo/Stimulus patterns, CSS with OKLCH colors, Minitest with fixtures, and Solid Queue/Cache/Cable patterns.
|
|
</p>
|
|
<h4>Key Patterns</h4>
|
|
<ul>
|
|
<li><strong>REST Purity</strong> - Verbs become nouns (close → closure)</li>
|
|
<li><strong>State as Records</strong> - Boolean columns → separate records</li>
|
|
<li><strong>Fat Models</strong> - Business logic, authorization, broadcasting</li>
|
|
<li><strong>Thin Controllers</strong> - 1-5 line actions with concerns</li>
|
|
<li><strong>Current Attributes</strong> - Request context everywhere</li>
|
|
<li><strong>Hotwire/Turbo</strong> - Model-level broadcasting, morphing</li>
|
|
</ul>
|
|
<h4>Reference Files (6)</h4>
|
|
<ul>
|
|
<li><code>controllers.md</code> - REST mapping, concerns, Turbo responses</li>
|
|
<li><code>models.md</code> - Concerns, state records, callbacks, POROs</li>
|
|
<li><code>frontend.md</code> - Turbo, Stimulus, CSS layers, OKLCH</li>
|
|
<li><code>architecture.md</code> - Routing, auth, jobs, caching</li>
|
|
<li><code>testing.md</code> - Minitest, fixtures, integration tests</li>
|
|
<li><code>gems.md</code> - What to use vs avoid, decision framework</li>
|
|
</ul>
|
|
<div class="card-code-block">
|
|
<pre><code>skill: dhh-rails-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">
|
|
Andrew Kane has written 100+ Ruby gems with 374 million downloads. Every gem follows the same patterns: minimal dependencies, class macro DSLs, Rails integration without Rails coupling. When you're building a gem and want it to feel production-ready from day one, this is how you do it.
|
|
</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">
|
|
You're adding AI features to your Rails app, but you don't want brittle prompt strings scattered everywhere. DSPy.rb gives you type-safe signatures, composable predictors, and tool-using agents. This skill shows you how to use it—from basic inference to ReAct agents that iterate until they get the answer right.
|
|
</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">
|
|
You've seen what AI usually generates: Inter font, purple gradients, rounded corners on everything. This skill teaches Claude to design interfaces that don't look like every other AI-generated site. It's about purposeful typography, unexpected color palettes, and interfaces with personality.
|
|
</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="compound-docs">
|
|
<div class="skill-detail-header">
|
|
<h3>compound-docs</h3>
|
|
<span class="skill-badge">Docs</span>
|
|
</div>
|
|
<p class="skill-detail-description">
|
|
You just fixed a weird build error after an hour of debugging. Tomorrow you'll forget how you fixed it. This skill automatically detects when you solve something (phrases like "that worked" or "it's fixed") and documents it with YAML frontmatter so you can find it again. Each documented solution compounds your team's knowledge.
|
|
</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: compound-docs</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-detail" id="agent-native-architecture">
|
|
<div class="skill-detail-header">
|
|
<h3>agent-native-architecture</h3>
|
|
<span class="skill-badge">AI</span>
|
|
</div>
|
|
<p class="skill-detail-description">
|
|
Build AI agents using prompt-native architecture where features are defined in prompts, not code. When creating autonomous agents, designing MCP servers, or implementing self-modifying systems, this skill guides the "trust the agent's intelligence" philosophy.
|
|
</p>
|
|
<h4>Key Patterns</h4>
|
|
<ul>
|
|
<li><strong>Prompt-Native Features</strong> - Define features in prompts, not code</li>
|
|
<li><strong>MCP Tool Design</strong> - Build tools agents can use effectively</li>
|
|
<li><strong>System Prompts</strong> - Write instructions that guide agent behavior</li>
|
|
<li><strong>Self-Modification</strong> - Allow agents to improve their own prompts</li>
|
|
</ul>
|
|
<h4>Core Principle</h4>
|
|
<p>Whatever the user can do, the agent can do. Whatever the user can see, the agent can see.</p>
|
|
<div class="card-code-block">
|
|
<pre><code>skill: agent-native-architecture</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>Writing, editing, and organizing work. These skills handle everything from style guide compliance to git worktree management—the meta-work that makes the real work easier.</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">
|
|
You wrote a draft, but you're not sure if it matches Every's style guide. Should "internet" be capitalized? Is this comma splice allowed? This skill does a four-phase line-by-line review: context, detailed edits, mechanical checks, and actionable recommendations. It's like having a copy editor who never gets tired.
|
|
</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">
|
|
Your todo list is a bunch of markdown files in a <code>todos/</code> directory. Each filename encodes status, priority, and description. No database, no UI, just files with YAML frontmatter. When you need to track work without setting up Jira, this is the system.
|
|
</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">
|
|
You're working on a feature branch, but you need to review a PR without losing your current work. Git worktrees let you have multiple branches checked out simultaneously in separate directories. This skill manages them—create, switch, cleanup—so you can context-switch without stashing or committing half-finished code.
|
|
</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>/review</code> for isolated PR analysis</li>
|
|
<li>Works with <code>/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>Generate images with AI. Not stock photos you found on Unsplash—images you describe and the model creates.</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">
|
|
Need a logo with specific text? A product mockup on a marble surface? An illustration in a kawaii style? This skill wraps Google's Gemini image generation API. You describe what you want, it generates it. You can edit existing images, refine over multiple turns, or compose from reference images. All through simple Python scripts.
|
|
</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>
|