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:
- Logical sections — these become slides or slide groups
- Key data points — numbers, metrics, percentages → use metric/stat slide layouts
- Lists and comparisons — feature lists, pros/cons → use card grids or comparison tables
- Quotes or testimonials — use quote-block layouts
- Sequential processes — workflows, timelines → use workflow/timeline slide layouts
- 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--check, list--numbered |
| CTA / Closing |
Final slide with links and contact |
slide--section slide--center + contact-grid |
Step 3: Generate the HTML
Read the appropriate theme and template files from this skill's references directory before writing code:
- Always read
references/THEMES.md to get the CSS variables and styles for the selected theme
- Always read
references/TEMPLATES.md to get the HTML patterns for each slide layout
- Always read
references/NAVIGATION.md to get the correct JS initialization for the selected navigation mode
Then assemble the presentation as a single self-contained HTML file:
File Structure
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, fonts, Reveal.js CDN (horizontal) or custom CSS (vertical) -->
<!-- All styles inline in <style> block -->
</head>
<body>
<!-- Slides markup -->
<!-- Scripts: Reveal.js init (horizontal) or custom scroll handler (vertical) -->
</body>
</html>
Key Rules
- Single file — everything inline. No external CSS/JS files except CDN resources (Google Fonts, Reveal.js, Lucide icons).
- CDN dependencies (horizontal mode):
https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.csshttps://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.jshttps://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js (if code blocks present)https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css (if code blocks present)https://unpkg.com/lucide@latest (for icons)
- Vertical scroll mode — zero CDN dependencies for Reveal.js. Uses custom CSS scroll-snap and vanilla JS for keyboard/scroll navigation.
- Google Fonts — load fonts matching the theme. Always use
<link rel="preconnect"> for performance.
- Responsive — include media queries for 1400px, 1024px, and 768px breakpoints.
- Fragment animations — use
class="fragment" for progressive reveal in horizontal mode. For vertical mode, use intersection observer fade-in animations.
- Slide numbers — always show current slide number.
- Kicker text — each content slide gets a numbered kicker like
01 // Section Name for editorial feel.
- Header bar — each content slide (not title/section slides) gets a header with an icon and section label.
Horizontal Mode: Reveal.js Config
Reveal.initialize({
hash: true,
slideNumber: true,
controls: true,
controlsLayout: "bottom-right",
progress: true,
center: false,
transition: "slide",
width: "100%",
height: "100%",
margin: 0.04,
navigationMode: "linear",
autoAnimate: true,
autoAnimateDuration: 0.7,
plugins: [RevealHighlight], // only if code blocks present
});
Vertical Scroll Mode: Navigation Behavior
- Each slide is a full-viewport section with
scroll-snap-align: start
- Arrow keys (Up/Down/Left/Right) all navigate between slides
- Mouse wheel scrolls between slides (debounced)
- Page Up/Down, Home/End supported
- Progress bar at bottom shows position
- Smooth scroll transitions between slides
- Touch swipe support for mobile
Step 4: Write to Output
- Create the HTML file at an appropriate output path (e.g.,
./presentation.html or a user-specified location)
- Present the file to the user
If the content is large (>15 slides), build iteratively — write the skeleton first, then append slide content in chunks.
Error Handling
| Problem |
Cause |
Fix |
| CDN fails to load (Reveal.js, Lucide, Google Fonts) |
Network unavailable or CDN outage |
Switch to inline styles/scripts: embed Reveal.js core inline, replace Lucide icons with inline SVG paths, use system font stack (system-ui, -apple-system, sans-serif) |
| Content overflows slide viewport |
Too much text or too many elements per slide |
Split the slide into two: move supporting detail to a follow-up slide or convert prose to a bullet list |
| Fonts render incorrectly or fail to load |
Google Fonts CDN blocked or slow |
Add system font fallback in the font-family stack: 'Font Name', system-ui, Georgia, serif |
| Reveal.js fails to initialize |
Script load order issue or missing plugin |
Verify CDN script tags appear before Reveal.initialize(); check browser console for 404s |
Quality Checklist
Before delivering, verify:
1---2name: html-presentation3description: 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".4---56# HTML Presentation Skill78Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.910## When This Skill Triggers1112- User provides a document and asks for a "presentation", "slides", or "deck" as HTML13- User asks to convert notes/outline/content into browser-presentable slides14- User wants a Reveal.js or scroll-based HTML presentation15- User references wanting to present from a browser rather than PowerPoint1617## Step 0: Gather Requirements1819Before 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.2021**Required context (ask if missing):**2223| Parameter | What to ask | Default if not specified |24| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |25| **Navigation mode** | "Should slides go left-to-right (horizontal) or top-to-bottom (vertical scroll)?" | `horizontal` |26| **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` |27| **Audience & tone** | "Who is this for? (e.g., investors, engineers, conference talk, internal team)" | Infer from content |28| **Slide count preference** | "Roughly how many slides?" | Auto-determine from content density |29| **Branding** | "Any logo text, tagline, or accent color to use in the header?" | None |30| **CTA / closing** | "Any call-to-action, links, or contact info for the final slide?" | None |3132If 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.3334## Step 1: Analyze the Source Document3536Read the uploaded document or provided content. Identify:37381. **Logical sections** — these become slides or slide groups392. **Key data points** — numbers, metrics, percentages → use metric/stat slide layouts403. **Lists and comparisons** — feature lists, pros/cons → use card grids or comparison tables414. **Quotes or testimonials** — use quote-block layouts425. **Sequential processes** — workflows, timelines → use workflow/timeline slide layouts436. **Title and conclusion** — first and last slides get special treatment4445Create a mental outline mapping content sections to slide types before writing any HTML.4647## Step 2: Select Slide Layouts4849Each slide should use one of these layout patterns. Mix them for visual variety — never use the same layout for more than 2 consecutive slides.5051| Layout | When to Use | CSS Class |52| -------------------- | ----------------------------------------------- | ----------------------------------------------- |53| **Title** | Opening slide, section dividers | `slide--section slide--center` |54| **Split** | Text + supporting content side-by-side | `split` or `split--60-40` |55| **Grid Cards** | 3-6 related items (features, risks, components) | `grid-2`, `grid-3`, `grid-4` |56| **Metrics** | Key numbers/stats to emphasize | `metrics` with `metric` items |57| **Quote** | Expert quotes, testimonials, key statements | `quote-block` |58| **Workflow** | Sequential process, pipeline, architecture | `workflow` with arrow connectors |59| **Comparison Table** | Feature comparison, before/after | `comparison-table` |60| **Timeline** | Chronological events, roadmap phases | `timeline` |61| **List** | Ordered or unordered key points | `list`, `list--check`, `list--numbered` |62| **CTA / Closing** | Final slide with links and contact | `slide--section slide--center` + `contact-grid` |6364## Step 3: Generate the HTML6566Read the appropriate theme and template files from this skill's references directory before writing code:67681. **Always read** `references/THEMES.md` to get the CSS variables and styles for the selected theme692. **Always read** `references/TEMPLATES.md` to get the HTML patterns for each slide layout703. **Always read** `references/NAVIGATION.md` to get the correct JS initialization for the selected navigation mode7172Then assemble the presentation as a single self-contained HTML file:7374### File Structure7576```html77<!DOCTYPE html>78<html lang="en">79 <head>80 <!-- Meta, fonts, Reveal.js CDN (horizontal) or custom CSS (vertical) -->81 <!-- All styles inline in <style> block -->82 </head>83 <body>84 <!-- Slides markup -->85 <!-- Scripts: Reveal.js init (horizontal) or custom scroll handler (vertical) -->86 </body>87</html>88```8990### Key Rules91921. **Single file** — everything inline. No external CSS/JS files except CDN resources (Google Fonts, Reveal.js, Lucide icons).932. **CDN dependencies** (horizontal mode):94 - `https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css`95 - `https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js`96 - `https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js` (if code blocks present)97 - `https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css` (if code blocks present)98 - `https://unpkg.com/lucide@latest` (for icons)993. **Vertical scroll mode** — zero CDN dependencies for Reveal.js. Uses custom CSS scroll-snap and vanilla JS for keyboard/scroll navigation.1004. **Google Fonts** — load fonts matching the theme. Always use `<link rel="preconnect">` for performance.1015. **Responsive** — include media queries for 1400px, 1024px, and 768px breakpoints.1026. **Fragment animations** — use `class="fragment"` for progressive reveal in horizontal mode. For vertical mode, use intersection observer fade-in animations.1037. **Slide numbers** — always show current slide number.1048. **Kicker text** — each content slide gets a numbered kicker like `01 // Section Name` for editorial feel.1059. **Header bar** — each content slide (not title/section slides) gets a header with an icon and section label.106107### Horizontal Mode: Reveal.js Config108109```javascript110Reveal.initialize({111 hash: true,112 slideNumber: true,113 controls: true,114 controlsLayout: "bottom-right",115 progress: true,116 center: false,117 transition: "slide",118 width: "100%",119 height: "100%",120 margin: 0.04,121 navigationMode: "linear",122 autoAnimate: true,123 autoAnimateDuration: 0.7,124 plugins: [RevealHighlight], // only if code blocks present125});126```127128### Vertical Scroll Mode: Navigation Behavior129130- Each slide is a full-viewport section with `scroll-snap-align: start`131- Arrow keys (Up/Down/Left/Right) all navigate between slides132- Mouse wheel scrolls between slides (debounced)133- Page Up/Down, Home/End supported134- Progress bar at bottom shows position135- Smooth scroll transitions between slides136- Touch swipe support for mobile137138## Step 4: Write to Output1391401. Create the HTML file at an appropriate output path (e.g., `./presentation.html` or a user-specified location)1412. Present the file to the user142143If the content is large (>15 slides), build iteratively — write the skeleton first, then append slide content in chunks.144145## Error Handling146147| Problem | Cause | Fix |148| --------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |149| CDN fails to load (Reveal.js, Lucide, Google Fonts) | Network unavailable or CDN outage | Switch to inline styles/scripts: embed Reveal.js core inline, replace Lucide icons with inline SVG paths, use system font stack (`system-ui, -apple-system, sans-serif`) |150| Content overflows slide viewport | Too much text or too many elements per slide | Split the slide into two: move supporting detail to a follow-up slide or convert prose to a bullet list |151| Fonts render incorrectly or fail to load | Google Fonts CDN blocked or slow | Add system font fallback in the font-family stack: `'Font Name', system-ui, Georgia, serif` |152| Reveal.js fails to initialize | Script load order issue or missing plugin | Verify CDN script tags appear before `Reveal.initialize()`; check browser console for 404s |153154## Quality Checklist155156Before delivering, verify:157158- [ ] All slides render without overflow (content fits viewport)159- [ ] Navigation works with arrow keys AND mouse scroll160- [ ] Slide numbers are visible161- [ ] Fragment animations work (horizontal) or fade-in works (vertical)162- [ ] Links are clickable (`pointer-events: auto` in Reveal.js)163- [ ] Code blocks have syntax highlighting (if present)164- [ ] Responsive at all three breakpoints165- [ ] No broken icon references (Lucide icons initialized)166- [ ] Consistent kicker numbering across all slides167- [ ] Title slide and closing slide have distinct visual treatment
mathews-tom