rich-html

Installation
SKILL.md

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

  1. Pick the profile (deck vs document) from the request and references/content-guide.md.
  2. Copy the matching template from assets/ (deck-template.html or document-template.html) as the starting point. Do not hand-roll the scaffolding - the templates already solve navigation, theming, and the Mermaid render gotcha.
  3. 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.
  4. Add Mermaid diagrams wherever a picture beats prose (flows, dependency graphs, sequences) following references/mermaid.md.
  5. Save the file (see Output) and tell the user the path plus how to open it.
Installs
1
First Seen
6 days ago
rich-html — n0an/rich-html-skill