danielmiessler HTML
Turns whatever the session just produced into one self-contained, designed HTML file and publishes it as an Artifact. Deterministic split: the model's only job is distilling the session output into a typed content JSON and picking a design register; Tools/Render.ts owns every layout, typography, and color decision.
Voice Notification
When executing a workflow, do BOTH:
Send voice notification:
curl -s -X POST http://localhost:31337/notify \ -H "Content-Type: application/json" \ -d '{"message": "Running the Render workflow in the HTML skill to build a designed HTML artifact"}' \ > /dev/null 2>&1 &Output text notification:
Running **Render** in **HTML**...
Workflow Routing
| Workflow | Trigger | File |
|---|---|---|
| Render | /HTML, "HTML artifact", "render this as HTML" |
Workflows/Render.md |
Quick Reference
- Renderer:
bun ~/.claude/skills/HTML/Tools/Render.ts --json content.json --register dossier --out artifact.html --schemaprints the content JSON shape with an example;--registerslists registers.- Registers:
dossier(dark ink-green / orange, condensed display + typewriter — evidence files, red teams, investigations) andledger(dark navy / gold, old-style serif — reports, finance, plans, comparisons). Alternate between them so consecutive outputs don't converge; add new registers to Render.ts rather than hand-styling one-offs. - Output is Artifact-CSP safe: inline CSS, fonts embedded as data URIs from local font files, zero external requests.
Gotchas
- DOM-render screenshot pipelines drop CSS pseudo-element generated content (counters,
::beforelabels render in the browser but vanish from DOM-render captures, and they're invisible to text extraction). Render.ts therefore emits all numbering and labels as real DOM text. Never add CSS counters to a register. (Discovered 2026-07-11.) - Artifacts block all external requests — a Google Fonts
<link>fails silently and you get the fallback stack. Embed via data-URI@font-face(Render.ts does this when the register's font file exists locally) or design on system stacks. - The artifact viewer wraps your file in its own document skeleton — emit
<title>+<style>+ body content only; no<!doctype>/<html>/<head>/<body>tags. - A published artifact is private to its owner's claude.ai account — verifying it in a browser signed into a different account/org 404s. Verify the render by serving the HTML file locally and capturing that; verify publication via the Artifact tool's
listaction. - Numbered section markers must mean something. Render.ts numbers sections (document order — legitimate). Don't number list items unless the content is a true sequence; use
listblocks with bold lead-ins instead.
Examples
Example 1: After a research or red-team session
User: "/HTML"
→ Render workflow: distill the session's findings into content JSON
→ bun Tools/Render.ts --json content.json --register dossier --out artifact.html
→ Publish via Artifact tool (load artifact-design skill first), pixel-verify, hand over URL
Example 2: Different subject, different register
User: "render the quarterly cost analysis as HTML"
→ Same flow with --register ledger (tables, callouts)
→ Alternates the look from the last artifact so outputs don't converge