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 chengkj99/kj-skills --skill content-illustratorgit clone --depth 1 https://github.com/chengkj99/kj-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/chengkj99/kj-skills/content-illustrator)<a href="https://agentmods.dev/skills/chengkj99/kj-skills/content-illustrator"><img src="https://agentmods.dev/badge/skills/chengkj99/kj-skills/content-illustrator/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/chengkj99/kj-skills/content-illustrator"><img src="https://agentmods.dev/badge/skills/chengkj99/kj-skills/content-illustrator.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.00093 | $0.01894 |
| Opus 5 | $0.00046 | $0.00947 |
| Sonnet 5 | $0.00019 | $0.00379 |
| Haiku 4.5 | $0.00009 | $0.00189 |
Grade A, and why
content-illustrator 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 11d 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 — 177 lines — stays where its author put it; the contents beside it link to each section on GitHub.
content-illustrator：内容插图工具
把文字变成图，三种用法，一个 skill 搞定。
适用边界
- ✅ 用我：文字描述 → SVG；分析文章找插图时机；批量补全课程文件里的图片占位
- ❌ 不用我：需要 AI 绘图风格（照片/插画）→ 用
hd-infoimage；截图/录屏 → 手动操作
模式识别（先判断用哪种模式）
| 用户说了什么 | 进入模式 |
|---|---|
| 「画个图：XXX」「生成 SVG：XXX」「根据描述生成图片」 | 模式 A：描述生图 |
| 「分析这篇文章该在哪里插图」「帮我看看哪里需要加图」「分析插图时机」 | 模式 B：文章分析 |
| 「补图」「把 [流程图] 占位全部生成」「backfill」+ 目录/文件路径 | 模式 C：批量补图 |
触发词不明确时，问用户：「是要直接生成一张图、分析文章找插图位置，还是批量补全占位符？」
SVG 生成规范（三种模式共用）
所有 SVG 遵循统一规范，执行前必读：
../course-generator/references/image-protocol.md
核心要点（快速回顾）：
- 画布：
viewBox="0 0 620 480"width="620"height="480" - 字体：
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif - 节点：浅色背景 + 深色左侧色条，圆角
rx="10" - 箭头：每条连线必须有文字标注
- 配色：蓝
#E8F4FD/#4A9FD4、绿#EAF7EE/#52A96A、橙#FEF3E8/#E08A3A - 验证：用 Bash 工具
open <路径>本地预览后再插入
生成后按 A 方案插入（注释保留 + 图片引用追加）：
<!-- [流程图] 描述：... -->
模式 A：描述生图
触发：用户直接给出图片描述。
流程：
- 从描述中提取图表类型（见类型识别表）和核心内容
- 读取
image-protocol.md第 5 节提示词模板，将{描述}替换为用户提供的描述文本 - 生成 SVG，命名规则：
<slug>.svg（2-4 个英文词 +-连接） - 询问用户存放路径（或用户已指定时直接写入）
- 用 Bash 工具
open预览 - 报告：文件路径 + 是否需要插入某篇文章
类型识别表：
| 描述中出现的关键词/结构 | 图表类型 | SVG 骨架 |
|---|---|---|
| 顺序、步骤、流程、加载、触发、依次 | 流程图 | 纵向矩形 + 虚线箭头 |
| 判断、分支、条件、如果、决策 | 决策流程图 | 菱形 + 矩形 + 实线箭头 |
| 对比、区别、vs、左边/右边、好坏 | 对比图 | 左右分栏 + 顶部色块标题 |
| 层级、继承、上下级、包含、属于 | 层级图 | 树形或纵向堆叠矩形 |
| 连接、关系、集成、通信、调用 | 拓扑/关系图 | 中心节点 + 放射连线 |
| 时间轴、变化、增长、累积 | 时间轴图 | 横向时间线 + 节点标注 |
模式 B：文章分析
触发：用户提供文章路径或内容，要求找插图时机。
流程：
B1. 读取文章
用 Read 工具读取指定文件（或用户粘贴的内容）。
B2. 识别插图候选位置
逐段扫描，按以下信号识别「看图比看字快」的位置：
| 信号 | 插图类型 | 优先级 |
|---|---|---|
| 描述 3 步以上的操作流程 | 流程图 | 🔴 高 |
| 解释两个以上选项的差异 | 对比图 | 🔴 高 |
| 描述模块/组件之间的调用关系 | 拓扑图 | 🔴 高 |
| 解释层级/嵌套结构（文件目录、配置层级） | 层级图 | 🟡 中 |
| 超过 150 字解释一个机制/原理 | 流程图/示意图 | 🟡 中 |
| 列表超过 4 项且项目有顺序关系 | 流程图 | 🟡 中 |
| 已有代码块紧邻文字解释 | 可选，非必须 | 🟢 低 |
What ships with it
1 file 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.
- 11d ago First seen · 177 lines · 93 tokens per session scan A 3c0e76ddad4d
content-illustrator is a skill published in the GitHub repository chengkj99/kj-skills (14 stars, last pushed 10d ago), licensed MIT. It adds 93 tokens to every session and 1,894 once invoked, about $0.0005 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
html-ppt-zhangzara-retro-zine
A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Built as a decision-grade story deck for community, local readers.
html-ppt-zhangzara-studio
A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Built as a decision-grade design craft deck for prospective clients.
motion-frames
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video…
webgl-halftone-drift
A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
motion-graphics
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…