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.mdto get the CSS variables and styles for the selected theme - Always read
references/TEMPLATES.mdto get the HTML patterns for each slide layout - Always read
references/NAVIGATION.mdto 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.css - https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js - https://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 Namefor 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.htmlor 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:
- All slides render without overflow (content fits viewport)
- Navigation works with arrow keys AND mouse scroll
- Slide numbers are visible
- Fragment animations work (horizontal) or fade-in works (vertical)
- Links are clickable (
pointer-events: autoin Reveal.js) - Code blocks have syntax highlighting (if present)
- Responsive at all three breakpoints
- No broken icon references (Lucide icons initialized)
- Consistent kicker numbering across all slides
- Title slide and closing slide have distinct visual treatment