d367b2574d
Applied Hunt/Thomas and Joel Spolsky writing principles: - Concrete before abstract (stories and examples first) - Physical analogies for technical concepts - Conversational voice with "you" and contractions - Removed passive voice and weasel words - Added memorable metaphors and hooks Pages updated: - index.html: New hero, philosophy section with N+1 query story - agents.html: Each agent described with concrete scenarios - commands.html: Action-oriented descriptions - getting-started.html: Direct, conversational guide - skills.html: Clear "when to use this" for each skill - mcp-servers.html: Concrete examples of what each tool does 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
587 lines
26 KiB
HTML
587 lines
26 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">
|
|
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-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 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 (7)</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-ruby-style">
|
|
<div class="skill-detail-header">
|
|
<h3>dhh-ruby-style</h3>
|
|
<span class="skill-badge">Rails</span>
|
|
</div>
|
|
<p class="skill-detail-description">
|
|
You want Rails controllers that are five lines, not fifty. Models that handle authorization, broadcasting, and business logic without service objects everywhere. This skill teaches Claude to write code the way DHH writes it at 37signals—REST-pure, Hotwire-first, no architectural astronautics.
|
|
</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">
|
|
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="codify-docs">
|
|
<div class="skill-detail-header">
|
|
<h3>codify-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. Think of it as a photographic memory for solved problems.
|
|
</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>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>/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>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>
|