HTML Artifact Renderer
FreeTransform session outputs into polished HTML documents.
Free · Opens the source repo
What HTML Artifact Renderer does
The HTML Artifact Renderer skill allows users to convert the outputs of their current session into a well-designed, self-contained HTML file. This process is deterministic, meaning that the model's role is limited to distilling the session's content into a structured JSON format, while all layout and design decisions are handled by the Tools/Render.ts script. This separation of concerns ensures that users receive a consistent and visually appealing output every time.
This skill is particularly useful for professionals engaged in research, analysis, or reporting who need to present their findings in a polished format. By simply invoking the /HTML command, users can initiate the rendering process, which generates an HTML artifact that can be easily shared or published. The renderer supports multiple design registers, allowing users to alternate between styles for different types of content, such as reports or investigations.
The output produced by this skill is designed to be self-contained, with inline CSS and embedded fonts, ensuring that it can be viewed without relying on external resources. This feature is crucial for maintaining the integrity of the document, especially in environments where external requests might be blocked. Users can also verify the rendered output locally before publishing it, ensuring that it meets their expectations.
However, it's important to note that this skill is not intended for use in developing deployed websites or web applications, nor is it suitable for creating web UI design systems. It focuses solely on generating HTML artifacts from session outputs and should be used in conjunction with prior analysis or research workflows.
When to use it
Use this skill when you need to convert session findings or reports into a visually appealing HTML format for sharing or publication.
When not to use it
Avoid using this skill for developing websites or web applications, as it is designed solely for rendering HTML artifacts from session outputs.
What you can build with it
After a research session
Invoke `/HTML` to render your research findings into a polished HTML document for easy sharing.
Generating a report
Use the skill to create a visually appealing HTML report from your analysis, selecting the appropriate design register.
Presenting findings
Render session outputs as HTML artifacts to present your findings in a professional format during meetings.
How to install HTML Artifact Renderer
View source1. Install with the skills CLI
npx skills add danielmiessler/lifeos/HTML --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by danielmiesslerHTML
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
Frequently asked questions about HTML Artifact Renderer
Similar skills
Markdown to HTML Conversion
Efficiently convert Markdown documents to HTML.
Code Tour
Create structured walkthroughs for codebases.
Acquire Codebase Knowledge
Streamline onboarding with comprehensive codebase documentation.
Documentation & Modernization
Streamline codebase documentation and modernization planning.
Azure Resource Visualizer
Generate architecture diagrams for Azure resources.
CLAUDE.md Improver
Optimize your CLAUDE.md files for better project context.