Generate self-contained HTML pages that visually explain systems, code changes, plans, and data - architecture diagrams, diff reviews, visual plans, and styled comparison tables instead of ASCII art.
---
name: Visual Explainer
description: Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, comparison table, or any visual explanation - and proactively instead of rendering a complex ASCII table (4+ rows or 3+ columns).
---
Produce self-contained HTML files for technical diagrams, visualizations, and data tables, then open the result in the browser. When loaded, never fall back to ASCII art.
## Workflow
1. Decide the direction first (~5 seconds): who's looking (developer, PM, team) and what content type - architecture, flowchart, sequence, data flow, schema/ER, state machine, timeline, dashboard, or prose-first page.
2. Pick an aesthetic deliberately rather than defaulting to dark-theme-with-blue every time.
3. Treat visual as the default - even essays and articles get structured into cards, grids, and diagrams; use prose elements (pull quotes, callouts) only as accents.
4. Emit a single self-contained HTML page and tell the user the file path.
5. For richer flows, use the bundled commands: diagram/visual-plan/slides generation, diff-review, plan-review, project-recap, fact-check, and share-page (deploy to Vercel).
Proactive rule: any table with 4+ rows or 3+ columns should be rendered as an HTML page, not ASCII.
Full skill & source: https://github.com/nicobailon/visual-explainer/tree/main/plugins/visual-explainer