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 agentmods add skills/jamesyang124/agent-skills/explain-diff-htmlnpx skills add jamesyang124/agent-skills --skill explain-diff-htmlgit clone --depth 1 https://github.com/jamesyang124/agent-skillsWhat 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 | $0.00032 | $0.00639 |
| Opus 5 | $0.00016 | $0.00319 |
| Sonnet 5 | $0.00006 | $0.00128 |
| Haiku 4.5 | $0.00003 | $0.00064 |
Grade A, and why
explain-diff-html 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 2d 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 explain-diff-html — 1 line 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.
What it actually says
Explain Diff
Please make me a rich, interactive explanation of the specified code change.
It should have these sections:
- Background: Explain the existing system relevant to this change. (You should broadly explore surrounding code for this.) We don't know how much the reader already knows, so include a deep background for beginners (note that it can be skipped if the reader is already familiar), and then a more narrow background directly relevant to the change.
- Intuition: Explain the core intuition for the code change. The focus here is to explain the essence, not the full details. Use concrete examples with toy data. Use figures and diagrams liberally.
- Code: Do a high-level walkthrough of the changes to the code. Group/order the changes in an understandable way.
- Quiz: Come up with five questions that test the reader's knowledge of this PR. This should be medium difficulty, difficult enough that you actually need to understand the substance of the PR to answer them, but not gotchas. The goal is to help the reader make sure that they've actually understood. These should be presented as interactive multiple-choice questions, and when the user clicks, it tells them whether they were correct and gives feedback.
Format:
- Output a single self-contained HTML file which includes CSS and JavaScript. Make the whole thing one long page with section headers and a table of contents. Don't use tabs for the top-level structure. Basic responsive styling so you can view it on a phone is nice too. Put the file in a global place on my computer outside of the code repo, and make sure the filename always starts with today's date in
YYYY-MM-DD-format, because it helps keep the files time-sorted and out of version control. For example: /tmp/2026-01-12-explanation-.html - Please write with the clarity and flow of Martin Kleppmann, making it engaging and written in classic style. Transitions between sections should be smooth.
- Some tips on diagrams. Ideally, you should pick a small number of diagram families that can be reused throughout the explanation to explain various cases. Some useful kinds of diagrams:
- A very simplified version of the UI that the user sees in the app, to explain UI changes.
- A system diagram showing data flow or communication between components. Make sure to include example data here!
- Don't use ASCII diagrams. Always use simple HTML designs for your diagrams, HTML lists for lists of things, etc.
- For code blocks, always use
<pre>tags. If you use a custom styled div instead, it must havewhite-space: pre-wrapin its CSS, or the browser will collapse all newlines into a single line. Before saving the file, scan each code block in the HTML source and confirm its CSS includeswhite-space: preorpre-wrap.
- For code blocks, always use
- Use callouts for key concepts or definitions, important edge cases, etc.
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.
- 2d ago First seen · 29 lines · 32 tokens per session scan A cc2ad930f1f8
explain-diff-html is a skill published in the GitHub repository jamesyang124/agent-skills (2 stars, last pushed 1mo ago), licensed MIT. It adds 32 tokens to every session and 639 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to explain-diff-html, differing in 1 line, and is treated as a copy.
Other skills, from other repositories
baoyu-comic
Knowledge comics (知识漫画): educational, biography, tutorial.
edu-math-tutorial
数学题分步讲解视频的领域知识。适用场景：(1) 用户给出一道数学题并要求做讲解/ 解题视频；(2) 用户说"讲解这道题"、"生成解题视频"、"make a math tutorial"； (3) 需要中文数学教学视频，涉及方程、公式或几何图形。本 skill 只提供领域 知识（题目拆解、讲解节奏、旁白文案规范、版式与 KaTeX 排版风格）；画面、 配音与成片一律用 Creator 原生 Element 与工具从源头构建。.
baoyu-comic
Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and batch-capable image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
songwriting-and-ai-music
Songwriting craft, AI music generation prompts (Suno focus), parody/adaptation techniques, phonetic tricks, and lessons learned. These are tools and ideas, not rules. Break any of them when the art calls for it.
muapi-storyboard-to-cooking-video
Turn a single photo of a person into a 15-second cinematic pasta-making (or other cuisine) tutorial video. First builds a composite reference sheet (character + kitchen + 9-step action board), then animates the full cooking sequence with audio in a single continuous shot.
ai-toolkit-trainer
Train custom LoRAs with ostris AI-Toolkit. Covers WAN 2.2/2.1 (people, styles, video motion) and Z-Image (Turbo & Base, low-VRAM image LoRAs). Use when the user wants to train a WAN or Z-Image LoRA; covers local + RunPod setup, dataset prep, key params, and using the result in a ComfyUI workflow.