HTML reports
Distilled from The unreasonable effectiveness of HTML by Thariq Shihipar (Anthropic). The unslop skill still governs every sentence; this skill governs the container and structure.
Default to HTML
Any document for the user longer than roughly 100 lines, or carrying dense information (findings, metrics, comparisons, diffs), is a single self-contained HTML file, published as an artifact where the harness supports it. Markdown is for short notes and files whose destination requires it. HTML earns its tokens through tables, SVG diagrams, tabs, color-coding, and interactivity that markdown cannot express; the added expressiveness produces better overall output.
Structure by document type
- Implementation plan: mockups of the affected surfaces, a data-flow diagram, and the important code snippets inline. Not prose alone.
- Design or approach exploration: generate several distinctly different approaches (vary layout, tone, density) laid out in one grid for side-by-side comparison, rather than one attempt described in words.
- PR or code review: render the actual diff with inline margin annotations; color-code findings by severity.
- Research, audit, or explainer: a diagram of the system, annotated key snippets, and a gotchas section; summary before detail.
- Decision or triage interfaces: when the user must choose or rearrange (tickets, flags, options), build a purpose-built single-use editor — draggable cards, grouped toggles, side-by-side editors — instead of a list to read.
Export-first
Every interactive element ends in text the user can hand back to an agent: "copy as markdown", "copy as JSON", "copy as prompt", "copy diff" buttons. A UI whose state cannot leave the page is a dead end. (In sandboxed artifact viewers, downloads are blocked — use clipboard copy, never download links.)
Working rules
- One self-contained file: inline CSS and JS, no external dependencies beyond what the host permits.
- Visual organization is the point: tabs for parallel sections, tables for enumerable facts, whitespace and hierarchy for scanning. Density without organization reads as compressed notes.
- Keep generated report files as reference artifacts for later verification and iteration; republish to the same artifact URL when updating.
- Prose inside the report follows unslop in full: complete sentences, one idea per sentence, no em dashes, terms explained on first use. Chat-style compression never leaks into documents.
1---2name: html-reports3description: Write reports, plans, audits, explainers, and comparisons for the user as rich single-file HTML instead of markdown. Use whenever producing a report, implementation plan, audit result, research summary, PR walkthrough, or design exploration addressed to the user, however phrased ("write up what you found", "make a plan", "summarize the audit").4---56# HTML reports78Distilled from [The unreasonable effectiveness of HTML](https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html) by Thariq Shihipar (Anthropic). The unslop skill still governs every sentence; this skill governs the container and structure.910## Default to HTML1112Any document for the user longer than roughly 100 lines, or carrying dense information (findings, metrics, comparisons, diffs), is a single self-contained HTML file, published as an artifact where the harness supports it. Markdown is for short notes and files whose destination requires it. HTML earns its tokens through tables, SVG diagrams, tabs, color-coding, and interactivity that markdown cannot express; the added expressiveness produces better overall output.1314## Structure by document type1516- **Implementation plan**: mockups of the affected surfaces, a data-flow diagram, and the important code snippets inline. Not prose alone.17- **Design or approach exploration**: generate several distinctly different approaches (vary layout, tone, density) laid out in one grid for side-by-side comparison, rather than one attempt described in words.18- **PR or code review**: render the actual diff with inline margin annotations; color-code findings by severity.19- **Research, audit, or explainer**: a diagram of the system, annotated key snippets, and a gotchas section; summary before detail.20- **Decision or triage interfaces**: when the user must choose or rearrange (tickets, flags, options), build a purpose-built single-use editor — draggable cards, grouped toggles, side-by-side editors — instead of a list to read.2122## Export-first2324Every interactive element ends in text the user can hand back to an agent: "copy as markdown", "copy as JSON", "copy as prompt", "copy diff" buttons. A UI whose state cannot leave the page is a dead end. (In sandboxed artifact viewers, downloads are blocked — use clipboard copy, never download links.)2526## Working rules2728- One self-contained file: inline CSS and JS, no external dependencies beyond what the host permits.29- Visual organization is the point: tabs for parallel sections, tables for enumerable facts, whitespace and hierarchy for scanning. Density without organization reads as compressed notes.30- Keep generated report files as reference artifacts for later verification and iteration; republish to the same artifact URL when updating.31- Prose inside the report follows unslop in full: complete sentences, one idea per sentence, no em dashes, terms explained on first use. Chat-style compression never leaks into documents.
marve10s