rich-html

Produce a single self-contained .html file that presents content far more expressively than Markdown. Markdown is clean but flat - it cannot draw a diagram, lay out a card grid, annotate a diff in the margin, color-code a callout, run as a navigable slide deck, offer a download button for a result file, or let the reader tick four boxes and hand the answer back. This skill outputs HTML that can.

The motivating ritual: after a long, intensive run - a research loop that tried 200 ideas, a multi-hour build, a deep refactor - ask for an HTML deck of what worked, what did not, and what to do next. Page through it with a coffee: clear slides, honest reflection, and buttons to download the best artifacts. HTML beats Markdown for exactly this.

Three output profiles cover almost everything:

Deck - fullscreen slides with keyboard / click / swipe navigation, a progress bar, and a counter. Use for a recap of completed work, a highlights showcase, a pitch, a walkthrough, anything meant to be presented one beat at a time.
Document - one long scrolling page with sections, tables, and inline diagrams. Use for architecture write-ups, reports, specs, annotated diffs, explainers, references, anything meant to be read and scanned.
Interactive - a page the reader manipulates and then hands back: pick options, drag items into columns, drag sliders, edit a prompt - then click Copy as markdown and paste the result to you. Use whenever the next step is the reader's decision rather than their understanding.

The third profile is the one people forget. A deck ends the conversation; an interactive page closes the loop, and what it produces is a better prompt than the reader would have typed. Reach for it when you are about to ask "which of these do you want?" - build the sheet instead of asking in prose.

When the user does not specify, infer the profile from intent (see references/content-guide.md): "deck / presentation / slides / recap / showcase / highlights" lean deck; "doc / report / reference / overview / architecture / spec" lean document; "pick / choose / prioritize / triage / tune / tweak / which of these" lean interactive. If genuinely ambiguous, ask once.

Workflow

Pick the profile (deck / document / interactive) from the request and references/content-guide.md.
Copy the matching template from assets/ (deck-template.html, document-template.html, or interactive-template.html) as the starting point. Do not hand-roll the scaffolding - the templates already solve navigation, theming, clipboard export, and the Mermaid render gotcha.
Replace the placeholder content with the real material: lead with the outcome or headline, then showcase the highlights. Use cards, big-stat numbers, callout notes, and tables from references/design-system.md. In the interactive template, fill the ITEMS / PARAMS literals at the top of the script - never hand-write the cards.
Add a diagram wherever a picture beats prose. Graph structure you would rather not lay out by hand goes to Mermaid (references/mermaid.md); anything you want to annotate - labeled edges, sub-labels, a highlighted hot path - or illustrate goes to inline SVG (references/svg-diagrams.md).
For a long document, add the sticky table of contents and collapse the mechanical sections behind <details> (references/document-format.md).
Save the file (see Output) and tell the user the path plus how to open it.

If you only need part of this, load only the relevant reference file.

Core Instructions

One self-contained .html file. Inline all CSS and JS. The only external dependency is the Mermaid CDN <script>, and only when the file actually contains Mermaid diagrams - draw them as inline SVG instead and the file has zero dependencies. Everything else must work offline by double-clicking the file.
Start from the templates in assets/. They carry the full design system and the working navigation / export / render logic. Vary the content and the accent colors, not the scaffolding.
Dark theme by default using the GitHub-dark palette (--bg:#0d1117). Keep the CSS variable tokens; recolor accents per topic if you want, but keep the look cohesive.
Decks must render Mermaid lazily, only once a slide becomes visible. A diagram rendered while its slide is display:none measures a zero-size box and collapses to an empty SVG. The deck template already handles this with startOnLoad:false + per-slide mermaid.run() - keep that intact. See references/mermaid.md.
Documents can use startOnLoad:true because every diagram is laid out and visible from the start.
Mermaid for structure, SVG for annotation. If you are fighting Mermaid to put a word on an edge, a second line inside a node, or a highlight on one path, stop and hand-draw it. See references/svg-diagrams.md for the decision table and the skeleton.
Interactive pages keep content in state, not in the DOM. Fill the data literals at the top of the script, rebuild the DOM in render(), and serialize state in buildMarkdown(). Every interactive page needs a copy button, a reset button, and content that is readable if the JS breaks. See references/interaction.md.
Content over chrome. Real numbers, concrete outcomes, short skimmable lines. Lead with the result. Cut filler. A deck slide holds one idea; a document section holds one topic; an interactive card holds one decision.
Keep it legible. Use the fluid clamp() type scale from the templates, keep contrast high, and let documents read fine even with JS disabled.
Make artifacts downloadable when they exist. If the work produced files worth grabbing (best experiment, result JSON, generated audio, a log), add download buttons that link to them. Place the file next to the .html (or use a relative path) and use <a class="btn" href="..." download>. See references/design-system.md.

Output

Default save location: llmtemp/ inside the current repository if that folder exists; otherwise the current working directory. If the user names a path, use it.
Filename: kebab-case, ending in .html (for example session-recap.html, module-architecture.html).
After writing, report the absolute path and tell the user they can open it with open <path> on macOS (or just double-click it).
Serve it on a local port when the file links to downloadable artifacts, exports to the clipboard, or the user wants to browse it like an app. Download links, navigator.clipboard, and any fetch are most reliable over http:// rather than file://, and a served page is shareable on the local network. Run a static server from the file's folder and give the user the URL:
```
cd <folder with the .html and its artifacts>
python3 -m http.server 8000   # then open http://localhost:8000/<file>.html
```
Ask before starting a long-lived server; for a quick local view, opening the file directly is enough.

References

references/content-guide.md - choosing the profile, structuring a "completed work" showcase, a research-loop recap, or a decision sheet, and writing punchy, skimmable content.
references/design-system.md - the shared CSS tokens and components: palette, fluid typography, cards, pills, tags, callout notes, big-stat numbers, flow steps, grids, gradient text, annotated diffs, contact sheets, and disclosure blocks.
references/deck-format.md - the slide-deck anatomy: slide structure, navigation (keyboard / click / swipe), progress bar, counter, nav dots.
references/document-format.md - the scrolling-document anatomy: sections, sticky table of contents, <details> disclosure, panels, tables, legends, and ASCII diagrams.
references/interaction.md - the interactive anatomy: the state/render/serialize loop, clipboard export with its fallback, assemble-a-reply cards, drag-across-columns, sliders, live-preview editors, click-to-filter.
references/mermaid.md - embedding and theming Mermaid, the deck visibility gotcha, and the diagram types that work best.
references/svg-diagrams.md - hand-drawn inline SVG: when it beats Mermaid, the skeleton and marker arrowheads, hand-layout discipline, edge labels, and highlighted paths.

Assets

assets/deck-template.html - a complete, working slide deck. Copy and fill.
assets/document-template.html - a complete, working scrolling document. Copy and fill.
assets/interactive-template.html - a complete, working decision sheet: tri-state cards, tag filter, parameter sliders, and copy-as-markdown. Copy and fill the data literals.