OrRon/EpicInfographics instruction manual

1. What Epic Infographics is and how it relates to Claude Code

Epic Infographics is an MIT-licensed Agent Skill for producing infographic images from data, facts, or a topic. It directs an agent to write one self-contained HTML document using CSS and inline SVG, render that page to PNG, inspect the image, and correct it before delivery. The same approved HTML can optionally be animated and rendered to MP4 or GIF.

**Claude Code classification:** `context_injection`, `tool_surface`, and `orchestration`; install mode: `claude_extension`; setup effort: `medium`. The native Claude Code plugin and `SKILL.md` inject the design workflow and hard rules into the agent’s context. Bundled Node scripts add layout checking, Chromium rendering, and animation output. The twelve-step procedure orchestrates briefing, story selection, construction, validation, review, correction, and optional motion. This is not a standalone replacement for Claude Code.

The repository documents social graphics, statistics posters, story/reel visuals, print one-pagers, link-preview banners, visual summaries, and short data videos. It supplies six canvas presets, scene-oriented design specifications, chart and composition references, an HTML skeleton, and rendering scripts. Progressive disclosure means the agent normally reads the entry skill, one selected style specification, and only the references needed for the current graphic.

Important evidence limits: only the supplied first-party files were inspected, not the implementations of the checker, renderer, animator, validator, template, style references, CI workflow, or examples. The README lists nine scene-native and three high-risk styles, while plugin descriptions say “Ten” and enumerate only ten; treat the exact style count as documentation-inconsistent. Claims about visual quality, deterministic rendering, color-blind safety, and CI behavior are repository claims rather than independently verified results.

2. Installation and one-time rendering setup

For native Claude Code installation, enter the following commands in Claude Code exactly as documented:

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

The documented update path is `/plugin` → **Marketplaces** → **epic-infographics** → **Enable auto-update**.

A manual Claude Code installation is also documented. Clone the public repository, then copy the skill either into the user-level skills directory or a project’s skills directory:

git clone https://github.com/OrRon/EpicInfographics.git
# user-level:
cp -r EpicInfographics/skills/epic-infographics ~/.claude/skills/
# or project-level:
cp -r EpicInfographics/skills/epic-infographics your-project/.claude/skills/

The README additionally documents installation for other hosts:

codex plugin marketplace add OrRon/EpicInfographics
codex plugin add epic-infographics@epic-infographics

droid plugin marketplace add https://github.com/OrRon/EpicInfographics
droid plugin install epic-infographics@epic-infographics --scope user

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

Rendering requires Node dependencies and Playwright’s Chromium browser. Run this once from the installed `skills/epic-infographics` directory:

npm install && npx playwright install chromium

The README says the agent attempts this setup on the first render if it was skipped. Chromium is used because the source is HTML/CSS and needs browser text wrapping, web fonts, backdrop blur, blend modes, and high-resolution screenshots. Playwright is the sole dependency declared in the supplied package file. The HTML source itself can be opened in a browser, but PNG production uses the bundled render path.

3. Starting a job: brief, data, and story selection

After installation, request an infographic in ordinary language. These are the repository’s copy-paste examples:

make me an infographic about our Q3 numbers, dark and dramatic, 16:9

turn this data into a poster for the office printer  [paste a table]

a fun square social graphic about how sourdough works, hand-drawn style

The skill begins by identifying four constraints. **Audience** establishes prior knowledge and reading behavior. **Goal** determines whether the image should inform, persuade, impress, or drive an action. **Context** identifies its destination, such as a feed, slide deck, print piece, or link preview. **Still or animated** determines whether MP4/GIF adds value; the workflow treats print and link previews as still-image uses.

If the request already supplies these facts, the agent restates them and continues. Otherwise, it asks one round of questions, preferably as multiple choice. When operating unattended and unable to ask, it chooses reasonable assumptions and discloses them at delivery.

Next, it gathers user-supplied, researched, or derived facts. It must not invent statistics. Illustrative values must be identified as illustrative. It intentionally gathers enough material to support more than one possible argument.

