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

Two phases with a design brief artifact between them. Phase 1 makes all methodology and architecture decisions. Phase 2 renders the HTML. The phases can run in the same session or be delegated separately (e.g., Phase 1 to a subagent that focuses on design, Phase 2 to a renderer).

Phase 1: Design

Phase 1 produces a design brief — a markdown file that captures every methodology decision before any HTML is written. This separation prevents the pull of rendering from short-circuiting design thinking.

Write the design brief to ~/.agent/diagrams/{name}/1-design-brief.md.

1. Interrogate

Before anything visual, answer three questions. These constrain every decision downstream.