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 Azhi-ss/html-effectiveness --skill 05-diagramgit clone --depth 1 https://github.com/Azhi-ss/html-effectivenessWrote 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/azhi-ss/html-effectiveness/05-diagram)<a href="https://agentmods.dev/skills/azhi-ss/html-effectiveness/05-diagram"><img src="https://agentmods.dev/badge/skills/azhi-ss/html-effectiveness/05-diagram/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/azhi-ss/html-effectiveness/05-diagram"><img src="https://agentmods.dev/badge/skills/azhi-ss/html-effectiveness/05-diagram.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.00095 | $0.02069 |
| Opus 5 | $0.00048 | $0.01035 |
| Sonnet 5 | $0.00019 | $0.00414 |
| Haiku 4.5 | $0.00010 | $0.00207 |
Grade A, and why
html-effectiveness-diagram 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 9d 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 — 158 lines — stays where its author put it; the contents beside it link to each section on GitHub.
05-diagram — 插画与图表
"Inline SVG gives the agent a real pen. Ask for the figures for a post or a flowchart of a process and get vector art you can tweak by hand or paste straight into the final document."
何时用
| 用户说 | 用哪个范式 | 模板 |
|---|---|---|
| "画一下我们的 deploy pipeline" | 流程图 | ../../templates/flowchart.html |
| "状态机长什么样" | 同上 | 同上 |
| "request flow / data flow 怎么走" | 同上（或参考 01-explore 的 plan 数据流） |
— |
| "给这篇博客配几张图" | SVG 插图集 | 自建（见下） |
不要用 mermaid / d3 / excalidraw。直接写 inline SVG——更可控、零依赖、可手改。
范式 5.1 · SVG 插图集
空间形状：一个文档要的所有图都画在一页。每个 <svg> 单独一块——读者右键-检查-复制 outerHTML 就能拿到一张图。
HTML 骨架：
<article class="figure">
<h3>Figure 1 · Token bucket</h3>
<svg viewBox="0 0 240 160" width="240" height="160">
<!-- 用基本图元：rect, circle, path, text -->
<rect x="60" y="40" width="120" height="80" rx="8"
fill="var(--ivory)" stroke="var(--slate)" stroke-width="2"/>
<!-- tokens as small circles -->
<circle cx="80" cy="100" r="6" fill="var(--clay)"/>
<circle cx="100" cy="100" r="6" fill="var(--clay)"/>
<circle cx="120" cy="100" r="6" fill="var(--clay)"/>
<!-- inflow -->
<path d="M 120 10 L 120 38" stroke="var(--success)" fill="none"
stroke-width="2" marker-end="url(#arr-down)"/>
<text x="130" y="25" font-size="11">refill rate/sec</text>
</svg>
<p class="caption">A bucket holds at most <code>burst</code> tokens; refills at <code>rate</code>/sec.</p>
</article>
<article class="figure">
<h3>Figure 2 · LRU cache eviction</h3>
<svg viewBox="0 0 320 100">...</svg>
<p class="caption">...</p>
</article>
SVG 坐标手算法（不要让 LLM 蒙数字）：
- viewBox 用整除值：
0 0 240 160、0 0 800 400 - 节点对齐 20px 网格
- 文本居中：
text-anchor="middle" dominant-baseline="middle" - 配色用
var(--clay)等 baseline 变量（如果 SVG 不在 base.css 同页则改成 hex）
无独立模板（按图不同而异）。
范式 5.2 · 流程图
空间形状：节点（盒子）+ 边（箭头）+ 状态颜色（pass/fail）+ 节点可点击展开"这步运行什么"。
典型场景：deploy pipeline、状态机、决策树。
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.
- 9d ago First seen · 158 lines · 95 tokens per session scan A f44f5452355b
html-effectiveness-diagram is a skill published in the GitHub repository Azhi-ss/html-effectiveness (5 stars, last pushed 3mo ago), licensed MIT. It adds 95 tokens to every session and 2,069 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-31.
Other skills, from other repositories
cinematic-scroll
Build or improve cinematic websites with scroll-driven storytelling, pinned reveals, parallax, kinetic type, and optional 3D. Deliver standalone HTML or integrate into an existing app, with mobile and reduced-motion fallbacks and browser evidence. Also supports scroll audits and motion storyboards. Use for cinematic…
guizang-social-card-skill
Generate Guizang-style social card image sets, Live Photo motion cards, material-first Live Photo puzzle layouts, triple Live Photo collages, long-video-to-Live-Photo treatments, and WeChat official account cover pairs from articles, scripts, screenshots, product notes, subtitles, photos, or user-supplied videos. Use…
cinematic-scroll
Build or improve cinematic websites with scroll-driven storytelling, pinned reveals, parallax, kinetic type, and optional 3D. Deliver standalone HTML or integrate into an existing app, with mobile and reduced-motion fallbacks and browser evidence. Also supports scroll audits and motion storyboards. Use for cinematic…
anthropic-algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright…
remotion-best-practices
Video creation in React using Remotion. Covers animations, compositions, audio sync, text effects, 3D integration with Three.js, and rendering. Use when building dynamic video generators, editing timelines, or optimizing Remotion renders.
p5js
Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project.