visual-explainer 0.12.0 makes pages show their answer instead of describing it. The first screen is now a picture and one sentence, and every section is built around a figure. Diagrams are hand-drawn to match the page, so they can step through a process, show traffic moving, and react when readers hover a term or drag a slider. The skill itself is about 60% smaller, so agents read less and follow it more closely.
Highlights
- Answer first. Pages lead with a picture and one sentence, and figures carry each section instead of paragraphs.
- Diagrams that match the page. Hand-drawn diagrams can step through a process, show traffic flowing along edges, and light up when you hover a term. Mermaid is used only when you ask for it.
- Live figures. Readers drag a slider or flip a toggle and watch the diagram, numbers, and headline update.
- Four built-in looks. Instrument, Blueprint, Paper, and Editorial, with magazine-grade type and layout, readable contrast in light and dark, and a subtle touch of each page's topic.
- Lighter skill. About 60% smaller, so agents spend fewer tokens and stray less.
Need to know
| If you… | What changed |
|---|---|
| Want Mermaid diagrams | Ask for Mermaid by name, or hand the agent Mermaid source. It's no longer chosen automatically. |
| Pointed agents at the old reference files or templates | They're removed from the skill but stay available as optional links pinned to v0.11.0. |
Changelog
Highlights
- Pages now lead with the answer as a picture and one sentence, and every section is built around a figure instead of paragraphs.
- Diagrams are hand-drawn to match the page. They can step through a process, show traffic flowing along edges, and light up when you hover a term in the text. Mermaid is used only when you ask for it.
- Live figures let readers drag a slider or flip a toggle and watch the diagram, numbers, and headline update.
- Four built-in looks (Instrument, Blueprint, Paper, Editorial) with magazine-grade type and layout, readable contrast in light and dark, and a subtle touch of each page's topic.
- The skill is about 60% smaller, so agents read less and follow it more closely.
Added
- Live figures: one to three controls recompute the diagram, numbers, and headline from one model. A policy toggle can show how a bad rule produces an attractive wrong answer. Thanks to @zanzipanzi for #96.
- Step-by-step and animated explainers: a stepper and scene player that build a diagram one part at a time, plus guidance for a narrated video when you ask for one.
- Linked highlighting: hovering or focusing a term in the text lights up the matching parts of the figure and table rows.
- Small multiples, waffle charts, bars, and sparklines, so every number and every set of cases gets a picture.
- three.js figures for data where depth carries meaning, such as embeddings, spatial layouts, and geometry.
- The Pi
visual_explainertool now saves toVISUAL_EXPLAINER_OUTPUT_DIRwhen it is set, like the MCP server. The default stays~/.agent/diagrams/, and/fact-checklooks in the same place. Thanks to @eaxeax for #99. - The repository works as an Agent Plugins 1.0.0 plugin, so compatible clients can discover the skill without a client-specific install. Thanks to @gunzip for #100.
Changed
- The skill is rewritten to be figure-first and about 61% smaller. The first screen shows the answer, figures lead every section, and the writing is short and plain.
- Every diagram is hand-drawn SVG, including sequence and schema diagrams. The skill no longer chooses Mermaid on its own. When you ask for Mermaid, a short rule covers theming, labels, and sizing.
- A new style guide defines four looks (Instrument, Blueprint, Paper, Editorial), each with its own fonts and a light and dark palette where all text meets 4.5:1 contrast. Typography, layout, and chart rules draw on Bringhurst, Butterick, Müller-Brockmann, Tufte, Datawrapper, and the FT Visual Vocabulary.
- Pages pick up a subtle motif from their subject, such as an accent color, a texture, or a diagram convention.
- Figures look crafted rather than flat: raised nodes, shapes that show what a thing is (a cylinder for a database), a highlight on the key element, and gentle entrance motion. Reduced motion, print, and no-JS show the final state.
- Page structure is flexible: concept explainers, visual plans, reviews, comparisons, essays, and single-diagram pages each get a suggested shape.
- Theme palettes raise dim text wherever it was below 4.5:1 contrast.
Removed
- The old reference files (
css-patterns.md,libraries.md,responsive-nav.md,slide-patterns.md,mermaid.md) and the architecture, Mermaid, and data-table templates. One reference page replaces the templates. The old files stay available as optional links pinned to v0.11.0.
Fixed
- Page styles no longer shrink or restyle Mermaid diagram labels. Thanks to @vnakhate for #98.
- Slide resume no longer stops between slides and works on local
file://pages. The outline and help dialog has an accessible name again.
Security
- Pi renders are written to a temporary file and moved into place, like MCP renders, so a file swapped for a symlink cannot redirect the write. Re-rendering a file keeps its permissions.