Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/zebbern/claude-code-guide/data-viz-renderernpx skills add zebbern/claude-code-guide --skill data-viz-renderergit clone --depth 1 https://github.com/zebbern/claude-code-guideWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00062 | $0.01507 |
| Opus 5 | $0.00031 | $0.00754 |
| Sonnet 5 | $0.00012 | $0.00301 |
| Haiku 4.5 | $0.00006 | $0.00151 |
Grade A, and why
data-viz-renderer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Data Viz Renderer
Generate self-contained HTML/SVG infographics from JSON data. Four supported types:
- Stats Cards — KPI big numbers + trend arrows + icons
- Comparison Chart — Grouped bar chart with multiple series
- Flow Diagram — Step-by-step process with numbering, icons, and connecting arrows
- Dashboard — Mixed layout: stat cards + bar chart + donut chart + flow
Output is a fully self-contained HTML file (all CSS/SVG inline, no external dependencies), ready to open directly in a browser.
Usage
Basic Usage
python3 scripts/build_infographic.py config.json
Also supports reading from stdin:
cat config.json | python3 scripts/build_infographic.py
The script outputs a JSON status to stdout and writes the generated HTML to the path specified in the output field.
JSON Configuration Format
Common fields:
| Field | Type | Required | Description |
|---|---|---|---|
title |
string | No | Infographic title |
subtitle |
string | No | Subtitle |
type |
string | Yes | stats / comparison / flow / dashboard |
palette |
string | No | Color palette (default: auto) |
data |
object/array | Yes | Data content (format depends on type) |
output |
string | No | Output file path (default: infographic.html) |
footer |
string | No | Footer text |
Color Palettes
Available values: auto (automatically chosen based on data), ocean, sunset, forest, berry, vibrant, corporate, pastel, earth
Data Format by Type
1. stats — Stat Cards
{
"type": "stats",
"data": [
{
"label": "Total Revenue",
"value": "$1.2M",
"icon": "money",
"trend": "+12.5%",
"trend_dir": "up"
},
{
"label": "Users",
"value": "45,230",
"icon": "users",
"trend": "+8.2%",
"trend_dir": "up"
}
]
}
icon options: users, user, money, percent, globe, clock, check, star, target, zap, chart-bar, chart-pie, database, rocket, shield, heart, light, search, mail, settings, flag, trending-up, trending-down
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 187 lines · 62 tokens per session scan A 94f01a27c3c0
data-viz-renderer is a skill published in the GitHub repository zebbern/claude-code-guide (4,597 stars, last pushed 2d ago), licensed MIT. It adds 62 tokens to every session and 1,507 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
svg-press
Teaches agents how to hand-craft self-contained SVG diagrams that render correctly in browsers, tags, and Playwright PDF/PNG. Covers containment math, viewBox sizing, arrow construction, text hierarchy, KDCube brand color tokens, semantic zone fills, badges, the PNG inspection loop, writepng parameters, multi-diagram…
reimagine-it
Content-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers, links, emails, and colors already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html; also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it"…
chart-designer
Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.
html-report
Parse data files of many formats — CSV/TSV, Excel (.xlsx), SQLite, JSONL/NDJSON, JSON, Markdown, plain text, and log files — and generate a stunning, self-contained, single-file HTML experience that visualizes the data: a Three.js animated hero, GSAP scroll animations, Tailwind styling, column-profiled data tables…
infographic
Turn a data file (CSV/TSV, Excel, SQLite, JSON/JSONL, Markdown, text, logs) into a static, shareable infographic IMAGE — a rendered PNG plus its editable HTML source. Composes real infographics (hero stat, numbered story spine, pictograms, annotations, takeaway), not styled dashboards. Use this skill whenever the user…