⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
epic-infographics
Create polished, professional infographic images from data, facts, or a topic. Builds a self-contained HTML/CSS+SVG page in one of several fully-specified design languages, renders it to PNG with a bundled script, then reviews and fixes its own output. Can also choreograph the same file with CSS animation and render it to MP4/GIF. Use when the user asks for an infographic, a visual summary, a stats poster, a social graphic, a one-pager image, an animated infographic or short data video, or "turn this data into an image.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
Epic Infographics
Infographics that don't look AI-made.
An open-source skill that teaches AI agents to design infographics the way a studio would.
It skips the stock templates, the rounded card grids, the Tailwind blue, and the emoji icons. Every image below came straight out of the skill, brief to PNG, with nothing touched up by hand.
Why this exists
Ask an AI for an infographic and you usually get the same thing: rounded cards in a symmetric grid, Tailwind blue, an emoji where an icon should be, and a bar chart floating on a flat background. It works, and it is instantly recognizable as machine-made.
This skill writes down what a good studio actually does, as steps an agent can follow without needing taste of its own:
- The canvas is a place, not a page. Every piece builds a scene (a drafting sheet, a dark theatre, a naturalist's folio, a miniature world) and the data lives inside that scene. Flat graphic minimalism counts as a failure here, even when it's tidy.
- The drawn object carries the data: a cup filled to two thirds because 2 in 3 adults drink coffee, a rocket whose hatched section is exactly the 90% propellant fraction, a funnel of stage light drawn at 1px per 140 users.
- Charts are computed rather than eyeballed. Bar ratios, donut arcs and areas come from arithmetic written into the file, and every palette goes through a color-blindness checker before it ships.
- The agent reviews its own render. Every graphic gets screenshotted, read back, and checked against a hard anti-slop list (the no-text squint test, the template test, the flat-ground test) before you ever see it.
The gallery
Thirteen briefs, twelve design languages, six canvas formats, and every piece animated. Click any image for its brief, its HTML source, and the MP4 and GIF versions.
It also moves
Every gallery piece is also a short animation, rendered from the same HTML file as its still. The skill asks up front whether the graphic should move, storyboards the build (the scene is already on stage, the data arrives in order, the hero lands last), and choreographs it in the design language's own motion character: the blueprint rocket is drafted line by line, the honeybee poster arrives as screen-print ink passes, the theatre runs its lighting cues, and the Mars vista pulls layer by layer off the screen. A bundled script scrubs the page's CSS animations frame by frame in headless Chromium and assembles the MP4 and GIF with ffmpeg, so every render is deterministic and the layout checks still hold on the finished frame.
The design languages
Each style file is a complete spec the agent can execute as written: exact hexes, font pairings, geometry, signature devices, do's and don'ts. Every chart palette passes a six-check color-blind-safety validation, including the dark ones.
| Scene-native (the defaults) | |
|---|---|
| blueprint | cyanotype drafting sheet: dimension arrows, hatch fills, stamped title block |
| dark-glass | luminous data on deep space: aurora fields, glass panels, disciplined glow |
| naturalist-plate | 19th-century field-guide engraving: figure systems, watercolor tints, foxing |
| isometric-world | miniature floating dioramas: data as architecture, exact 2:1 projection |
| retro-print | mid-century poster: four inks, misregistration, film grain, arc text |
| editorial | magazine feature: Fraunces at huge sizes, drop caps, charticles |
| hand-drawn | marker sketchbook: wobble-filtered linework, washi tape, doodle arrows |
| park-poster | WPA screen-print vista: layered flat planes, title band, a tiny figure for scale |
| cutaway | DK-style cross-section: sliced machines, numbered callouts, detail lenses, tiny people |
| High slop-risk (explicit request only) | |
|---|---|
| swiss · corporate-clean · neo-brutalist | flat by construction; the skill only uses them when asked, and forces scene-craft into them |
Install
Claude Code
/plugin marketplace add OrRon/EpicInfographics
/plugin install epic-infographics@epic-infographics
Updates: /plugin → Marketplaces → epic-infographics → Enable auto-update.
Codex
codex plugin marketplace add OrRon/EpicInfographics
codex plugin add epic-infographics@epic-infographics
Factory Droid
droid plugin marketplace add https://github.com/OrRon/EpicInfographics
droid plugin install epic-infographics@epic-infographics --scope user
Pi
pi install https://github.com/OrRo
// HOW IT'S BUILT
KEY FILES