Claude Code Agent Skill and rendering toolkit · Early-stage versioned project at 0.2.0 with examples, CI claims, contribution rules, and a security policy.

OrRon/EpicInfographics

MIT-licensed Claude Code plugin and portable Agent Skill that turns a brief or dataset into a scene-first self-contained HTML/CSS/inline-SVG infographic, mechanically checks layout, renders PNG through Playwright Chromium, reviews and revises the result, and optionally produces deterministic MP4/GIF animation with ffmpeg.

infographic designdata visualizationgraphic designsocial media graphicsprint designanimationvisual storytellingaccessibility
Routing score
80.0
Readiness
Usable for reviewed creative workflows, but local scripts, browser dependencies, generated claims, and output quality require human oversight.
License
MIT
Maintenance
active
Components
16
Revision
0

Selection

Select when

  • You need a Claude Code skill specialized in infographic creation rather than general UI design.
  • You want editable self-contained HTML/CSS/inline-SVG source alongside PNG output.
  • You need presets for social, story, presentation, link-preview, print, or scrolling formats.
  • You want an agent to propose and route among several visual story angles.
  • You value computed chart geometry and explicit prohibitions on misleading common chart patterns.
  • You want mechanical checks for text collisions, clipping, readability, and focal hierarchy before rendering.
  • You want a mandatory render-review-fix loop with visual anti-template criteria.
  • You need optional MP4 or GIF animation built from the approved static design.
  • You are comfortable installing Node dependencies and Playwright Chromium locally.
  • You can inspect generated HTML, sources, geometry, and final visual output before publication.

Boundaries

Avoid when

  • You cannot allow local Node scripts or a headless Chromium dependency.
  • You require a no-network render path because Google Fonts are the documented external exception.
  • You need a hosted, zero-install image-generation service.
  • You need direct editing in Figma, Illustrator, or another native design-file format.
  • You cannot install or provide ffmpeg for requested animation.
  • You require independently validated accessibility, security, or output-quality guarantees.
  • You need fully automated publication without human fact-checking or visual review.
  • You need a generic charting library or interactive dashboard rather than a composed static scene.
  • You need a stable host-version compatibility matrix or long-term support policy.
  • You cannot review executable generated HTML and repository scripts before use.

Strengths

Capabilities

Packages one progressively disclosed SKILL.md workflow with focused references, style specifications, templates, and scripts.Installs as a native Claude Code plugin or as a copied skill under a Claude skills directory.Clarifies audience, goal, destination, and still-versus-animation needs before design begins.Develops two or three distinct story angles and asks the user to select one when interaction is available.Selects a topic-specific physical metaphor intended to carry data rather than merely decorate it.Provides six documented canvas presets covering social, story, wide, link-preview, A4, and scrolling formats.Documents nine scene-native design languages and three explicitly restricted high-risk flat styles.Uses a data vocabulary intended to vary hero and supporting representations instead of repeating generic charts.Requires computed bar, arc, and area geometry and prohibits dual-axis charts and invented unlabeled data.Builds self-contained HTML with CSS and inline SVG, with Google Fonts as the documented external resource exception.Provides a Playwright-based preflight that is described as checking collisions, clipping, canvas escape, font size, and hero count.Provides a Playwright Chromium renderer that waits for fonts and produces retina-scale PNG output.Requires the agent to inspect its own PNG, fix defects, rerun preflight, and render at least once more before delivery.Applies an anti-template review covering generic grids, flat backgrounds, missing topic identity, emoji icons, uniform spacing, and weak focal hierarchy.Supports CSS-keyframe animation of the approved still and frame-by-frame output to MP4 or GIF through a bundled script and ffmpeg.Uses a contact sheet to review animation staging and the final-frame match according to the documented workflow.Includes thirteen stated gallery briefs spanning multiple formats and visual languages with HTML, PNG, MP4, and GIF artifacts claimed.Defines a design-language contribution template with required palettes, fonts, geometry, signature devices, restrictions, and a rendered example.States that CI validates manifest synchronization, example completeness, routing, and a headless render smoke test on pull requests.Publishes synchronized Claude Code, Codex, and Factory plugin metadata at version 0.2.0.

Risk profile

Risks and limitations

  • Uncertainty: the supplied evidence does not include the implementations of check.mjs, render.mjs, animate.mjs, validate.mjs, templates, style references, CI workflow, or generated example source for direct inspection.
  • Uncertainty: repository metadata is dated in 2026 relative to this analysis context, so activity, adoption, and recency signals cannot be independently reconciled.
  • Uncertainty: README and gallery quality claims are first-party statements, and no independent output benchmark, user study, or reproducible evaluation was supplied.
  • Documentation is inconsistent about style count: the README and skill describe twelve styles, while plugin metadata advertises ten.
  • The packaged version is 0.2.0, and no release history, migration policy, or stability commitment was supplied.
  • Rendering requires Node dependencies, Playwright, and a Chromium installation; animation additionally requires ffmpeg on PATH.
  • Google Fonts are allowed as an external resource, so font retrieval can create network availability and privacy considerations.
  • The skill may research missing facts through the host agent, but source quality, permissions, and factual correctness remain user responsibilities.
  • Mechanical checks cannot establish narrative truth, aesthetic quality, accessibility, or correct interpretation of the underlying data.
  • Generated HTML and SVG are executable or active browser content and should be reviewed before opening or rendering with sensitive local context.
  • The workflow is intentionally opinionated and may reject flat, minimal, corporate, or brand-system layouts unless explicitly requested.
  • Only the latest release on main is supported according to the security policy, with no long-term-support branch documented.

