Skip to content
Get packs

Guide · Agent skill

How to use the HTML Artifact Renderer agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The HTML skill, from danielmiessler's LifeOS project, turns the output of your current agent session into one standalone HTML page with its own styling and embedded fonts. It is aimed at people who want a polished, shareable page from a research summary, report or cost analysis. After reading this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what it needs to run.

HTML Artifact Rendererdanielmiessler/LifeOS · MIT

Quick start

  1. 1Download the ZIP. Get the HTML skill ZIP from the directory page.
  2. 2Unzip into a skills folder. Unzip into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
  3. 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
  4. 4Install Bun. Make sure the Bun runtime is available so Tools/Render.ts can run.
  5. 5Finish your analysis. Complete the report or research output you want rendered in the current session.
  6. 6Ask for the render. Type /HTML or ask to render this as HTML.
  7. 7Review the file. Open the generated HTML in a browser and check that all content and layout are correct.

What the HTML skill makes the agent do

The skill renders the output the session has just produced as a self-contained, designed HTML artifact. The agent's job is limited to organising the content into structured data and choosing a design register. A bundled TypeScript script, Tools/Render.ts, decides all layout, typography and colour.

The result is a single HTML file with inline CSS and fonts embedded as data URIs, so it makes no external requests. The skill can also publish the file as a Claude Code artifact.

  • Works on completed analyses, reports and research output from the current session.
  • Produces one file; it is not a deployed website or web app.
  • Uses the Artifact tool and the artifact-design skill for publishing, but a local HTML file is still written without them.

Install the HTML skill

Download the skill's ZIP from the directory page, then choose one of two routes. For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.

If you use the Claude apps instead, upload the ZIP under Settings → Capabilities → Skills.

  • Personal: unzip into ~/.claude/skills/
  • Project only: unzip into .claude/skills/ inside the project
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Check what you need before you run it

The renderer runs on Bun, which must be installed to execute Tools/Render.ts. Publishing as an artifact needs the Claude Code Artifact tool and the artifact-design skill, but both are optional.

Fonts are optional too. On macOS, Render.ts looks for font files in ~/Library/Fonts, /Library/Fonts and /System/Library/Fonts/Supplemental and embeds any it finds. If none are present, it falls back to system font stacks.

  • Bun runtime (required to run Tools/Render.ts)
  • Claude Code Artifact tool and artifact-design skill (optional, for publishing)
  • Local macOS font files (optional, for embedded fonts)

Trigger the skill with natural requests

You can invoke the skill with the /HTML command or by asking in ordinary words. The skill's trigger phrases include "HTML artifact", "render this as HTML", "make this an HTML page", "artifact of this analysis" and "designed HTML output".

Ask for it right after the analysis you want rendered, since the skill works on the current session's output. If several outputs exist, the skill names the one it renders so you can redirect it.

  • /HTML
  • render this as HTML
  • make this an HTML page
  • artifact of this analysis
  • render the quarterly cost analysis as HTML
/HTML

Examples of what you can ask for

After a research or red-team session, /HTML publishes the findings, quotes and sources as a dossier-style artifact. For a cost report, the skill can use a ledger register with tables and callouts.

The register is the design choice the agent makes, so describe the kind of content you have and let the renderer handle the look.

  • Research findings with quotes and sources, rendered as a dossier artifact.
  • A quarterly cost analysis, rendered as a ledger with tables and callouts.
  • A report you want to share as one page.

Safety notes: scripts and network

The skill runs scripts: Tools/Render.ts executes under Bun. It does not use the network. The output file contains no external requests because fonts are embedded and CSS is inline.

Review the generated HTML in a browser before you share it, since the renderer controls layout and you should check that all the content appears.

  • Runs scripts: yes (Tools/Render.ts via Bun)
  • Uses network: no
  • A published artifact is private to the owner's claude.ai account.

Tips for better results

Give the skill a complete output to render. It distils what the session produced, so a finished analysis gives better results than a half-finished draft.

Keep the request specific about the content type. The skill is scoped to single artifact files, so ask for a page rather than a site.

  • Render once the analysis is finished.
  • Name the output if the session produced several.
  • Do not use this skill for ISAs, web UI design systems or static diagrams; the skill routes those elsewhere.

What people use it for

  • Turning a research summary into a shareable single-page dossier.
  • Presenting a quarterly cost analysis as a ledger with tables and callouts.
  • Publishing a report as a Claude Code artifact for others to read.
  • Keeping report formatting consistent across a personal LifeOS-style AI setup.

Frequently asked questions

How do I install the HTML agent skill?

Download the skill ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.

What do I need to run the HTML skill?

You need the Bun runtime to execute Tools/Render.ts. The Claude Code Artifact tool and the artifact-design skill are needed only for publishing, and optional local macOS font files can be embedded.

Is the HTML skill free?

The skill is listed under the MIT licence. Check the licence file in the project for the terms that apply to your use.

Does the HTML skill need an internet connection?

The skill itself makes no network requests, and the HTML it generates has no external requests because fonts are embedded and CSS is inline. Publishing as an artifact uses the Artifact tool, which is separate.

Why does my HTML have no custom fonts?

Render.ts embeds fonts only when it finds font files in the macOS font folders. If none are present, it uses system font stacks instead.

Can I control the exact design of the page?

Not in fine detail. The renderer owns all layout, typography and colour decisions, so the skill is best for consistent, polished reports rather than exact visual control. For web UI design, use the Webdesign skill instead.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use the HTML skill if you want a polished, self-contained page from a research summary, report or cost analysis, especially if you already use the Claude Code Artifact tool. Pick something else if you need a deployed website or web app, an ISA, a web UI design system, or precise control over visual design.

Download the skill