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/analyticalmonk/explain-this/creating-explainersnpx skills add analyticalmonk/explain-this --skill creating-explainersgit clone --depth 1 https://github.com/analyticalmonk/explain-thisWhat 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.00098 | $0.02480 |
| Opus 5 | $0.00049 | $0.01240 |
| Sonnet 5 | $0.00020 | $0.00496 |
| Haiku 4.5 | $0.00010 | $0.00248 |
Grade A, and why
creating-explainers 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.
How it starts
The opening of the file, as written. The whole thing — 170 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Creating Explainers
Overview
This skill produces a single self-contained interactive explainer in the style of distill.pub - serif typography, a sticky two-column layout, and hand-built Canvas figures the reader can interact with. The output is one index.html file that opens directly in a browser; no parent project, no build step, no shared infrastructure required.
Core constraints (non-negotiable):
- Zero dependencies. No npm, no bundler, no React, no D3, no Three.js, no Tailwind. Vanilla HTML + inline CSS + vanilla JS only.
- One file per article. All CSS in a single
<style>block in<head>; all JS at the bottom of<body>. The only external network requests are Google Fonts. - Hand-coded Canvas figures, not SVG libraries or images. 3D uses custom projection + z-sorting + lighting (see
references/figure-archetypes.md). - The voice matters as much as the visuals. Conversational, second-person, analogy-rich. Read
references/voice-and-style.mdbefore drafting prose.
If you find yourself reaching for a framework or asking "should I just use React for this", stop. The constraint is the point.
When to Use
Use whenever the user asks to:
- Turn a paper, blog post, transcript, or research report into a walkthrough
- Build a distill-style or interactive explainer on any topic
- "Explain X" with figures the reader can interact with
Don't use for:
- Static blog posts with no interactivity (just write HTML)
- Slide decks or presentations
- Documentation sites or landing pages
- Anything that needs a build step or framework
- Explaining a codebase or source files - use
explaining-codebases
Intake: Gather Your Source Material
Intake is one phase: gather what the article is built from. The material can be given files, web research, or both. Pick the references that apply and read them when you reach this phase, not upfront.
| You have | Read | Source of truth |
|---|---|---|
| Files (paper, URL, paste, transcript, report) | references/intake-from-files.md |
The provided document(s) |
| Only a topic | references/intake-from-research.md |
Web research, then synthesis |
| Files and a topic that needs more | both | Files as spine, research as supporting |
What ships with it
8 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.
- 2d ago First seen · 170 lines · 98 tokens per session scan A f7610f31359d
creating-explainers is a skill published in the GitHub repository analyticalmonk/explain-this (19 stars, last pushed 1mo ago), licensed MIT. It adds 98 tokens to every session and 2,480 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
ego-browser
Skill "ego-browser" from citrolabs/ego-lite, covering ego-browser, quick start, common helpers, task spaces and control handoff.
playwright-trace-analyzer
Analyzes Playwright E2E trace.zip archives (and bare trace JSONL when unpacked). Extracts the action timeline, network waterfall, console errors, and DOM-snapshot anchors, then identifies the highest-impact problems (flaky waits, slow selectors, network bottlenecks, hung actions, unhandled console errors, navigation…
screen-recorder
Records short videos of specific page sections using Playwright's recordVideo API, plays scripted interactions (hover, click, focus, scroll, keypress), crops the output to a target element via ffmpeg, and saves a .webm (or .mp4 / .gif) artifact to .agent/recordings/. Use when a still screenshot cannot prove the change…
e2e-testing
Plans, generates, runs, and heals end-to-end tests using Playwright Test Agents (Planner, Generator, Healer) and the official @playwright/mcp server. Drives a spec-first feature-flow loop, proposes data-testid source diffs only when accessibility-tree locators fail, and stays token-aware via snapshot mode and…
animations
Authors performant web animations CSS-first AND brainstorms the right feedback for an interaction via a verb-to-motion catalog. Covers GPU-safe properties, modern primitives (@starting-style, interpolate-size), View Transitions, scroll-driven timelines, state-choreography morphs, React state (Motion, AnimatePresence)…
best-practices
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".