A hobby project inspired by ThariqS/html-effectiveness — after reading that article I wanted an agent skill that actually does it.
Make your AI agent output self-contained HTML files instead of Markdown. Comparisons, code reviews, status reports, slide decks — HTML gives you higher information density and is easier to read.
Once installed, ask the agent to "make a comparison" or "write a report" and it generates an .html file that opens in any browser with zero external dependencies.
npx skills add https://github.com/OiAnthony/html-effectiveness --skill html-effectiveness| Template | Use case |
|---|---|
| exploration | Side-by-side comparison of multiple options |
| code-review | PR / code walkthrough with diffs and annotations |
| report | Metric dashboard + timeline + sectioned prose |
| deck | Full-screen slides, arrow-key navigation |
| editor | Drag-and-drop editing with clipboard export |
| research | Long-form research with collapsible sections |
| changelog | Version history with category filters |
Not limited to these. When the content doesn't fit a template, the agent builds the page from the design system directly.
Visual style from Kami "Parchment": warm cream background (#f5f4ed), ink-blue as the sole accent (#1B365D), Charter serif typeface, no bold or italic. Layout via Tailwind CSS v4 Play CDN, all styles inline, opens anywhere.
- html-effectiveness by Thariq Shihipar — the original article and 20 HTML demos showing HTML as an AI output format. (Live examples)
- Kami (紙) by Tw93 — a document typesetting skill, reference for design system and template structure.
- AntV Infographic by AntV — a declarative infographic engine, reference for chart generation patterns and visual language.
- Beautiful Mermaid by Lukilabs — a Mermaid diagram rendering skill, used for inline diagram support.