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-gengit 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-gen)<a href="https://agentmods.dev/skills/serejaris/kimi-skills/data-viz-gen"><img src="https://agentmods.dev/badge/skills/serejaris/kimi-skills/data-viz-gen/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-gen"><img src="https://agentmods.dev/badge/skills/serejaris/kimi-skills/data-viz-gen.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.00112 | $0.01698 |
| Opus 5 | $0.00056 | $0.00849 |
| Sonnet 5 | $0.00022 | $0.00340 |
| Haiku 4.5 | $0.00011 | $0.00170 |
Grade A, and why
data-viz-gen 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.
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.
Infographic Builder
从 JSON 数据生成自包含的 HTML/SVG 信息图,支持四种类型:
- 统计卡片(stats) — KPI 大数字 + 趋势箭头 + 图标
- 数据对比(comparison) — 分组柱状图,支持多系列
- 流程图(flow) — 步骤流程,带编号、图标和箭头连接
- 仪表盘(dashboard) — 混合布局:统计卡片 + 柱状图 + 环形图 + 流程
输出为 完全自包含 的 HTML 文件(CSS/SVG 全部内联,无外部依赖),可直接在浏览器打开。
使用方式
基础用法
python3 scripts/build_infographic.py config.json
也支持从 stdin 读取:
cat config.json | python3 scripts/build_infographic.py
脚本输出 JSON 状态到 stdout,生成的 HTML 写入 output 字段指定的路径。
JSON 配置格式
通用字段:
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
title |
string | 否 | 信息图标题 |
subtitle |
string | 否 | 副标题 |
type |
string | 是 | stats / comparison / flow / dashboard |
palette |
string | 否 | 配色方案(默认 auto) |
data |
object/array | 是 | 数据内容(格式取决于 type) |
output |
string | 否 | 输出文件路径(默认 infographic.html) |
footer |
string | 否 | 页脚文字 |
配色方案
可选值:auto(根据数据自动选择)、ocean、sunset、forest、berry、vibrant、corporate、pastel、earth
各类型 data 格式
1. stats — 统计卡片
{
"type": "stats",
"data": [
{
"label": "总收入",
"value": "¥1.2M",
"icon": "money",
"trend": "+12.5%",
"trend_dir": "up"
},
{
"label": "用户数",
"value": "45,230",
"icon": "users",
"trend": "+8.2%",
"trend_dir": "up"
}
]
}
icon 可选值: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
trend_dir:up(绿色上升箭头)或 down(红色下降箭头)
2. comparison — 数据对比柱状图
{
"type": "comparison",
"data": {
"chart_title": "季度营收对比",
"categories": ["Q1", "Q2", "Q3", "Q4"],
"series": [
{"name": "2024", "values": [320, 410, 380, 520]},
{"name": "2025", "values": [380, 490, 450, 610]}
]
}
}
3. flow — 流程图
{
"type": "flow",
"data": [
{"step": 1, "title": "需求分析", "description": "收集用户需求", "icon": "search"},
{"step": 2, "title": "方案设计", "description": "制定技术方案", "icon": "light"},
{"step": 3, "title": "开发实现", "description": "编码与测试", "icon": "settings"},
{"step": 4, "title": "上线发布", "description": "部署到生产环境", "icon": "rocket"}
]
}
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 · 112 tokens per session scan A 58e9a42c882a
data-viz-gen is a skill published in the GitHub repository serejaris/kimi-skills (6 stars, last pushed 1mo ago), licensed MIT. It adds 112 tokens to every session and 1,698 once invoked, about $0.0006 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-09-03.
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"…
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…
chart-designer
Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.
sync-rules
Iteration closeout knowledge routing for AI-assisted development. Use when the user asks to summarize changed function points into a knowledge base, update project docs or generated superpower docs after code changes, sync rules, distill lessons from an iteration, record durable decisions, or remember user…