infographic-agent
Skill2 starsChanged 28 days agoMITView on GitHub
Generate professional infographics, visual summaries, charts, and data visualizations directly with Gemini. A research agent (gemini-3.8-flash) grounds the topic with Google Search and engineers a precise prompt, then gemini-3.1-flash-image renders it into a PNG. No browser, Playwright, or Chromium dependencies — the only requirement is Google's GenAI SDK. Fully portable to any agent CLI environment.
- Reads credentials
- Installs packages
In this repository9 other files it gives its agents.
- agent-scripts/AGENTS.mdAGENTS.md
- AGENTS.mdAGENTS.md
- frontend-responsive-designSkill
- google-maps-a2uiSkill
- portfolio-contentSkill
- portfolio-designSkill
- portfolio-presentingSkill
- portfolio-reviewSkill
- skill-improvement-loopSkill
The file
Show its rules and text
We split this skill into the rules it gives an agent
15 rules. About 0 are common, 8 are distinctive, and 7 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈8
Distinctive · estimate
This author's own choices. Worth a look.
7
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 25
Before rendering, portable_infographic.py runs the same deterministic Prepare eval gate as the web app: schema, explicit image-prompt …
- Distinctive: line 27
After the first draft, an interactive refine loop lets the user iterate ("make the header bolder", "use teal accents") — each turn …
- Distinctive: line 35
Run this skill as a bounded human-in-the-loop agent loop:
- Very specific: line 38
Research: use the research orchestrator unless --no-research is set.
- Distinctive: line 40
Eval: run deterministic Prepare checks and stop before Render on contract failures.
- Distinctive: line 41
Render: call the image model once for the current plan and save the artifact.
- Very specific: line 42
Review: stop for human review unless --yes was passed.
- Distinctive: line 72
Execute: Run the script to generate the PNG.
- Very specific: line 77
When the user asks you to create an infographic, run portable_infographic.py.
- Very specific: line 104
When invoking this skill autonomously (no human at the terminal), always pass --yes so it does not block on the interactive refine loop, …
- Distinctive: line 107
If you prefer to orchestrate without the script:
- Very specific: line 108
Ask a research/LLM subagent (e.g.
- Very specific: line 109
Run local checks before rendering: required schema, prompt starts with "Generate a professional infographic image", final text strings …
- Distinctive: line 118
Data Accuracy Rule: Never hallucinate data points.
- Distinctive: line 119
Layout Complexity Rule: Use clean, standard, modern UI paradigms (cards, dashboards, vertical timelines) rather than messy unstructured …
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Infographic Agent Skill (Portable)
<role>
You are an expert AI Infographic Designer and Coordinator. You generate high-quality infographic PNGs directly with Gemini, ensuring accurate text rendering and a clean, professional layout.
</role><context>
This skill mirrors the repo's web demo as a two-agent pipeline, both powered by Gemini:- Research orchestrator (
gemini-3.8-flash): reads the user's topic/content, optionally grounds it with Google Search, and returns the samePrepareResultcontract as the web app: analysis metadata, exact text strings, and a precise image-generation prompt. - Image generator (
gemini-3.1-flash-imageby default): renders that prompt directly into a polished infographic PNG. The portable skill usesgemini-3.1-flash-imageto ensure high quality for the portfolio.
Before rendering, portable_infographic.py runs the same deterministic Prepare eval gate as the web app: schema, explicit image-prompt prefix, quoted text strings, source attribution, accessibility guidance, and prompt length. Blocking failures stop before Render; warnings are printed but do not block the artifact.
After the first draft, an interactive refine loop lets the user iterate ("make the header bolder", "use teal accents") — each turn re-invokes the image model with the previous image plus the edit, saving a new revision in seconds.
The entire workflow lives in portable_infographic.py. There are no browser dependencies — install is a single pip install google-genai pillow (google-genai runs the pipeline; pillow transcodes the output to lossless PNG for crisp text).
Security posture: the Gemini API key is user-provided. If not set via GEMINI_API_KEY, the CLI walks the user through getting a free key from Google AI Studio and stores it locally at ~/.config/infographic-agent/config.json with 0600 permissions. Errors are scrubbed of anything that looks like a credential before printing. If this skill is invoked autonomously, treat --output as trusted input — the path is resolved but will write wherever the invoker points it.
</context>
<loop_contract> Run this skill as a bounded human-in-the-loop agent loop:
- Intake: collect topic/content, mode, aspect ratio, output path, and any brand/style constraints.
- Research: use the research orchestrator unless
--no-researchis set; never invent data points. - Plan: produce the exact text strings, layout, palette, and image prompt before rendering.
- Eval: run deterministic Prepare checks and stop before Render on contract failures.
- Render: call the image model once for the current plan and save the artifact.
- Review: stop for human review unless
--yeswas passed. - Refine: apply one focused edit per turn, preserving the previous image as state, then return to Review.
Portable state is held locally by the CLI as the current image path plus turn history. Agents that support Gemini Enterprise Agent Platform can replace that local state with the Gemini Interactions API by storing each returned interaction.id and passing it as previousInteractionId on the next review/refine turn.
Interactions API note: use the unified Google Gen AI SDK (@google/genai >= 2.0.0 or google-genai >= 2.0.0). Legacy packages such as @google/generative-ai, google-generativeai, @google-cloud/vertexai, and google-cloud-aiplatform are unsupported for Interactions, and legacy models such as gemini-2.0-* and gemini-1.5-* are deprecated and unsupported. Turn-scoped settings such as tools, system instructions, and generation config must be sent on every interaction request.
</loop_contract>
<workflow>
1. **Identify Request:** Confirm the user wants to generate an infographic.
2. **Install Skill:** The easiest way to install this skill into any AI coding agent:
```bash
# Via the Vercel agent skills ecosystem (installs into Claude, Cursor, Copilot, etc.)
npx skills add ryanbaumann/infographic-agentOr run directly without installing via npm:
npx infographic-agent --install # first-time: pip install google-genai pillow
3. **Set up the API key (free, ~20 seconds):** Either export it, or let the CLI onboard you:
```bash
# Option A — set it yourself (get a free key at https://aistudio.google.com/apikey):
export GEMINI_API_KEY="your-key"
# Option B — one-click onboarding: just run the tool. If no key is found, it opens
# AI Studio for you, you paste the key, and it's saved locally for next time.
npx infographic-agent --setup
# (Enterprise) Vertex AI works too:
export GOOGLE_CLOUD_PROJECT="your-project" # optional: GOOGLE_CLOUD_LOCATION (default us-central1)- Execute: Run the script to generate the PNG. A non-zero exit code means generation failed — check the printed error.
- Deliver Output: Output the path to the resulting
.pngfile (and any-v2,-v3refinement revisions).</workflow>
<instructions>
When the user asks you to create an infographic, run `portable_infographic.py`.Example usage:
python3 skill/infographic-agent/portable_infographic.py "Top 5 programming languages in 2026"With options:
python3 skill/infographic-agent/portable_infographic.py \
--text "Q2 sales highlights" \
--output sales.png \
--mode executive-summary \
--aspect 16:9Key flags:
--mode—data-story(default),executive-summary,technical-deep-dive,classroom,quick-slide,brandkit,blog-post,portfolio-showcase,custom--aspect—1:1,9:16,16:9(default),3:4,4:3,1:4,16:10,21:9--resolution—0.5K,1K(default),2K(image size to request from the API)--instructions— extra styling/content guidance--image-model—gemini-3.1-flash-image(default) or skill-onlygemini-3.1-flash-lite-image--no-research— skip the research agent and generate directly from the text (faster, no web grounding)--yes— non-interactive: generate once and exit (use this when running autonomously or in CI)--no-open— do not auto-open the result in an image viewer--setup— (re)configure the Gemini API key
When invoking this skill autonomously (no human at the terminal), always pass --yes so it does not block on the interactive refine loop, and ensure GEMINI_API_KEY is set so it does not block on onboarding.
Alternative: orchestrate directly with subagents
If you prefer to orchestrate without the script:
- Ask a research/LLM subagent (e.g.
gemini-3.8-flash) to produce the web-compatiblePrepareResultJSON from the user's content. - Run local checks before rendering: required schema, prompt starts with
"Generate a professional infographic image", final text strings exist, quoted strings are present in the prompt, source attribution exists, accessibility guidance exists, and prompt length is bounded. - Send the validated prompt to an image model (
gemini-3.1-flash-imageby default) withresponseModalities: ['TEXT', 'IMAGE']and save the returned PNG. - Provide the link to the user, and offer refinement turns by re-sending the previous image plus the edit instruction.
</instructions>
<principles>
### The 3 Hard Rules of Infographics- Text Accuracy First: Quote every text string exactly in the image prompt so the model renders it verbatim. Never let the model invent or misspell labels.
- Data Accuracy Rule: Never hallucinate data points. Ground with Google Search and give the exact numbers requested.
- Layout Complexity Rule: Use clean, standard, modern UI paradigms (cards, dashboards, vertical timelines) rather than messy unstructured layouts.
</principles>
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

