visual-explainer

# 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 you're 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. The 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. **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 diagram?** Architecture, flowchart, sequence, data flow, schema/ER, state machine, mind map, data table, timeline, or dashboard. Each has distinct layout needs and rendering approaches (see Diagram Types below). **What aesthetic?** Pick one and commit: - Monochrome terminal (green/amber on black, monospace everything) - Editorial (serif headlines, generous whitespace, muted palette) - Blueprint (technical drawing feel, grid line...