Open-source project
OrRon/EpicInfographics avatar
OrRon/EpicInfographics

EpicInfographics makes flat minimalism a scored failure rather than a style choice

A simple skill that will make your Agent create beautiful Infographics

434 stars39 forksJavaScriptMIT

At a glance

What is it?
A design skill for coding agents, packaged as a plugin for four different agent runtimes and a plain directory for everything else. Its premise is narrow: the recognisable machine-made infographic comes from a fixed set of defaults, so the fix is a scene, arithmetic in the file, and a self-review that runs before the render reaches you.
Who is it for?
This fits someone already working inside a coding agent who wants infographics that do not read as generated, and who is willing to accept a house style with nine options plus three opt-in ones. It does not fit someone who needs a diagram library or a charting API, because there is no package to import and nothing is installed into your project.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 40 days ago.
What is it written in?
Mainly JavaScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on October 6, 2026, and from our analysis. They are not legal advice.

Editorial analysis

One skill, four plugin formats and a plain directory for everything else

The repository root explains the packaging. There is .claude-plugin/, .codex-plugin/, .factory-plugin/ and a generic .agents/, alongside a skills/ directory and a scripts/ folder, with no package manifest at the top level.

So the same content ships in four vendor formats and one neutral layout, and there is nothing to add to your own project's dependencies. The install is a plugin operation rather than a package install, and each runtime spells it differently.

Claude Code takes two slash commands:

text
/plugin marketplace add OrRon/EpicInfographics
/plugin install epic-infographics@epic-infographics

Codex has the same shape as a subcommand pair, and Factory Droid adds a scope flag, installing the plugin with --scope user. Pi takes a single command:

bash
pi install https://github.com/OrRon/EpicInfographics

The manual route is a clone into a skill directory, which is the fallback for any agent that reads skills rather than plugins. The repeated name epic-infographics against the marketplace name epic-infographics is the naming convention to follow when writing your own.

The canvas is a place, and flatness counts as a failure

The first principle is the one everything else hangs off. The canvas is a place, not a page. Every piece builds a scene, and the data lives inside that scene rather than sitting on top of it. Four scene types are named as examples: a drafting sheet, a dark theatre, a naturalist's folio, a miniature world.

Flat graphic minimalism is explicitly called a failure here, even when it is tidy. That is a strong constraint, and it is the reason the gallery looks the way it does.

The second principle is that the drawn object carries the data. A cup is filled to two thirds because two in three adults drink coffee. A rocket has a hatched section that is exactly the ninety percent propellant fraction. A funnel of stage light is drawn at one pixel per hundred and forty users.

So the arithmetic is not annotation, it is geometry. A reader can measure the cup and get the statistic, which is the opposite of a bar chart floating on a background.

Both principles are enforced through the style files rather than by taste, which is what makes them followable by an agent.

Every palette passes a six-check colour-blind validation, including the dark ones

The third principle covers construction. Charts are computed rather than eyeballed: bar ratios, donut arcs and areas all come from arithmetic written into the file, and every palette goes through a colour-blindness checker before it ships.

The style files then raise that to a specification. Each one is described as a complete spec the agent can execute as written, covering exact hexes, font pairings, geometry, signature devices, and an explicit list of do's and don'ts. Nothing is left to interpretation, which is the requirement for an agent to reproduce a look twice.

The validation is stated as six checks, and it applies to the dark palettes as well. That last part is doing real work. Dark-background designs usually fail contrast checks that a light design passes, and a validation that skipped them would leave the darker languages unusable.

The palette has a fixed example in the description. A funnel of stage light drawn at one pixel per hundred and forty users implies a scale that has to be reconciled with the frame, and a spec that fixes the hexes also fixes the geometry so that ratio survives.

This is the mechanism behind the claim that the output does not look generated: the decisions are removed from the model rather than prompted for.

The agent screenshots its own render and runs three named tests on it

The fourth principle is the one that makes the skill a skill rather than a style guide. The agent reviews its own render.

Every graphic is screenshotted, read back, and checked against a hard anti-slop list before you ever see it. Three tests are named: the no-text squint test, the template test, and the flat-ground test.

The squint test targets the readable-but-empty failure. The template test targets the rounded-card-grid look the project was built to avoid. The flat-ground test targets the bar chart on an empty background.

Each of the three corresponds to one of the specific habits named in the opening paragraph: emoji where an icon should be, rounded cards in a symmetric grid with Tailwind blue, and a chart floating on a flat background. The project description of what looks machine-made and the failure list are the same list, which is a sign the checks were written from the diagnosis rather than assembled separately.

The screenshots also feed the animation stage, since the layout checks are said to hold on the finished frame rather than only on the still.

Animation is CSS, scrubbed frame by frame in headless Chromium and joined with ffmpeg

Motion is not a separate render. Every gallery piece is also a short animation produced from the same HTML file as its still.

The skill asks up front whether the graphic should move, then storyboards the build in a fixed order: the scene is already on stage, the data arrives in order, and the hero lands last. That ordering is what keeps a moving graphic from feeling like a reveal of a finished image.

Each design language then choreographs in its 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.

