Visual Explainer

Generate self-contained HTML pages that explain systems, code changes, plans, data, and technical concepts visually. Use this skill for diagram requests, architecture overviews, diff/plan reviews, project recaps, comparison tables, slide decks, and any visual explanation.

Trigger and delivery rules

• Prefer an HTML page over terminal ASCII when the output is inherently visual.
• If a table would have 4+ rows or 3+ columns, render it as HTML and give only a short chat summary.
• Write files to ~/.agent/diagrams/ or the explicit eval output path. Use descriptive filenames.
• Open generated pages in the browser when running normally. In Pi package installs, use visual_explainer with prepare for planning/context and render only after the complete HTML document exists.
• The final page must be a complete self-contained HTML document, including embedded CSS and any needed JS.

Reference routing

Read only the references needed for the current output: