Generate images using Google's Gemini API — hero backgrounds, OG images, placeholder photos, textures, and style-matched variants. Uses free-tier models for drafts, paid for finals. No dependencies beyond Python 3. Trigger with 'generate image', 'gemini image', 'make a hero background', 'create placeholder photo', 'generate OG image', 'AI image', or 'need an image for'.
Generates contextual images like hero backgrounds and OG cards using Google's Gemini API based on project-specific style and dimensions.
npx claudepluginhub jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/api-pattern.mdreferences/prompting-guide.mdGenerate contextual images for web projects using the Gemini API. Produces hero backgrounds, OG cards, placeholder photos, textures, and style-matched variants.
API Key: Set GEMINI_API_KEY as an environment variable. Get a key from https://aistudio.google.com/apikey if you don't have one.
export GEMINI_API_KEY="your-key-here"
Gather from the user or project context:
Use concrete photography parameters, not abstract adjectives. Read references/prompting-guide.md for the full framework.
Quick rules:
Generate a Python script (no dependencies beyond stdlib) that calls the Gemini API. The script should:
GEMINI_API_KEY from environmenthttps://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent"responseModalities": ["TEXT", "IMAGE"] in generationConfiginlineData.data (base64) from candidate partsname-1.png, name-2.png)For style matching with a reference image, include the reference as an inlineData part before the text prompt, and use temperature 0.7 (instead of 1.0).
See references/api-pattern.md for the full implementation pattern including error handling and response parsing.
Critical: Never pass prompts via curl + bash arguments — shell escaping breaks on apostrophes. Always use Python's json.dumps() or write the prompt to a file first.
Use the image-processing skill for resizing, format conversion, or optimisation.
Show the generated images for review. Read the image files to display them inline if possible, otherwise describe what was generated and let the user open them.
Starting prompts — enhance with project-specific context (colours, mood, subject):
| Preset | Base Prompt |
|---|---|
hero-background | "Wide atmospheric background, soft-focus, [colour tones], [mood], landscape 1920x1080" |
og-image | "Clean branded card background, [brand colours], subtle gradient, 1200x630" |
placeholder-photo | "Professional stock-style photo of [subject], natural lighting, warm tones" |
texture-pattern | "Subtle repeating texture, [material], seamless tile, muted [colour]" |
product-shot | "Product photography, [item] on [surface], soft studio lighting, clean background" |
| Use case | Model | Cost |
|---|---|---|
| Drafts, quick placeholders | gemini-2.5-flash-image | Free (~500/day) |
| Final client assets | gemini-3-pro-image-preview | ~$0.04/image |
| Style-matched variants | gemini-3-pro-image-preview + reference image | ~$0.04/image |
Verify current model IDs if errors occur — they change frequently.
| When | Read |
|---|---|
| Building effective prompts | references/prompting-guide.md |
| API implementation details | references/api-pattern.md |
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.