Claude Code Guide is a reference collection for configuring and using Claude Code, Anthropic’s command-line coding agent. Developers use it to learn commands, skills, agents, MCP, automation, security, integrations, and troubleshooting. Its catalogue add-ons provide many of the documented skills and agents.
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 skills add zebbern/claude-code-guide --skill data-viz-renderergit clone --depth 1 https://github.com/zebbern/claude-code-guideWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/zebbern/claude-code-guide/data-viz-renderer)<a href="https://agentmods.dev/skills/zebbern/claude-code-guide/data-viz-renderer"><img src="https://agentmods.dev/badge/skills/zebbern/claude-code-guide/data-viz-renderer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/zebbern/claude-code-guide/data-viz-renderer"><img src="https://agentmods.dev/badge/skills/zebbern/claude-code-guide/data-viz-renderer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What 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.1 | $0.00062 | $0.01507 |
| Opus 5.5 | $0.00025 | $0.00603 |
| Sonnet 5.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 1mo 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- data-viz-renderer — 100% identical, 0 lines differ
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.
- 1mo 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,672 stars, last pushed yesterday), licensed MIT. It adds 62 tokens to every session and 1,507 once invoked, about $0.0002 per session on Opus 5.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
data-viz-renderer
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users request data visualization, infographics, charts, or dashboards.
data-viz-gen
A generator for self-contained HTML and SVG infographics from JSON data. It supports statistic cards, comparison bar charts, flow diagrams, and mixed dashboards without external dependencies.
architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
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.
infographic-creator
An information-graphic creation guide that turns written information into a visual layout using AntV Infographic, a description language for rendering infographics.