html-output — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited html-output (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Render the current plan, spec, design doc, or conversation context as one self-contained HTML file that conveys the information more densely than markdown can — tables, inline SVG diagrams, semantic structure, in-page navigation, mobile-responsive layout, no external runtime dependencies.
See [README.md](README.md) for the sources that inspired this skill (Thariq Shihipar, Andrej Karpathy) and a before/after demo.
This skill owns what to convert and where to put the file. Visual quality (typography, color, motion, layout polish) is delegated to the frontend-design skill — if it's installed, treat this skill as composing on top of it. Otherwise default to a clean modern editorial style.
Fire on any of:
/html-output (optionally followed by a path).Do not fire on:
Pick the source in this order; stop at the first match:
/html-output /path/to/file.md → that file. Resolve relative paths against the cwd. If the file doesn't exist or isn't readable, stop and tell the user./Users/rijul/.claude/plans/*.md — but only if a plan-mode session just exited or the user explicitly says "the plan". Pick by mtime, not name.Once the source is picked, read the whole file (or the relevant conversation slice) before starting the design pass. Don't skim.
.html extension. Example: ~/.claude/plans/foo.md → ~/.claude/plans/foo.html. Project doc project-management/ai-secretary/foo-design.md → project-management/ai-secretary/foo-design.html.~/.claude/plans/<short-kebab-slug>.html, where the slug summarizes the topic in 3-5 words. Create the dir if it's missing.data-generator="html-output" attribute on <html>, see below). If it looks like unrelated content, append -v2, -v3, etc.Always print the absolute path of the written file in the final reply.
Before emitting a single line of HTML, decide:
| Mode | Pick when… | Hallmarks |
|---|---|---|
| editorial | Long-form prose, narrative arc, ≤ 1 big decision matrix | Wide reading column, generous line-height, drop caps optional, sticky TOC |
| technical-doc | API ref, schema, spec with many cross-references | Sidebar nav, fixed left rail, prominent code blocks, anchor links on every heading |
| dashboard | Comparison-heavy: matrices, decision logs, multiple tables | Multi-column grid, scannable cards, sparse prose, KPI-style callouts |
| deck | User asked for slides, OR source is a sequence of ~5–25 discrete claims/sections each worth its own screen | One section per viewport, scroll-snap, big type (clamp(2rem, 5vw, 4rem) for headings), slide counter |
See Slideshow / deck mode below for the specifics when picking deck.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) + a monospace stack for code. Use a CDN font (Google Fonts) only if the source clearly calls for one and the user is okay with one network reference.:root: background, text, muted text, primary accent, optional secondary accent. Aim for AA contrast (≥ 4.5:1 body text). Dark mode via @media (prefers-color-scheme: dark).<section> with <h2>; matrix/comparison → <table>; flow/architecture → inline <svg>; code → <pre><code>; warnings/asides → <aside> callouts; lists of decisions → definition lists.If frontend-design skill is available, defer aesthetic decisions to it; this skill's job is the structural map.
<style> in <head>, inline <svg> for diagrams. No external CSS/JS. A CDN font link is the only allowed network reference.data-generator="html-output" to the root <html> tag so future invocations can detect a regenerable file.<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. Headings nest properly (one <h1> per page, then <h2> for sections, <h3> for subsections).clamp() for responsive type sizes.@media print block — hide nav, hide interactive elements, force light colors, ensure tables don't break mid-row where avoidable.<section> gets a stable id. Build a TOC of anchor links to those ids. Smooth-scroll via scroll-behavior: smooth on :root.<pre><code> with monospace + a subtle background. Minimal syntax highlighting via hand-emitted <span class="kw|str|cmt|num"> if it adds value; otherwise leave code unhighlighted. No Prism.js, highlight.js, or any runtime script for highlighting.<script type="module">, no import, no fetch().When the visual direction is deck (user asked for slides, or source is a sequence of discrete claims):
<section class="slide"> is min-height: 100vh, displayed as a flex container, content vertically centered. Use scroll-snap-type: y mandatory on <main> and scroll-snap-align: center on each slide so scroll/swipe lands cleanly.clamp(2.5rem, 6vw, 5rem); body around clamp(1.125rem, 2vw, 1.5rem). A slide should be readable from across a room.<div class="counter">3 / 12</div> — counter values can be hand-emitted; no need for runtime calculation.<script> for arrow-key / space / j/k navigation that calls scrollIntoView() is fine — it's the one place the no runtime rule loosens. Still no module imports, no fetches, no external scripts. The file must still work fully if JS is disabled (scroll-snap handles the experience).scroll-behavior: smooth. Distraction tax outweighs the polish.@media print { .slide { page-break-after: always; min-height: auto; } }).A deck for a 12-section source should land around 30–80 KB. If you're over 100 KB, you've either inlined too much CSS or duplicated content per slide — trim.
The output must include:
<title> + <desc> for accessibility.<details open> collapsing critical content — readers shouldn't have to hunt.marked, no markdown-it, no pandoc calls). Write the HTML directly.42 KB) so the user can sanity-check that it's a single shareable artifact.open. Don't auto-open./html-output — convert the most recent plan file./html-output ./project-management/ai-secretary/background-tasks-design.md — convert that specific file./html-output.~/.claude/plans/<slug>.html./html-review skill.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.