Visualize

Generate a single HTML file that visually explains a system, plan, code flow, or concept. The output opens in the browser — never fall back to ASCII art when this skill is loaded.

Default aesthetic: the "HTML effectiveness" editorial gallery style. Use an ivory page, serif display headings, clay accents, quiet card grids, simple SVG illustrations, and generous whitespace. The page should feel like something the user wants to read, not a dashboard skin.

The success test is not "does it look good" — it is: a reader with zero prior context can explain the core idea back after the first screen, and can find every deeper detail without being shown everything at once.

Why explainers fail (read this before generating)

By generation time you know the subject too well, so the default output is the expert's view — a dense diagram, every section at the same level, all of it visible at once. The Explainer Arc below forces the opposite order. Deviate only when the reader is better served — never because the subject "is technical."

The Explainer Arc (default structure for teaching pages)

When the artifact's job is to explain or teach — a system, plan, proposal, code flow, or concept — structure it as four layers, in order: