# HTML Output
> Renders complex information as a single self-contained HTML file — dashboards, analytical reports, comparison tables, timelines, flow/sequence diagrams, and data explainers — using Antony Evans's brand tokens (forest green / off-white / amber, Space Grotesk + Inter). Triggers on "build/render/make this as HTML", "create a dashboard", "show me a visual report", "turn this into a one-pager", "render with diagrams", or when another skill says "use html-output for the deliverable". Also activates when the artifact has 3+ dimensions of data, needs diagrams or interactive export buttons, or would be clearly more legible in a browser than in markdown. Does NOT trigger for short chat replies, markdown notes for the Obsidian vault, code files, slide decks (use pptx), spreadsheets (use xlsx), PDFs (use pdf), logos or images (use generate-image), or plain text answers. Output is one styled .html file with optional Mermaid or Chart.js via CDN when justified.
- Skill: `agent-engineer-master/html-output` (Agent Skill, multi-file: 19 files)
- Install (CLI): `npx skillmds@latest add agent-engineer-master/html-output`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agent-engineer-master/html-output/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Agent-Engineer-Master (https://skillmd.com/u/agent-engineer-master)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agent-engineer-master/html-output
---
# HTML Output
Produce a single self-contained `.html` file as the deliverable when complex information would be clearer in a browser than in markdown. Designed to be invoked directly by a human (`/html-output`) or as a styling/format layer by another skill that needs to ship an HTML artifact.
## When to use HTML over markdown
Use HTML when ANY of the following is true:
- The information has ≥3 dimensions that benefit from spatial layout (dashboards, comparison matrices, decision tables).
- The deliverable includes a diagram (flowchart, sequence, tree, timeline, architecture map).
- The reader will want to **copy, export, print, or filter** sections.
- The output is a one-off shareable artifact (report, brief, explainer) — not a doc that lives in the vault.
- Another skill explicitly hands off to this one.
Otherwise, stay in markdown.
## Process
### 1. Classify the request into an archetype
Pick exactly one starting template from `assets/templates/`:
| Archetype | Template | When |
|-----------|----------|------|
| Dashboard | `dashboard.html` | KPIs + multi-panel status (3+ metric tiles) |
| Report | `report.html` | Long-form analysis with sections, pull quotes, charts |
| Comparison | `comparison-table.html` | Side-by-side options, scoring matrices, vendor evaluation |
| Mermaid diagram | `diagram-mermaid.html` | Flowcharts, sequence diagrams, state machines, mind maps |
| SVG diagram | `diagram-svg.html` | Custom diagrams Mermaid cannot express, hand-crafted layouts |
| Timeline | `timeline.html` | Chronological events, roadmaps, project history |
| Data explainer | `data-explainer.html` | One chart + narrative — Chart.js-driven story |
| Consulting deck | `slide-deck.html` | McKinsey/BCG-style 16:9 slides with action titles, exhibit chrome, 2×2 / waterfall / MECE layouts |
If the request blends two archetypes (e.g. dashboard + diagram), pick the dominant one and embed the secondary as a section.
**For consulting decks specifically:** also read `references/consulting-patterns.md` — action titles, MECE structure, chart archetypes (2×2, waterfall, Marimekko), exhibit-numbering rules.
### 2. Load the brand tokens and decide the mode
- **Always read** `references/brand-tokens.md` and inline its `