Convert any document, outline, or content into a polished, self-contained HTML slide presentation. Use this skill whenever the user wants to create a presentation, slide deck, pitch deck, or talk from a document, markdown file, outline, notes, or any textual content and wants the output as an HTML file (not PPTX). Also trigger when the user asks for an "HTML presentation", "web-based slides", "reveal.js deck", "browser presentation", or wants to convert a document into slides they can present from a browser. Supports two navigation modes - horizontal (left/right, Reveal.js-powered) and vertical scroll (top-to-bottom, keyboard/scroll navigation). Includes multiple visual themes (dark editorial, light minimal, corporate, hacker terminal). Consider asking the user for clarification on theme, navigation direction, and content structure if not already specified.
Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.
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.
Read the uploaded document or provided content. Identify:
Create a mental outline mapping content sections to slide types before writing any HTML.
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 |
Read the appropriate theme and template files from this skill's references directory before writing code:
references/THEMES.md to get the CSS variables and styles for the selected themereferences/TEMPLATES.md to get the HTML patterns for each slide layoutreferences/NAVIGATION.md to get the correct JS initialization for the selected navigation modeThen assemble the presentation as a single self-contained HTML file:
<!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>
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)<link rel="preconnect"> for performance.class="fragment" for progressive reveal in horizontal mode. For vertical mode, use intersection observer fade-in animations.01 // Section Name for editorial feel.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
});
scroll-snap-align: start./presentation.html or a user-specified location)If the content is large (>15 slides), build iteratively — write the skeleton first, then append slide content in chunks.
| 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 |
Before delivering, verify:
pointer-events: auto in Reveal.js)npx skills add Mathews-Tom/html-presentation下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Google Workspace CLI for Gmail, Calendar, Drive, Contacts, Sheets, and Docs.
Manage Apple Notes via the `memo` CLI on macOS (create, view, edit, delete, search, move, and export notes). Use when a user asks OpenClaw to add a note, list notes, search notes, or manage note folders.
Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli.
Use when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
Manage Apple Reminders via remindctl CLI (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output.
Manage Trello boards, lists, and cards via the Trello REST API.
Category:productivity