The agent then proposes two or three genuinely different story angles. Each contains a working headline, a hero number or fact, and one sentence stating what the reader should remember. The recommended angle appears first. The user chooses an angle; if interaction is impossible, the agent uses its recommendation and reports that choice later. This chosen argument controls the hero element, while secondary facts become supporting material or are removed.

4. Visual concept, canvas, style, and data forms

The concept stage starts with a physical metaphor. After consulting `references/illustration-and-texture.md`, the agent identifies two or three objects associated with the subject and chooses one capable of carrying data—for example, a cup whose fill level represents a proportion. The final no-text test asks whether the subject remains recognizable with the words covered.

Six documented canvas presets determine dimensions and layout:

• `square`, 1080×1080: social feeds.
• `story`, 1080×1920: stories, reels, and phones.
• `wide`, 1920×1080: presentations, YouTube, or wallpaper.
• `og`, 1200×630: link previews and banners.
• `a4`, 1240×1754: printed posters or handouts.
• `tall`, 1080×automatic height: scrolling long-form work.

Vertical presets favor a single-column flow; `wide` favors two or three zones; `square` may use a hero with a supporting 2×2 zone.

The agent reads exactly one design-language file and follows its colors, fonts, geometry, signature devices, and restrictions. Subject mappings include technical→`blueprint`, dramatic/tech→`dark-glass`, literary→`editorial`, warm/craft→`retro-print`, friendly→`hand-drawn`, nature/science→`naturalist-plate`, spatial systems→`isometric-world`, journeys/vistas→`park-poster`, and machinery explanations→`cutaway`. `swiss`, `corporate-clean`, and `neo-brutalist` are documented as high slop-risk and may be used only when explicitly requested, with added environment and story structure.

After reading `references/data-vocabulary.md`, the agent chooses one hero form and two to four different supporting forms. Repeating generic charts is rejected; metaphor-integrated forms such as object fills or icon armies are preferred.

5. Composition and construction rules

Before building, the agent reads `references/composition.md` and chooses one named pattern: **Big Object**, **Bleed**, **Overlap stack**, **Diagonal drive**, **Editorial spread**, or **Specimen sheet**. It records that choice in an HTML comment. A card grid may occupy no more than one-third of the canvas and cannot define the whole design.

Required visual tension includes one dense and one empty zone, at least three element sizes, something crossing a boundary, and a non-uniform background. Texture is added when required by the selected style. Construction begins from `templates/skeleton.html`.

The deliverable is one self-contained HTML file. Style values are CSS custom properties; charts are inline SVG; Google Fonts may be linked, but no other external resources or JavaScript frameworks are allowed. The composition contains exactly one dominant hero, marked with `data-hero`, plus a footer containing the data source and/or attribution. Spacing follows the selected style’s scale rather than arbitrary margins.

Chart geometry must be calculated from values. Bars start at zero; areas scale by value; a value twice as large has twice the area, not twice the radius. Dual axes are prohibited. Pie and donut charts are limited to part-to-whole views with no more than five segments and are not used for close-value comparisons. Important marks need direct labels or readable labeled axes because static images have no tooltips. Series use chart-safe style colors in fixed order, with more than five series folded into “Other.”

Numbers use human formatting such as `12.4M`, always include units, and avoid truncation. Text uses ink or muted tokens rather than a series color, except for legible text inside a colored fill. Emoji cannot substitute for icons; illustration must be drawn in SVG or omitted.

6. Preflight, rendering, inspection, and correction

From the installed skill directory, check the completed HTML before rendering. Substitute the actual preset when it is not square:

node scripts/check.mjs infographic.html --preset square

The documented checker loads the page headlessly and measures real glyph geometry. Errors include colliding text, clipping by overflow or canvas edges, content outside the canvas, text below the readable floor, and multiple `data-hero` elements. Errors block rendering and must be corrected until the count reaches zero. Warnings cover a missing or weak hero, tight type, and near-overlaps; each should be fixed or retained with a one-line justification.

