to-html

name

to-html

description

Render an explanation, analysis, plan, findings doc, or draft as a single self-contained HTML file (generous whitespace, sparse prose, diagram-first, one accent color) the user can open, screenshot, share, or copy from. Use when the user wants any standalone HTML document regardless of domain, e.g. says "explain this as html", "turn this into html", "visualize with html", or "make an html doc/report so I can review/discuss/copy". Content-agnostic; carries a fixed visual aesthetic.

/to-html - Render anything as a polished standalone HTML file

The user wants whatever you would have written as a chat reply turned into a single, self-contained, good-looking HTML file. They typically want to open it, screenshot it for a colleague, paste it somewhere, or read it as a document instead of scrolling a terminal.

This skill is about the output format and delivery, not the content. The content can be anything: an explanation of a concept, a bug and a fix plan, a findings-and-options decision doc, a draft to copy. Do not impose any domain-specific vocabulary on the content. The look is fixed; the substance is whatever the user asked about.

Workflow

1. Settle the content first

Know what you are explaining before you open an HTML tag. If the user pointed at a diagram, a diff, a bug, an idea, gather and understand it the same way you would for a normal reply. The HTML is a rendering of a clear answer, not a substitute for having one.

2. Build the file per FORMAT.md

Read FORMAT.md and follow it. The short version:

• One self-contained .html file. The only external resources are the Tailwind CDN and the Mermaid ESM import. No build step, no app code.
• Editorial, not corporate-dashboard. Generous whitespace, sparse prose, one accent color, red for problems, amber for warnings.
• Diagrams carry the weight. Mix Mermaid with hand-built boxes/SVG so it does not look generic. If a diagram needs a paragraph to be understood, redraw it.

3. Write it where the user can get at it

• Inside a git repo: write to tmp/<descriptive-name>.html in the repo root (create tmp/ if missing). Outside a repo: use the OS temp dir.
• Name it for the content (cross-matrix-explainer.html, ticket-4309-findings.html), not after this skill.
• Print the absolute path. Offer to open it with xdg-open (Linux) but do not open it unprompted.

4. Self-check, then stop

Before handing over, confirm: the file is self-contained (no external scripts or assets beyond the Tailwind CDN and the Mermaid import), every section carries a visual (diagram, comparison, or before/after), no prose paragraph stands alone without a visual or bullets beside it, and it links to its sources and any sibling or index docs that exist. Fix whatever fails.

This skill produces the artifact, it does not iterate to perfection on its own. If the user wants it polished further, that is a separate pass (e.g. /impeccable).