| name | visual-explainer |
| description | Generate self-contained HTML for technical diagrams, visualizations, data tables. Always open in browser. No ASCII art fallback. |
Visual Explainer
Generate self-contained HTML files for technical diagrams, visualizations, and data tables. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.
Proactive Table Rendering
When about to present tabular data as an ASCII box-drawing table in the terminal (comparisons, audits, feature matrices, status reports, any structured rows/columns), generate an HTML page instead.
Threshold: if the table has 4+ rows or 3+ columns, it belongs in the browser.
Don't wait for the user to ask — render it as HTML automatically and tell them the file path. You can still include a brief text summary in the chat, but the table itself should be the HTML page.
Workflow
1. Think (5 seconds, not 5 minutes)
Before writing HTML, commit to a direction. Don't default to "dark theme with blue accents" every time. Visual is always default. Even essays, blog posts, and articles get visual treatment — extract structure into cards, diagrams, grids, tables. Prose patterns (lead paragraphs, pull quotes, callout boxes) are accent elements within visual pages, not a separate mode.
Who is looking? A developer understanding a system? A PM seeing the big picture? A team reviewing a proposal? This shapes information density and visual complexity.
What type of content? Architecture, flowchart, sequence, data flow, schema/ER, state machine, mind map, class diagram, C4 architecture, data table, timeline, dashboard, or prose-first page. Each has distinct layout needs and rendering approaches (see Diagram Types section and references).
2. Select diagram type
See the Diagram Types section below for the full type matrix.
3. Style with intention
Reference font pairings from references/libraries.md. Pick a non-default palette. Don't reach for the same teal-and-slate every time — the references include multiple palettes and the anti-patterns section lists what to avoid.
