# HTML

Renders the current session output as a self-contained, designed HTML artifact via a...

- Repository: https://github.com/danielmiessler/LifeOS (19669 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add danielmiessler/LifeOS --skill HTML -g -a claude-code -y`
Codex: `npx skills add danielmiessler/LifeOS --skill HTML -g -a codex -y`
Cursor: `npx skills add danielmiessler/LifeOS --skill HTML -g -a cursor -y`
Gemini CLI: `npx skills add danielmiessler/LifeOS --skill HTML -g -a gemini-cli -y`

## Description

Renders the current session output as a self-contained, designed HTML artifact via a deterministic renderer that owns all layout from typed JSON. USE WHEN /HTML, HTML artifact, render this as HTML, make this an HTML page, artifact of this analysis, designed HTML output. NOT FOR ISAs (ISARender.ts is the canonical ISA renderer), deployed sites or web apps, web UI design systems (Webdesign), static images or diagrams (Art), or writing the analysis itself.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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. Output is Artifact-CSP safe: inline CSS, fonts embedded as data URIs from local font files, zero external requests. The renderer command, block types and register table live in `Intents/Render.md`.

## Ideal State

- Any session output becomes one self-contained, Artifact-safe HTML file that makes zero external requests and renders for the owner.
- Layout, typography and color come entirely from `Tools/Render.ts` registers; the model supplies only typed content JSON, so no hand-styled one-off ships.
- The artifact is verified before hand-off, published through the Artifact tool and pixel-checked.

## Intent Routing

| Intent | Trigger | File |
|--------|---------|------|
| **Render** | `/HTML`, "HTML artifact", "render this as HTML" | `Intents/Render.md` |

## Data & Config

No user configuration: registers are defined in `Tools/Render.ts`, which embeds fonts found in `~/Library/Fonts`, `/Library/Fonts` or `/System/Library/Fonts/Supplemental` (macOS font folders; with none present it falls back to system font stacks). Publishing needs the Claude Code Artifact tool and its `artifact-design` skill; without them `Render.ts` still writes the local HTML file.

## Gotchas

The rest: https://github.com/danielmiessler/LifeOS/blob/HEAD/LifeOS/install/skills/HTML/SKILL.md