testdouble/html-summary
> Convert a stakeholder summary markdown file into a single self-contained HTML executive report — bottom line and decision asks up front, supporting detail later — styled with a Test Double-derived palette and self-contained mermaid diagrams. Use when the user wants to turn a stakeholder summary, executive summary, or business summary into an HTML report, generate an HTML version of a summary doc, or produce a shareable HTML file from a summary markdown. Produces an HTML sibling file only; does not publish anything.
npx skills add https://github.com/testdouble/han --skill html-summaryConvert a stakeholder summary markdown file into a single self-contained HTML report tailored for executive readers — bottom line and decision asks up front, supporting detail later — styled with a Test Double-derived palette. The skill produces one HTML file next to the source markdown and stops there.
stakeholder-summary.md inside a planning folder. If the user does not name one, ask. Do not guess..html extension. Example: filters-and-saved-views/stakeholder-summary.md → filters-and-saved-views/stakeholder-summary.html. This is the only artifact the skill produces.<link rel="stylesheet">, no <script src=...> pointing at a CDN, no remote font loading, no remote images. Inlined JavaScript libraries (such as mermaid.js) are allowed and expected — they keep the file self-contained.<style> block in <head>. The file must render correctly offline.references/layout-principles.md.references/report-style.md. Do not invent new accent colors.<h1> is the summary subject (the feature name). The .subtitle beneath it is the literal string Han: Stakeholder Summary on every report. The header carries no logo or brand mark.references/writing-conventions.md. Verify before finishing.../../references/readability-rule.md to the prose content this skill writes or transfers, holding the named audience — the non-technical stakeholder. The report's visual layout stays governed by references/layout-principles.md and references/report-style.md.If the source path is not in the conversation, ask for it. Resolve to an absolute path and confirm it exists. The output HTML path is the source path with .md replaced by .html.
Read the entire markdown file. Identify which of these sections (or equivalents) are present, in any order:
Section titles in the source may not match these names exactly — map by content, not heading text.
Read all references before producing HTML:
Write the HTML file to the output path. Required structure, in order:
<h1> set to the summary subject (the feature name) with the most evocative noun phrase wrapped in <span class="highlight">; .subtitle set to the literal string Han: Stakeholder Summary. No brand mark.Confirm ...?. If the source has no asks section, omit this card entirely — do not invent decisions.walk list.today and after cards stacked one per row, each card spanning the page wrap's content width. Do not place data-flow cards side-by-side in a .grid-2 wrapper. Each card contains a <pre class="mermaid"> block with the source's mermaid syntax preserved (branching, decision diamonds, labeled edges). Normalize style directives to the report palette per references/report-style.md.out-of-scope list.Readability of the prose. The text in these sections follows the shared readability standard (../../references/readability-rule.md) — do not duplicate its text, apply it. Lead with the main point (bottom line up front, which the executive ordering already enforces), give each heading a descriptive name rather than a generic label, keep one idea per paragraph with the first sentence carrying it, number sequential steps and bullet non-sequential items, and reveal detail in layers. This governs the prose only; the visual layout stays governed by the layout conventions above.
The template includes a mermaid bundle placeholder near the end of <body>:
<script id="mermaid-bundle"><!-- MERMAID_BUNDLE_INLINE_HERE --></script>
<script>
mermaid.initialize({ ... });
</script>
Leave the placeholder string <!-- MERMAID_BUNDLE_INLINE_HERE --> exactly as written. The inliner script in Step 6 replaces it with the vendored mermaid.min.js bundle. The mermaid initialization block (with the report palette theme variables) is also part of the template — paste it verbatim.
Section omission rules:
Markup rules:
— not — for em-dashes in HTML body content (the template does this consistently).→ for arrows in flow diagrams.tldr, ask-block, ask, walk, flow, node, node.good, node.bad, node.start, out-of-scope, chip, chip.good, chip.bad.<h1> in <span class="highlight"> for the green background.Open the file you just wrote and confirm:
<style> block exists in <head> and contains the :root palette variables from references/report-style.md.<link>, <script src=...>, or external url(...) references in <head> or <body>.<h1> is the summary subject and the .subtitle reads Han: Stakeholder Summary.references/writing-conventions.md).Then run the standardized readability self-check from ../../references/readability-rule.md over the report's PROSE content only — never inside HTML tags, attributes, class names, mermaid/diagram bodies, or code. The visual layout stays governed by the existing layout conventions. This skill runs no rewrite pass, so this self-check is the fidelity guard on the prose; criterion 6 is not optional. Confirm each criterion and fix any failure before finalizing:
references/writing-conventions.md) is present.Fidelity wins: the standard governs how the content is said, never whether a required fact appears.
If any check fails, fix it before Step 6.
Make the file self-contained by inlining the vendored mermaid bundle in place of the placeholder:
${CLAUDE_SKILL_DIR}/scripts/inline-mermaid.sh <path-to-html-file>
The script is idempotent: it replaces the <!-- MERMAID_BUNDLE_INLINE_HERE --> placeholder with the contents of assets/mermaid.min.js. If the report has no diagrams (no placeholder), it leaves the file untouched and exits cleanly. If the script exits non-zero, surface the error to the user; do not retry blindly — read the error.
Tell the user:
If you had to derive the bottom line because the source had no explicit TL;DR, mention that so the user can review the framing.
Take testdouble/html-summary from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.