Skill
ApertureOscillation
3-pass scope oscillation that holds a question constant while shifting zoom — narrow/tactical, wide/strategic, then synthesis — to surface design tensions,…
@danielmiesslerView SkillProductivity
Skill
/HTML
Renders the current session's output (analysis, research, red team, report, plan) as an extremely well-designed, self-contained HTML artifact via a deterministic renderer — the model distills content into typed JSON, the tool owns all layout/typography/color. USE WHEN /HTML,
Install
$ npx -y skills add danielmiessler/personal_ai_infrastructure --skill HTML --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/HTML
Context preview
The summary Claude sees to decide when to auto-load this skill.
Renders the current session's output (analysis, research, red team, report, plan) as an extremely well-designed, self-contained HTML artifact via a deterministic renderer — the model distills content into typed JSON, the tool owns all layout/typography/color. USE WHEN /HTML,
SKILL.md
HTML.SKILL.mdname: HTML
version: 1.0.0
description: Renders the current session's output (analysis, research, red team, report, plan) as an extremely well-designed, self-contained HTML artifact via a deterministic renderer — the model distills content into typed JSON, the tool owns all layout/typography/color. USE WHEN /HTML, HTML artifact, render this as HTML, make this an HTML page, artifact of this analysis, designed HTML output. NOT FOR deployed websites or web apps (build the project directly), web UI design systems (use Webdesign), static images or diagrams (use Art), or writing the underlying analysis itself (run the analysis first, then /HTML renders it).
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:**
1. **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 &2. **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`
- `--schema` prints the content JSON shape with an example; `--registers` lists registers.
- Registers: `dossier` (dark ink-green / orange, condensed display + typewriter — evidence files, red teams, investigations) and `ledger` (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, `::before` labels 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 `list` action.
- **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 `list` blocks 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
Read more
name: HTML version: 1.0.0 description: Renders the current session's output (analysis, research, red team, report, plan) as an extremely well-designed, self-contained HTML artifact via a deterministic renderer — the model distills content into typed JSON, the tool owns all layout/typography/color. USE WHEN /HTML, HTML artifact, render this as HTML, make this an HTML page, artifact of this analysis, designed HTML output. NOT FOR deployed websites or web apps (build the project directly), web UI design systems (use Webdesign), static images or diagrams (use Art), or writing the underlying analysis itself (run the analysis first, then /HTML renders it).
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:**
1. **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 &2. **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`
- `--schema` prints the content JSON shape with an example; `--registers` lists registers.
- Registers: `dossier` (dark ink-green / orange, condensed display + typewriter — evidence files, red teams, investigations) and `ledger` (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, `::before` labels 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 `list` action.
- **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 `list` blocks 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
Ships withlifeos
⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.
Get the whole plugin
Stats
18,991
Stars
2,466
Forks
Active
Maintenance
TypeScript
Language
MIT
License
11d ago
Last commit
1y ago
Created
14d ago
Added
Repo: danielmiessler/personal_ai_infrastructure
Other skills on lifeos.
@danielmiesslerView SkillSkill
Aphorisms
Curated aphorism collection with CRUD — content-based matching, themed search, thinker research, DB maintenance. Quotes organized by author/theme/context/usage…
@danielmiesslerView SkillSkill
Apify
Scrapes social platforms, business data, and e-commerce via Apify actors — Instagram, LinkedIn, TikTok, YouTube, Facebook, Google Maps, Amazon, and web crawls…
@danielmiesslerView SkillSkill
ArXiv
Search and retrieve arXiv academic papers by topic, category, or paper ID — with AlphaXiv-enriched AI-generated overviews. Uses arXiv Atom API across…
@danielmiesslerView SkillSkill
Art
Static visual content across 20+ formats — diagrams, mermaid, infographics, D3 dashboards, comics, icons, wallpaper — via Nano Banana Pro (default), Nano…
@danielmiesslerView SkillSkill
AudioEditor
AI audio editing pipeline: Whisper word-level transcription → Claude segment classification (KEEP/CUT_FILLER/CUT_FALSE_START/CUT_STUTTER/CUT_DEAD_AIR) → ffmpeg…
@danielmiesslerView Skill