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 Mermaid diagram, lay out a card grid, color-code a callout, run as a navigable slide deck, or offer a download button for a result file. 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.
Two 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, references, anything meant to be read and scanned.
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. If genuinely ambiguous, ask once.
Workflow
- Pick the profile (deck vs document) from the request and
references/content-guide.md. - Copy the matching template from
assets/(deck-template.htmlordocument-template.html) as the starting point. Do not hand-roll the scaffolding - the templates already solve navigation, theming, 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. - Add Mermaid diagrams wherever a picture beats prose (flows, dependency graphs, sequences) following
references/mermaid.md. - Save the file (see Output) and tell the user the path plus how to open it.