First-party evidence includes a security policy covering unexpected render-script fetching or execution, external scripts or data exfiltration in HTML, and prompt injection in skill files or examples. Vulnerabilities are reported privately through GitHub with a stated one-week response target, and only latest main is supported. The workflow executes local Node scripts and opens generated HTML in Chromium; no sandbox, audit, dependency review, or script implementation was supplied, so users should treat generated pages and scripts as trusted-code surfaces.

Component inventory

16 documented components

Agent Skill

epic-infographics

Creates scene-first HTML/CSS/SVG infographics, renders PNGs, and reviews and fixes the output.

skills/epic-infographics/SKILL.md
Workflow

Brief and story selection

Clarifies audience, goal, context, motion, data, and a selected story angle before design.

skills/epic-infographics/SKILL.md
Workflow

Static infographic production

Selects metaphor, canvas, style, data forms, and composition; then builds, checks, renders, reviews, and revises a PNG.

skills/epic-infographics/SKILL.md
Command

Layout preflight checker

Checks text collisions, clipping, canvas escape, readable sizes, and hero-element constraints.

skills/epic-infographics/scripts/check.mjs
Command

PNG renderer

Renders a self-contained infographic HTML file to a font-safe PNG through headless Chromium.

skills/epic-infographics/scripts/render.mjs
Command

MP4/GIF animator

Scrubs CSS animations frame by frame and renders video or GIF plus an optional contact sheet.

skills/epic-infographics/scripts/animate.mjs
Setup command

Render environment setup

Installs the skill's Node dependency and the Chromium browser used by Playwright.

skills/epic-infographics/package.json
Style modules

Design-language library

Named scene specifications control palette, fonts, geometry, texture, and signature devices.

skills/epic-infographics/references/design-languages/
Render presets

Canvas preset library

Provides square, story, wide, OG, A4, and tall output formats.

skills/epic-infographics/SKILL.md
Template

Infographic HTML skeleton

Starting boilerplate for the single-file infographic implementation.

skills/epic-infographics/templates/skeleton.html
Manual installation

Portable skill-directory install

Copies the skill into a user-level or project-level Claude-compatible skills directory.

skills/epic-infographics/

Technical profile

Requirements and configuration

License
MIT
Version
0.2.0 in supplied plugin and package manifests
Language
Repository metadata identifies JavaScript; generated artifacts use HTML, CSS, and inline SVG.
SkillEntry
skills/epic-infographics/SKILL.md
ClaudePackaging
.claude-plugin/plugin.json plus documented Claude marketplace installation and manual .claude/skills copying
Runtime
Node.js ES modules with Playwright dependency ^1.49.0
Rendering
Documented headless Chromium rendering from self-contained HTML to retina-scale PNG
Animation
Documented CSS-keyframe scrubbing to MP4 or GIF with ffmpeg on PATH
CanvasPresets
square 1080×1080, story 1080×1920, wide 1920×1080, og 1200×630, a4 1240×1754, and tall 1080×auto
ExternalResources
Contributed examples permit Google Fonts links but prohibit other external resources and JavaScript frameworks.
Validation
README and contribution files state manifest, example, routing, and headless-render checks, but implementations were not supplied.
Artifacts
HTML source, PNG still, optional MP4 and GIF, and an animation contact sheet are documented outputs.
RepositoryStatus
Public, not archived, MIT-licensed, default branch main, with 387 stars and 36 forks in supplied metadata.

Classification

How it enters the stack

Context InjectionTool SurfaceOrchestration

Evidence: a native Claude plugin or copied SKILL.md injects the workflow; bundled Node scripts expose checking, rendering, and animation tools; the skill sequences user choices, references, validation, visual review, correction, and optional motion. Setup is medium because rendering needs npm dependencies and Chromium, with ffmpeg additionally required for animation.

Claude Extension · medium setup effort · high confidence · automated

Evidence and risk

Primary sources

first_party_fileREADME.mdhttps://github.com/OrRon/EpicInfographics/blob/main/README.md
first_party_fileSECURITY.mdhttps://github.com/OrRon/EpicInfographics/blob/main/SECURITY.md
first_party_fileCONTRIBUTING.mdhttps://github.com/OrRon/EpicInfographics/blob/main/CONTRIBUTING.md

Routing context

Conflicts, complements, and synergies

ecosystem-compatible

gh_anthropics_skills

Both use the Claude Code Agent Skills model; Epic Infographics is a specialized third-party skill rather than part of Anthropic's supplied examples.

high confidence
overlaps-with

gh_mengto_skills

Both provide portable design-oriented SKILL.md workflows, but Epic Infographics concentrates on an end-to-end infographic render and animation pipeline.

high confidence
overlaps-with

gh_conardli_garden_skills

Both package Claude-installable visual production workflows with scripts and optional media output, while their primary deliverables differ.

medium confidence
complements

gh_dzhng_skills

Both emphasize iterative visual review and skill-based graphics guidance; Epic Infographics adds a dedicated infographic preflight and render pipeline.

medium confidence
complements

gh_jakubkrehel_skills

Jakub Krehel's suite focuses interface critique and variants, while Epic Infographics focuses authored data graphics with its own review gates.

medium confidence