New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Generate Graphic

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Generates an on-brand marketing graphic — hero image, ad creative, background, or texture — with an image model, optionally stamped with the brand logo and a caption.

MITAuto-check passedMarketing & SEO

Install Generate Graphic

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill generate-graphic -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace generate-graphic --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/design/brand-forge/skills/generate-graphic .claude/skills/generate-graphic && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
generate-graphic
GitHub stars
2.8k
Token cost
~1.5k tokens
SKILL.md length
648 words
Files
2 (incl. references)
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Generates an on-brand marketing graphic — hero image, ad creative, background, or texture — with an image model, optionally stamped with the brand logo and a caption.

  • Works in 6 steps: Verify both opt-in signals are set. If… → Use Glob to locate the active brand… → Build the prompt with lib/raster.mjs (no… → …
  • A user wants a photographic
  • SKILL.md covers Overview, Prerequisites, Instructions and Output, plus 3 more sections
  • Needs GEMINI_API_KEY and OPENAI_API_KEY

What it does

Generate Graphic is an agent skill from jeremylongshore/tons-of-skills-marketplace. Generates an on-brand marketing graphic — hero image, ad creative, background, or texture — with an image model, optionally stamped with the brand logo and a caption. Opt-in: needs a provider key and network access. Use when a user wants a photographic or illustrative graphic, not a text-heavy asset. Trigger with "make a hero image", "ad background", or "/brand-make graphic".

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/brand-raster-prompting.md`). Compatibility notes: Designed for Claude Code

It sits in Marketing & SEO, covering Paid advertising and Logo and visual identity. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • A user wants a photographic
  • Illustrative graphic
  • Not a text-heavy asset
  • With make a hero image

Example prompts

  • “make a hero image”
  • “ad background”
  • “/brand-make graphic”
  • “/generate-graphic”

Requirements

  • Node.js
  • A credential in GEMINI_API_KEY
  • A credential in OPENAI_API_KEY
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Write, Glob, Bash(node:*)

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Verify both opt-in signals are set. If either is missing, stop, explain how to enable raster, and offer the vector path (generate-social…
  2. Use Glob to locate the active brand directory, then Read and validate the profile with validateProfile.
  3. Build the prompt with lib/raster.mjs (no network). It encodes the palette in words, the imagery style, and the tone, and turns the brand's…
  4. Generate the image (the network call). The provider is swappable and failures retry with backoff, never leaving a half-written file
  5. Optionally composite the brand logo and a caption over the raster with lib/composite.mjs, which writes an SVG overlay referencing the PNG.
  6. Hand the result to the visual-guardian subagent for a palette and legibility pass. Write the final files and report the saved paths.

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Glob
    • Bash(node:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • ai.google.dev
    • code.claude.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • GEMINI_API_KEY
    • OPENAI_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Generate Graphic loads about 1.5k tokens when it runs, and up to ~1.9k if it reads all its reference files. Until then it costs about 99 tokens; SKILL.md has 648 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~99
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 648 words, ~1,467 tokens.

Download SKILL.mdSave it as .claude/skills/generate-graphic/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
generate-graphic
description
Generates an on-brand marketing graphic — hero image, ad creative, background, or texture — with an image model, optionally stamped with the brand logo and a caption. Opt-in: needs a provider key and network access. Use when a user wants a photographic or illustrative graphic, not a text-heavy asset. Trigger with "make a hero image", "ad background", or "/brand-make graphic".
allowed-tools
Read, Write, Glob, Bash(node:*)
compatibility
Designed for Claude Code
argument-hint
[subject to depict, e.g. "a mountain trail at dawn"]
version
0.5.1
author
localplugins <localplugins@proton.me>
license
MIT
tags
branding, image-generation, marketing, raster, opt-in

Generate Graphic

Generates an on-brand marketing graphic through an image model — the one opt-in feature that reaches the network — optionally stamped with the brand logo and a caption.

Overview

The generate-graphic skill is the opt-in raster engine. Everything else in brand-forge (logos, social, docs) stays vector and zero-permission; this skill is the only path that calls an external image provider, so it runs only when a user explicitly wants a photographic or illustrative graphic. The generator builds a brand-aware prompt with lib/raster.mjs, calls the provider with lib/genimage.mjs, and can composite a crisp vector logo and caption over the result with lib/composite.mjs. Text is deliberately kept out of the image and added as vector on top.

Prerequisites

  • An active brand profile created with /brand-new. Read loads its color-system.json, typography.json, and visual-identity.md.
  • Two opt-in signals, both required: BRAND_FORGE_RASTER=1 and a provider key (GEMINI_API_KEY by default, or OPENAI_API_KEY). The 30-preflight emitter surfaces this at session start.
  • Authentication: the provider api key is read from that environment variable and sent as a request header, never placed in the URL. No credentials are written to disk.
  • Node.js on the PATH and Write access to an output/ directory.

Instructions

  1. Verify both opt-in signals are set. If either is missing, stop, explain how to enable raster, and offer the vector path (generate-social or a template) instead, which needs neither.

  2. Use Glob to locate the active brand directory, then Read and validate the profile with validateProfile.

  3. Build the prompt with lib/raster.mjs (no network). It encodes the palette in words, the imagery style, and the tone, and turns the brand's don't-rules into an "Avoid:" clause. Warn the user when literal text is requested and route text-heavy work to the vector engine.

    js
    import { loadProfile } from '../../lib/brand.mjs';
import { buildRasterPrompt } from '../../lib/raster.mjs';
const profile = loadProfile(activeDir);
const prompt = buildRasterPrompt(profile, { subject: 'a mountain trail at dawn' });

  4. Generate the image (the network call). The provider is swappable and failures retry with backoff, never leaving a half-written file:

    js
    import { generateImage } from '../../lib/genimage.mjs';
await generateImage({ prompt, outPath: 'output/northwind-hero.png', provider: 'gemini' });

  5. Optionally composite the brand logo and a caption over the raster with lib/composite.mjs, which writes an SVG overlay referencing the PNG.

  6. Hand the result to the visual-guardian subagent for a palette and legibility pass. Write the final files and report the saved paths.

Show full SKILL.md (297 more words)Show less

Output

A raster PNG under output/, plus an optional vector overlay:

text
output/northwind-hero.png
output/northwind-hero-overlay.svg
  • The PNG is the model's image, steered toward the brand palette, style, and tone.
  • The optional overlay is a small SVG that references the PNG and adds a crisp logo and caption. Flatten it to a single PNG with /brand-export.
  • Output is local files only — the skill never auto-posts or uploads.

Error Handling

ConditionBehavior
BRAND_FORGE_RASTER unsetStop; explain the opt-in and offer the vector alternative.
Provider key missingStop; name the expected environment variable and do not proceed.
User requests literal text in the imageWarn that models render text unreliably; route text to the vector engine.
Provider call failsRetry with backoff; if it still fails, report the error and leave no partial file.
Profile fails validateProfileReport the offending field and stop.

To troubleshoot a failed generation, verify the two opt-in signals with /brand-status, then re-run; check references/brand-raster-prompting.md to debug an off-brand result.

Examples

Example — hero background

/brand-make a hero image of a mountain trail at dawn

Builds a brand-aware prompt, generates output/northwind-hero.png, and offers to composite the logo over it.

Example — opt-in not enabled

/brand-make a photo background

With BRAND_FORGE_RASTER unset, the skill stops, explains how to enable raster, and offers a vector template instead.

Example — text routed to vector

/brand-make a graphic that says "Now hiring"

Warns that baked-in text renders poorly, generates the background here, and composes the words as a vector overlay on top.

Resources

  • references/brand-raster-prompting.md — how the prompt is built from the profile, why text stays out of the image, provider notes, and steering tips.
  • Sibling skills: generate-social and generate-doc-template for text-heavy, zero-permission assets — route between them with the /brand-make command.
  • Gemini image generation docs — the default provider's API.
  • Agent Skills documentation — how skills are authored and invoked.

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/design/brand-forge/skills/generate-graphic of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • references/brand-raster-prompting.md

Open the folder on GitHubat commit cfae287

Compare with similar skills

Generate Graphic next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Generate Graphic compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Generate Graphic this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.5kAutomated safety check: PassMIT
App Promo Materialsglifxyz/glif-mcp-server213—~1.7kAutomated safety check: PassMIT
Ads DnaAgriciDaniel/claude-ads9.9k—~279Automated safety check: PassMIT
Blog GoogleAgriciDaniel/claude-blog2.3k1 repos~3.3kAutomated safety check: NotesMIT
DesignOhh-889/skyroc7959 repos~3.1kAutomated safety check: PassMIT
Ad CreativeLeoYeAI/openclaw-marketing-skills1k8 repos~3.4kAutomated safety check: PassCustom licence

Similar skills

  • App Promo Materials

    glifxyz/glif-mcp-server

    Plan and make launch, store, ad and campaign graphics with Glif: real app screens turned into store listings and launch posts, or a coordinated set of product photos, ads, a short video and a jingle…

    213 GitHub stars~1.7k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed

  • Ads Dna

    AgriciDaniel/claude-ads

    Extract a public-safe brand and offer profile for paid advertising from an authorized website and operator input.

    9.9k GitHub stars~279 tokensUpdated 3 days ago
    Media & CreativeAuto-check passed

  • Blog Google

    AgriciDaniel/claude-blog

    Google API integration for blog performance: PageSpeed Insights, CrUX Core Web Vitals with 25-week history, Search Console performance, URL Inspection, Indexing API, GA4 organic traffic, NLP entity…

    2.3k GitHub starsUsed in 1 repo~3.3k tokens
    Marketing & SEOAuto-check: notes

  • Design

    Ohh-889/skyroc

    Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…

    795 GitHub starsUsed in 9 repos~3.1k tokens
    Frontend & DesignAuto-check passed

  • Ad Creative

    LeoYeAI/openclaw-marketing-skills

    When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform.

    1k GitHub starsUsed in 8 repos~3.4k tokens
    Marketing & SEOAuto-check passed

  • Ad Account Auditor

    aaron-he-zhu/aaron-marketing-skills

    A skill your agent uses when auditing a paid ad account for incremental contribution, wasted spend, or measurement integrity before scaling; runs a typed 20-item ROAS profile with verified vetoes…

    2.9k GitHub starsUsed in 2 repos~2.2k tokens
    Marketing & SEOAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed

  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Categories

Questions about Generate Graphic

What does Generate Graphic do?

Generates an on-brand marketing graphic — hero image, ad creative, background, or texture — with an image model, optionally stamped with the brand logo and a caption. Generate Graphic is an agent skill from jeremylongshore/tons-of-skills-marketplace. Generates an on-brand marketing graphic — hero image, ad creative, background, or texture — with an image model, optionally stamped with the brand logo and a caption.

When should I use Generate Graphic?

Generate Graphic fits situations like: A user wants a photographic; illustrative graphic; not a text-heavy asset; with make a hero image.

How do I install Generate Graphic in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill generate-graphic -a claude-code`. Or copy the skill folder (plugins/design/brand-forge/skills/generate-graphic in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/generate-graphic in your project. Claude Code loads it when a task matches its description.

How do I install Generate Graphic in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill generate-graphic -a codex`. Or copy the skill folder (plugins/design/brand-forge/skills/generate-graphic in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/generate-graphic in your project. Codex loads it when a task matches its description.

Can I use Generate Graphic in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill generate-graphic -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/generate-graphic, .gemini/skills/generate-graphic, .github/skills/generate-graphic and .opencode/skills/generate-graphic in your project.

What does Generate Graphic need to run?

Going by SKILL.md and its folder, Generate Graphic needs credentials named GEMINI_API_KEY and OPENAI_API_KEY. Our summary lists: Node.js; A credential in GEMINI_API_KEY; A credential in OPENAI_API_KEY. Its frontmatter pre-approves these tools: Read, Write, Glob, Bash(node:*). Compatibility (from SKILL.md): Designed for Claude Code.

Does Generate Graphic access the network?

SKILL.md names 2 domains. As links in the text: ai.google.dev and code.claude.com. This is read from the text; nothing was executed.

Is Generate Graphic safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Generate Graphic use?

Generate Graphic is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Generate Graphic use?

About 1.5k tokens (SKILL.md is roughly 5.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 389 tokens, read only when the agent opens those files.

What are the alternatives to Generate Graphic?

Skills that share tags, products or a category with Generate Graphic: App Promo Materials (glifxyz/glif-mcp-server, 213 stars), Ads Dna (AgriciDaniel/claude-ads, 9.9k stars), Blog Google (AgriciDaniel/claude-blog, 2.3k stars) and Design (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Generate Graphic?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.