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 serejaris/kimi-skills --skill data-viz-renderergit clone --depth 1 https://github.com/serejaris/kimi-skillsWrote 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/serejaris/kimi-skills/data-viz-renderer)<a href="https://agentmods.dev/skills/serejaris/kimi-skills/data-viz-renderer"><img src="https://agentmods.dev/badge/skills/serejaris/kimi-skills/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/serejaris/kimi-skills/data-viz-renderer"><img src="https://agentmods.dev/badge/skills/serejaris/kimi-skills/data-viz-renderer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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 | $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 7d 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.
This is a copy
100% identical to data-viz-renderer — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
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.
- 7d ago First seen · 187 lines · 62 tokens per session scan A 94f01a27c3c0
data-viz-renderer is a skill published in the GitHub repository serejaris/kimi-skills (6 stars, last pushed 1mo 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. It is 100% identical to data-viz-renderer, differing in 0 lines, and is treated as a copy.
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.
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.
svg-diagram
A guide for creating technical diagrams as hand-written SVG graphics, including flowcharts, architecture diagrams, sequence diagrams, data flows, and database diagrams. SVG is a web-friendly image format that stays sharp when resized.
infographic-structure-creator
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.