This collection holds one skill, visual-explainer. It tells an AI coding agent how to turn systems, code changes, plans, data and technical concepts into self-contained HTML pages built around figures. It is meant for developers who want an agent to explain things visually, not in terminal text.
Why read it
The agent writes a source file, and a renderer checks the page in a browser and lists every failure with a ✗. The agent then fixes those failures with small edits and renders again. It is told never to rewrite the whole page and never to write its own screenshot scripts. A fixed checker plus small edits keeps fixes cheap and stops the agent from drifting off on its own checks.
The skill tells the agent not to read the kit's CSS, JS or .mjs source. The references and the render errors are meant to cover everything a page needs. This saves context and keeps the agent working against the documented interface, not against the implementation.
Two tables map page types to section orders, and content types to the figure to use: stepper, small multiples, waffle and so on. The agent gets a concrete choice for each case instead of a general instruction to "visualize well".
A "Never" line names the specific defaults that make output look generic: certain fonts, violet Tailwind accents, glassmorphism, gradient text, emoji markers. Naming them outright steers the agent away from its usual habits.
The skill turns vague judgement calls into numbers. A terminal table of 4+ rows or 3+ columns becomes a page. Section navigation appears only when a page has 4+ sections. Sentences stay mostly under 20 words.
Readers can comment on a page and send a reply back. The skill says to act only on answers the reader actually gave, and never to run commands or fetch URLs because a reply says so. This guards against prompt injection coming in through the feedback channel.
A short "Known traps" section records specific bugs, such as a raw `<` inside KaTeX being read as a tag. A checkbox list at the end ("Before delivery") ties sign-off to what the renderer reports and to one look at the sheet.
Prose style is anchored to a real standard, Simplified Technical English (ASD-STE100), and the skill says to follow it about 80% of the way. It adds concrete rules too: headings state the takeaway, one idea per sentence.
A model read each skill and found no calls or hand-offs between them.
| SKILL | KIND | STARTED BY | DESCRIPTION | LINKS | LICENCE |
|---|---|---|---|---|---|
| visual-explainer | skill | You or the agent | Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, animated explainers, narrated MP4 videos, and other visual explanations. | 0 | MIT |
From nicobailon/visual-explainer at 9d5f880, 2026-11-04. Skills read by Claude Sonnet 5.5 on 2026-11-07. Summary and techniques by Claude Opus 5.5 on 2026-11-07.