Skip to content
Get packs

HTML Artifact Renderer

Turns a finished analysis or report into a designed, self-contained HTML page

Source Download skill
Repository
danielmiessler/LifeOS
Stars
19,682
Licence
MIT
Files
3 files

What it does

Once installed, when you ask the agent to render its last output as HTML, it packages the findings into a single standalone HTML file with its own styling and embedded fonts, so it opens without any outside web requests. The agent only organises the content into structured data; a bundled TypeScript script decides the layout, fonts and colours, then the result can be published as a Claude Code artifact.

Great for

  • People who want a polished, shareable page from a research summary, report or cost analysis
  • Claude Code users who already use the Artifact tool and the artifact-design skill
  • Developers building a LifeOS-style personal AI setup who want consistent report formatting

Skip it if

  • Building deployed websites or web apps, since the skill is scoped to single artifact files (use a web-app skill instead)
  • Creating ISAs or web UI design systems, which the skill explicitly routes to other skills
  • Anyone expecting full control over exact visual design, since the renderer owns all layout decisions

Try asking

  • “/HTML”
  • “render the quarterly cost analysis as HTML”
  • “make this research session an HTML artifact with the sources listed”
  • “turn this red-team findings summary into a designed HTML page”
Step-by-step guide: how to use HTML Artifact RendererInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    HTML.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip HTML.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip HTML.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for a specific register such as dossier or ledger to match the type of content, or run the registers command to see the options.
  • Open the local HTML file in a browser to check readability and completeness before sharing the published artifact.
  • Remember a published artifact is private to your own claude.ai account, so test the local render if you are signed into a different account.

What's inside

  • Intents/Render.md
  • SKILL.md
  • Tools/Render.ts

Redistributed unmodified from danielmiessler/LifeOS under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.