nicobailon/visual-explainer v0.12.0

on GitHub

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

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_explainer tool now saves to VISUAL_EXPLAINER_OUTPUT_DIR when it is set, like the MCP server. The default stays ~/.agent/diagrams/, and /fact-check looks 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.