ariasr47/html-explainer-skill

**Pages you can decide from.**
A Claude Code plugin that turns what your agent did into one page you can read in minutes:
the answer first, a picture in every chapter, one question when you must decide, and checked before it reaches you.
**See live examples** · Install · What it makes · Roadmap · Changelog
Why
Agents write more than anyone can read: long summaries, plans, diffs and status reports. When you have to approve something or choose between options, a wall of text costs attention you may not have, especially with ADHD or a short working memory.
Every page this plugin makes has the same shape:
1. **The answer**, in one sentence, right under the title.
2. **At most three facts** to keep in your head.
3. **At a glance**: the page's own picture on the first screen, such as a status board, the steps of a procedure or the options side by side.
4. **One idea per chapter**, each with a picture, each closing with one line to remember.
5. **A recap**, and **one question** only when a decision is needed, with the recommended choice marked and what happens if you do nothing.
What makes it different
- **Checked before you see it.** A checker script runs on every page and the agent fixes each failure first: answer length, at most three keep facts, a picture per chapter, text contrast of 4.5 to 1 in light and dark, status colours that always carry a glyph, diagram labels readable on a phone, and the rules of each page type. In Claude Code a hook runs it at the end of every turn that wrote a page, so it cannot be skipped.
- **The reader is in control.** One Reading tools button holds skim mode, one chapter at a time, a reading ruler, text size, dark or light and keyboard shortcuts. Each chapter can be read aloud, and a link resumes where you left off. Nothing moves unless you ask.
- **Answer by tapping.** A decision page can end in tap-to-answer fields, and a ballot puts one decision per card, pictured or in words, with a Pick all ★ button and warning chips such as "Can't undo". You copy every answer back to the agent in one paste, and a gather page collects answers from several readers, which a merge tool combines.
- **One file, offline, private.** Each page is a single HTML file. No server, no account, no tracking. It works on a phone and prints cleanly.
See it
| Page | What it shows |
|---|---|
| A plan for one risky change | A playbook: moving a team wiki, with phases, who notices what, the undo plan and the risks |
| A field guide to look things up in | A field guide: web product work for a small notes app, with a map by stage, the four fields that come first and 30 entries to search |
| Four decisions on one phone screen | A ballot: tap a pictured option per card, then copy the picks back to the agent |
| Every component | The gallery: each building block with real content, in both themes |
| The roadmap | This project's roadmap as a roadmap page |
| The site's home page | A public page: what the plugin promises, with the evidence behind each promise |
All six were made with the plugin and pass its checker.
Install
In Claude Code:
Restart Claude Code, then ask: *"Make an html explainer for this spec."*
Node 18 or newer runs the checker; nothing else installs. **The install guide** covers installing from a shell, setting it up for a whole team, updating, other agents such as Codex, Cursor, Gemini CLI and Copilot, and what to do when a skill does not start.
Use
Ask in plain words. The agent picks the page type, writes the page from the template, runs the checker, saves it under docs/explainers/ and gives you the link.
| When you need to | Ask it like this | Page types |
|---|---|---|