The mechanism underneath is a bundled script. It scrubs the page's CSS animations frame by frame in headless Chromium and assembles the MP4 and GIF with ffmpeg. Because the frames come from CSS keyframes rather than from a canvas draw loop, the result is deterministic, and the same layout checks still apply to the finished frame.

That determinism is the practical consequence. A video whose frames are generated by a browser rather than sampled from a running page can be re-rendered identically, which is what makes an animation reviewable at all.

Nine languages are defaults, and three are gated because they are flat

The design language table splits into two tiers, and the split is a judgement about slop rather than about aesthetics.

Nine are scene-native and used by default. blueprint is a cyanotype drafting sheet with dimension arrows, hatch fills and a stamped title block. dark-glass is luminous data on deep space with aurora fields, glass panels and disciplined glow. naturalist-plate is nineteenth-century field-guide engraving with figure systems, watercolor tints and foxing. isometric-world is miniature floating dioramas with data as architecture in an exact two-to-one projection. retro-print is a mid-century poster in four inks with misregistration, film grain and arc text. editorial is a magazine feature using Fraunces at huge sizes, drop caps and charticles. hand-drawn is a marker sketchbook with wobble-filtered linework, washi tape and doodle arrows. park-poster is a WPA screen-print vista with layered flat planes, a title band and a tiny figure for scale. cutaway is a DK-style cross-section with sliced machines, numbered callouts, detail lenses and tiny people.

Three are marked high slop-risk and used only on explicit request: swiss, corporate-clean and neo-brutalist. They are described as flat by construction, and the skill forces scene-craft into them rather than using them as they are.

Nine plus three is the twelve design languages the gallery claims, and the gating is the interesting mechanism: the risky styles are not removed, they are made conditional.

The gallery claims six canvas formats and its own captions show four

The gallery is the evidence, and it is worth reading the captions rather than the count.

The text says thirteen briefs, twelve design languages, six canvas formats, and that every piece is animated. Thirteen example directories are present, plus a briefs.md file holding test briefs, which matches the brief count.

The canvas format appears in each caption after the design language. Reading them across the gallery gives story, a4, square and wide. Four distinct formats appear in thirteen pieces.

So either two formats exist that the gallery does not exercise, or the count is stale. The captions are the harder evidence, since they are attached to actual files.

The other thing the captions make clear is the pairing between language and format. Each language appears with one or two formats rather than being offered in all of them, so blueprint comes as story and a4, dark-glass as square, wide and story, isometric-world as wide and story.

Each image links to a directory holding its brief, its HTML source, and the MP4 and GIF versions, which is what makes the gallery auditable rather than decorative.

Editorial conclusion

This fits someone already working inside a coding agent who wants infographics that do not read as generated, and who is willing to accept a house style with nine options plus three opt-in ones. It does not fit someone who needs a diagram library or a charting API, because there is no package to import and nothing is installed into your project. Two things to check before relying on it. First, every palette passes a six-check colour-blind validation, so a palette you want may be rejected rather than adjusted. Second, three of the twelve languages, namely swiss, corporate-clean and neo-brutalist, are deliberately gated behind an explicit request because they are flat by construction. The last push is dated 2026-08-27 and there are no releases, so track the repository rather than a version.

Frequently asked questions

What is EpicInfographics and what is it installed into?

It is an open-source skill that teaches a coding agent to design infographics. It ships as plugins for Claude Code, Codex, Factory Droid and Pi, with a plain directory layout for any agent that reads skill directories, and there is no package to add to a project.

How many design languages does EpicInfographics ship?

Twelve, split into two tiers. Nine are scene-native defaults including blueprint, dark-glass, naturalist-plate, isometric-world, retro-print, editorial, hand-drawn, park-poster and cutaway. Three, namely swiss, corporate-clean and neo-brutalist, are marked high slop-risk and are used only when explicitly requested.

How does EpicInfographics avoid machine-looking output?

Four mechanisms. The canvas must be a scene rather than a page, with flat graphic minimalism counted as a failure. The drawn object carries the data, so a cup is filled to two thirds for a two-in-three statistic. Chart geometry comes from arithmetic written into the file. And every palette passes a six-check colour-blind validation before it ships.

What is the anti-slop check in EpicInfographics?

The agent screenshots its own render, reads it back, and checks it against three named tests before the graphic is shown: the no-text squint test, the template test and the flat-ground test. Each targets a specific habit, being an empty readable layout, a rounded card grid, and a chart on an empty background.

How are the animations in EpicInfographics produced?

From the same HTML file as the still, using CSS animations scrubbed frame by frame in headless Chromium and assembled into MP4 and GIF with ffmpeg. Because the frames come from CSS keyframes the render is deterministic, and the skill asks up front whether a graphic should move and storyboards the build with the hero landing last.

How do I install EpicInfographics manually?

Clone https://github.com/OrRon/EpicInfographics.git and copy the resulting directory into the skill directory your agent reads, at user level or wherever the agent looks for skills. The plugin route is a single command per runtime instead, such as pi install for Pi.

Official sources

  1. Issues
  2. License: MIT
  3. OrRon/EpicInfographics on GitHub
  4. README
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/orron-epicinfographics.svg)](https://hysenlabs.com/projects/orron-epicinfographics)