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.

Visuals are required. When this skill is loaded, the output must contain at least one primary visual artifact that carries real information, not just decorative styling around prose. Valid primary visuals include:

• an architecture, flow, sequence, state, ER, or dependency diagram
• a timeline, roadmap, or execution path visual
• a dashboard or KPI band with charts, bars, or status visual encoding
• a semantic HTML table for comparisons, audits, or inventories
• a walkthrough strip, stepper, or before/after comparison layout

If the page is a report, review, recap, audit, or plan analysis, include at least two visual forms:

• one structural visual: diagram, flow, architecture map, timeline, or dependency view
• one evidence visual: table, KPI dashboard, comparison panel, heatmap-style status grid, or other compact evidence display

Pure prose sections, even if well-designed, do not satisfy this requirement.

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.