visualize

Visualize

Turn any idea, data, or content into a stunning single-file HTML visualization.

This SKILL.md is the operational layer. Detailed patterns live in references/ and are loaded on demand — see the Reference map at the bottom. Never inline that detail here.

When this triggers

• User says "visualize," "make a deck/slide/dashboard/infographic/poster/carousel," or any visualization-type keyword.
• User pastes data (CSV, JSON, table, numbers) and wants it shown visually.
• User shares a URL and asks for a visual summary.
• User wants a single self-contained .html artifact (no server, no build step).

When this does not trigger

• Figma / mockup / design-system work → figma-generate-design, figma-use.
• Tally form / questionnaire → tally.
• Canva file → canva-* tools.
• Real multi-page website, React/Vue/Next app → not a skill match; build with framework.
• Screenshotting or scraping an existing webpage → agent-browser.
• Editing an existing HTML file the user already has → use plain Edit.

Required inputs

• The content to visualize (conversation context, pasted data, URL, or explicit description).
• If the visualization renders options for something that already exists (a screen, component, loader, nav, card, color scheme, layout in the user's product) — the actual current implementation. Go read it before writing any HTML. See Ground in the current implementation.
• Optional: visualization type (deck, dashboard, infographic, etc.) — infer if not given.
• Optional: output path (defaults to ~/Downloads/<kebab-case-name>.html).

Workflow

1. Pick type. Match the request to a row in the Visualization Types table below. If ambiguous, pick the closest fit and proceed. Detailed per-type patterns: references/types.md.
2. Ground in the current implementation — before writing a single line of HTML. If the thing being visualized already exists anywhere (a screen, component, loader, nav, card, palette, layout in the user's product), go find and read the real code, and render the options in that design — not an invented one. Mandatory, no exceptions: see Ground in the current implementation.
3. Gather content. Use the conversation context, pasted data, or WebFetch for URLs (see Source content). Never use placeholder/Lorem ipsum.
4. Copy skeleton. Start from references/skeleton.md — never write HTML from scratch. It carries the theme system, exact CSS-property names, menu, animations, print styles, and accessibility hooks the evaluator checks.
5. Add content to the <!-- YOUR CONTENT HERE --> block. Follow the type-specific rules in references/types.md.
6. Wire libraries as needed — references/libraries.md for CDN URLs + the Chart.js / Reveal.js / Leaflet patterns, references/menu.md for the required hamburger menu, references/animations.md for entrance/scroll animation, references/design-system.md for typography/color/spacing/sizing, references/css-techniques.md for advanced CSS.
7. Run the Evaluation checklist below before saving.
8. Write the file with Write to ~/Downloads/<name>.html (kebab-case).
9. Serve it over localhost, then open it. See Serving and verifying — file:// silently breaks the clipboard export and cannot be inspected with Playwright. Serve the containing directory, open the http://127.0.0.1:<port>/<name>.html URL, and return that URL in the response.
10. Verify in the browser before claiming it works. Load the localhost URL with Playwright, check console errors, confirm no horizontal overflow at 375px, and smoke-test the main interaction. Never report a visualization as done on the strength of the HTML source alone.