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/jircik/visual-explainer/visual-explainer-diffnpx skills add jircik/Visual-Explainer --skill visual-explainer-diffgit clone --depth 1 https://github.com/jircik/Visual-ExplainerWhat 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.00087 | $0.01827 |
| Opus 5 | $0.00044 | $0.00914 |
| Sonnet 5 | $0.00017 | $0.00365 |
| Haiku 4.5 | $0.00009 | $0.00183 |
Grade A, and why
visual-explainer-diff 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 yesterday.
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.
Visual Explainer — Diff
Generate an interactive HTML dashboard that visually explains what changed between two git refs — added, modified, and deleted files with annotated purpose, which architecture layers were touched, and how primary data flows shifted.
Companion skill to visual-explainer. That skill explains a codebase at rest; this one explains a codebase in motion.
When to Use
- User asks to visualize, explain, or document a diff, PR, or commit range
- User wants a change report for review or release notes
- User needs to understand the architectural impact of a branch before merging
- User wants to onboard a reviewer to a large PR
When NOT to Use
- Single-line or single-file diffs (just show the diff inline)
- Commits with no meaningful code change (formatting, lockfile bumps)
- The user wants a textual changelog or PR description (use a different tool)
Input
Two git refs. Resolution order:
- Explicit args from the user (
main..feature/x,HEAD~5 HEAD,<sha1> <sha2>) - If on a feature branch:
<default-branch>..HEAD(detect default viagit symbolic-ref refs/remotes/origin/HEAD) - Fallback:
HEAD~1..HEAD
Confirm the chosen range with the user before running if it was inferred.
Output
A self-contained ./visual-explainer/diff.html file in the project root. Same CDN-only stack as visual-explainer (Mermaid.js, Tailwind CSS, Inter font). Does not overwrite an existing index.html.
Process
Phase 1: Collect
- Resolve the range.
git merge-base <base> <head>→ use the merge-base asBASE, the tip asHEAD. - List changed files.
git diff --name-status BASE..HEAD→ bucket into Added / Modified / Deleted / Renamed. - Get stats.
git diff --numstat BASE..HEADfor per-file insertions/deletions. - Get commit list.
git log --oneline BASE..HEADfor the commit narrative. - Skip noise. Lockfiles, generated code, snapshot files,
dist/,build/, vendored deps. Same skip list asvisual-explainer.
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.
- yesterday First seen · 158 lines · 87 tokens per session scan A 3516fa23824b
visual-explainer-diff is a skill published in the GitHub repository jircik/Visual-Explainer (3 stars, last pushed 3mo ago), licensed MIT. It adds 87 tokens to every session and 1,827 once invoked, about $0.0004 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
slidecraft
Convert PowerPoint (PPTX) files to HTML and back, analyze PPTX structure, generate slide decks from topics via LLM, pre-cache CDN assets, or launch the interactive review web UI. Use this when the user wants to work with PowerPoint presentations -- convert ppt to html, html to pptx, inspect pptx contents, or generate…
slidecraft-to-html
Convert PowerPoint PPTX files to HTML for web display, RAG ingestion, or AI processing. Use when the user says convert this ppt to html, turn this presentation into a web page, extract content from PowerPoint for an AI pipeline, or wants to view slides in a browser.
slidecraft-review
Launch an interactive web UI for reviewing, editing, and approving AI-generated slide presentations with human-in-the-loop feedback. Use when the user says review the slides, check the generated presentation, see slides before finalizing, or wants a visual review interface for slide generation.
prototype
Build production-feel HTML prototypes for sales demos and reviews. Runs a discovery Q&A, scaffolds a zero-dep static site (HTML + Tailwind CDN + theme/layout switchers + URL-state + feedback overlay + control bar) and runs a design-quality loop. Use when the user says "prototype", "mockup", "demo", "pitch page"…
html-design
Create, redesign, repair, validate, preview, and package lightweight standalone web apps as portable HTML. Use for single-file browser tools, calculators, converters, dashboards, guided workflows, knowledge interfaces, touch-friendly mini-games, full-screen HTML presentations, reusable presentation brand packs, and…
html-express
把信息密集的内容做成结构化、可读的自包含 HTML——调研报告、对比矩阵、清单、数据看板、决策页。当 Agent 要输出大段信息、对比、指标、时间线，或用户说「做成网页/可视化报告/HTML 报告」时触发。产物是单个可双击打开的 .html 文件。郑重 PDF/简历/PPT/落地页交付请用 kami；视频/动画用 hyperframes；上线部署不在本 skill 范围。.