/html-presentation

name: html-presentation
description: 'Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes. Triggers on: "create a presentation", "slide deck", "pitch deck", "HTML presentation", "web-based slides", "reveal.js deck", "convert document into slides".'
metadata:
  version: 1.1.1
  category: visualization
  tags: [slides, presentation, reveal-js, html]
  difficulty: intermediate

HTML Presentation Skill

Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.

When This Skill Triggers

• User provides a document and asks for a "presentation", "slides", or "deck" as HTML
• User asks to convert notes/outline/content into browser-presentable slides
• User wants a Reveal.js or scroll-based HTML presentation
• User references wanting to present from a browser rather than PowerPoint

Step 0: Gather Requirements

Before generating anything, check whether the user has specified the following. If any are missing, ask for clarification in a single concise message. Do NOT ask more than once — use sensible defaults for anything the user declines to specify.

**Required context (ask if missing):**

| Parameter | What to ask | Default if not specified | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | **Navigation mode** | "Should slides go left-to-right (horizontal) or top-to-bottom (vertical scroll)?" | `horizontal` | | **Theme** | "Which visual style? Options: `dark-editorial` (dark bg, serif headlines, editorial feel), `light-minimal` (clean white, sans-serif), `corporate` (navy/white, professional), `hacker` (terminal green-on-black, monospace)" | `dark-editorial` | | **Audience & tone** | "Who is this for? (e.g., investors, engineers, conference talk, internal team)" | Infer from content | | **Slide count preference** | "Roughly how many slides?" | Auto-determine from content density | | **Branding** | "Any logo text, tagline, or accent color to use in the header?" | None | | **CTA / closing** | "Any call-to-action, links, or contact info for the final slide?" | None |

If the user provides a document and says something like "make this a presentation", ask all missing parameters in one shot. If they say "just make it look good", use defaults and proceed.

Step 1: Analyze the Source Document

Read the uploaded document or provided content. Identify:

1. **Logical sections** — these become slides or slide groups 2. **Key data points** — numbers, metrics, percentages → use metric/stat slide layouts 3. **Lists and comparisons** — feature lists, pros/cons → use card grids or comparison tables 4. **Quotes or testimonials** — use quote-block layouts 5. **Sequential processes** — workflows, timelines → use workflow/timeline slide layouts 6. **Title and conclusion** — first and last slides get special treatment

Create a mental outline mapping content sections to slide types before writing any HTML.

Step 2: Select Slide Layouts

Each slide should use one of these layout patterns. Mix them for visual variety — never use the same layout for more than 2 consecutive slides.

| Layout | When to Use | CSS Class | | -------------------- | ----------------------------------------------- | ----------------------------------------------- | | **Title** | Opening slide, section dividers | `slide--section slide--center` | | **Split** | Text + supporting content side-by-side | `split` or `split--60-40` | | **Grid Cards** | 3-6 related items (features, risks, components) | `grid-2`, `grid-3`, `grid-4` | | **Metrics** | Key numbers/stats to emphasize | `metrics` with `metric` items | | **Quote** | Expert quotes, testimonials, key statements | `quote-block` | | **Workflow** | Sequential process, pipeline, architecture | `workflow` with arrow connectors | | **Comparison Table** | Feature comparison, before/after | `comparison-table` | | **Timeline** | Chronological events, roadmap phases | `timeline` | | **List** | Ordered or unordered key points | `list`, `list--che