A deliberate overlap can be marked with `data-overlap-ok` on one participating element. This waiver is only for intentional composition, not accidental collision, and must remain readable in the rendered PNG.

Render after preflight passes:

node scripts/render.mjs infographic.html infographic.png --preset square

The agent must then view its PNG. It checks overflow, clipping, collisions, widows, hero dominance, truthful chart ratios, contrast, crowding, bottom-edge balance, and fidelity to the selected style. The anti-slop review rejects a generic reusable template, a rounded-card dashboard, a flat field of type and shapes, emoji icons, uniform spacing without boundary crossings, or a composition with no large anchor. Covering the text should still leave the topic recognizable.

At least one correction loop is mandatory. After every change, the agent reruns preflight because a repair may create another collision, rerenders, and inspects again. Delivery includes the approved PNG and an offer of the HTML source.

7. Optional deterministic animation workflow

Animation is performed only when the user opted in initially or later asks for an MP4, GIF, social video, or moving version. Motion is layered onto the already approved static HTML; it cannot be used to conceal an unreviewed still.

The agent first reads `references/motion.md`. It storyboards the reveal in the documented order: place, structure, data, hero, then support. CSS keyframes are added to the same HTML file using the fill mode specified by the motion reference. The design language also controls motion character—for example, the README describes drafted blueprint lines, screen-print passes, lighting cues, and layered vista reveals.

Render an MP4 and request a contact sheet with:

node scripts/animate.mjs infographic.html infographic.mp4 --preset square --sheet sheet.png

The animation tool requires `ffmpeg` on `PATH`. The only installation examples supplied by the repository are:

brew install ffmpeg

apt install ffmpeg

The README says the script scrubs CSS animations frame by frame in headless Chromium and assembles the output with ffmpeg. Preflight and still rendering evaluate the animation’s end state, so the static layout checks continue to apply.

The agent reviews the generated eight-frame contact sheet using the motion checklist. The opening frame must already establish a scene, staggered arrivals must be visible, and the final frame must match the approved PNG. Problems trigger another edit and render cycle. The approved MP4 is delivered beside the still. When the destination needs GIF, the documented procedure is a second run of the same animation command with a `.gif` output filename.

8. Repository maintenance, contribution, security, and limitations

Contributions prioritize new design languages. Copy `skills/epic-infographics/references/design-languages/_template.md`, complete every section, validate the palette with a color-vision-deficiency simulator, mention the style in `SKILL.md` step 4, and add an end-to-end example. Each example directory must contain `brief.md`, `infographic.html`, `infographic.png`, `infographic.mp4`, and `infographic.gif`, with a corresponding README gallery row. New examples for an existing style require the same files and must be unedited outputs of the skill.

Before submitting, use only the documented checks:

node scripts/validate.mjs
cd skills/epic-infographics
npm install && npx playwright install chromium
node scripts/render.mjs ../../examples/<name>/infographic.html /tmp/out.png --preset <preset>

The validator is documented as checking manifests, examples, and skill routing. CI reportedly runs it plus a headless render smoke test for each pull request. Plugin versions are synchronized with:

node scripts/bump-version.mjs 0.2.0

Examples must use inline CSS/SVG, may link only Google Fonts externally, must cite factual data or label illustrative values, and must calculate geometry. The README describes the gallery as the test suite.

Security reports should use GitHub’s private **Security** tab → **Report a vulnerability**, not a public issue. Relevant reports include unexpected renderer fetching or execution beyond the local input and Google Fonts, external scripts or data exfiltration in HTML, and prompt-injection payloads in skill or example files. Only the latest release on `main` is supported; the policy promises a response within one week.

Operational limitations include local Node setup, Chromium installation, and ffmpeg for animation. Google Fonts and researched data may involve network access. The supplied files do not document a minimum Claude Code version, telemetry behavior, an independent security audit, or verified cross-platform rendering results.