OrRon/EpicInfographics installation guide

Install Epic Infographics for Claude Code on Apple-silicon macOS Tahoe

What this repository is

**Epic Infographics** is a **Claude Code extension delivered as an Agent Skill**. Its primary mechanism is **context injection**: Claude Code loads the repository’s `SKILL.md` workflow and supporting design references when you ask for an infographic. It also adds a **local tool surface** through bundled Node scripts that check layouts, drive Chromium through Playwright, render HTML/CSS/SVG to PNG, and optionally create MP4 or GIF animation.

This is not a standalone Mac application and does not add a graphical editor. You use it by talking to Claude Code. The skill creates a self-contained HTML file, validates its layout, renders it, reviews the PNG, and revises it. The repository provides a native Claude Code plugin manifest, so the documented Claude Code marketplace installation is the best-supported route.

The supplied files identify version **0.2.0** and an **MIT license**. They do not state a minimum Claude Code version or confirm testing specifically on macOS Tahoe or Apple silicon. The render dependency is Playwright with Chromium, but no architecture-specific setup is documented.

Before you begin

You need:

• A working installation of **Claude Code**.
• Internet access to add the GitHub marketplace and download the plugin.
• For local PNG rendering, working `npm` and `npx` commands. These normally come with Node.js, but this repository does not document a Node.js version or provide a supported Node installation command.
• Enough trust to let the skill write HTML and images in the project where you ask it to work and run its bundled Node render scripts.

The repository does not document how to install Claude Code, Node.js, npm, Git, or Homebrew. Install those only from their own first-party documentation if they are missing; no third-party bootstrap commands are included here.

Animation is optional. It additionally requires `ffmpeg` on your command path. You do not need it for ordinary HTML and PNG output.

Step 1: Open Claude Code

Start Claude Code as you normally do and open the project or working folder where you want to create an infographic. The next two entries are **Claude Code slash commands**, not macOS Terminal commands.

Step 2: Add the plugin marketplace

Paste this into Claude Code and submit it:

/plugin marketplace add OrRon/EpicInfographics

This registers the repository as a Claude Code plugin marketplace. Wait for Claude Code to finish before continuing. If Claude Code reports that it does not recognize the command, stop: the supplied repository files do not document a fallback command for upgrading or repairing Claude Code.

Step 3: Install the plugin

Paste this second command into Claude Code:

/plugin install epic-infographics@epic-infographics

The first `epic-infographics` is the plugin name, while the name after `@` identifies its marketplace. Let installation finish before requesting a render.

Step 4: Enable automatic updates if wanted

The README documents this menu route inside Claude Code:

1. Enter `/plugin`.
2. Open **Marketplaces**.
3. Select **epic-infographics**.
4. Enable **auto-update**.

Automatic updates are optional. The security policy says only the latest release on `main` is supported, so enabling updates can help you remain on the supported version. Updates also change prompt instructions and executable render code, however, so review new repository changes if your work is sensitive.

Step 5: Prepare rendering

The skill renders graphics with HTML/CSS/SVG, Playwright, and headless Chromium. The README says the setup command must be run from the installed skill directory:

npm install && npx playwright install chromium

The supplied files do not document the filesystem location where Claude Code places a marketplace plugin, nor do they provide a supported `cd` command for reaching it. Do not guess at a hidden plugin path. The README explicitly says that if you skip this setup, the agent runs it on the first render. For a marketplace installation, the documented layperson path is therefore to proceed to your first request and allow Claude Code to perform setup when needed.

That first render may take longer because npm must install the declared `playwright` dependency and Playwright must download Chromium. The package declares Playwright `^1.49.0`; no other runtime dependency is listed in the supplied `package.json`.

If the first render reports that `npm` or `npx` is unavailable, stop and install Node.js using Node’s first-party macOS instructions. This repository supplies no command for doing that, so none is reproduced here.

Step 6: Test the installation

In Claude Code, make a plain-language request. The README gives this example:

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

Do not use confidential or real business figures merely for a test. You can instead provide clearly illustrative data and require it to be labeled illustrative. The skill’s workflow says it should clarify the audience, goal, destination, and whether you want animation. It then proposes two or three story angles, asks you to choose one, selects a visual metaphor and design language, and builds the result.

A successful static run should produce a self-contained HTML source and a PNG. Internally, the documented workflow runs a mechanical layout check, renders through Chromium, views the PNG, and performs at least one correction loop before delivery. The skill is instructed not to invent factual data and to compute chart geometry rather than eyeballing it.

Other source-provided requests include:

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 text in square brackets is a placeholder: replace it with your own table rather than pasting the bracketed words literally.

Optional: enable animation output

Ask for animation only after static rendering works. The skill can render an approved HTML design to MP4 or GIF, but `ffmpeg` must be available. The repository supplies this macOS command:

brew install ffmpeg

Run it in Terminal only if Homebrew is already installed and you understand that Homebrew is an external package manager. The repository does not provide a Homebrew installation command. Animation is not required for PNG infographics.

When making the request, tell Claude Code that you want an animated MP4 or GIF. The workflow says animation is added to the approved static file, rendered deterministically, and reviewed through a contact sheet.

Manual installation fallback

Use this only if native plugin installation is unavailable and your existing tools satisfy the assumptions. The README documents cloning and copying the skill into Claude Code’s user-level skills directory:

git clone https://github.com/OrRon/EpicInfographics.git
cp -r EpicInfographics/skills/epic-infographics ~/.claude/skills/

These are Terminal commands. They require Git, and the destination `~/.claude/skills/` must already exist because the supplied instructions do not include a command to create it. After copying, enter the copied skill directory using your usual file-navigation method and run the documented one-time render setup:

npm install && npx playwright install chromium

For a project-local installation, the README instead supplies:

git clone https://github.com/OrRon/EpicInfographics.git
cp -r EpicInfographics/skills/epic-infographics your-project/.claude/skills/

Replace `your-project` with the real project path before running it. Its `.claude/skills/` destination must already exist. Do not combine manual installation with the marketplace installation unless you intentionally want duplicate copies and can manage them yourself.

Security and privacy notes

The repository contains prompt instructions, static examples, and executable Node scripts. Its security policy specifically calls out risks involving render scripts fetching or executing content, external scripts in HTML, data exfiltration, and prompt injection. Review repository changes before using the tool with sensitive material.

The documented HTML format allows Google Fonts through `<link>` and forbids other external resources. Rendering can therefore contact Google Fonts, and installing dependencies contacts npm and Playwright’s download infrastructure. Treat any data placed in your infographic, source HTML, or project directory according to your organization’s privacy rules.

The plugin can read and write in the working context indicated by its manifest and workflow. Keep it in a dedicated project folder when testing, inspect generated HTML before opening it if the input is untrusted, and verify all claims and sources in the final graphic. Report suspected vulnerabilities through the repository’s private GitHub vulnerability-reporting form rather than a public issue.

Troubleshooting boundaries

• If the plugin is installed but the first render fails, confirm that Claude Code can access `npm` and `npx`; no repository-supported diagnostic command is supplied.
• If Chromium installation fails, retain the exact error and consult Playwright’s first-party documentation. Do not substitute an undocumented browser-install command.
• If animation fails while PNG rendering works, `ffmpeg` is the additional documented requirement.
• If Claude produces text but no PNG, explicitly ask it to use the installed `epic-infographics` skill and render the result. The evidence does not document a dedicated slash command for invoking the skill.
• For installation or compatibility problems specific to Tahoe or Apple silicon, use the repository’s GitHub Issues page; the supplied files make no Tahoe-specific guarantee.