Stats
Actions
Tags
From armory
Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/armory:html-presentationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.
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 claudepluginhub mathews-tom/armory --plugin armoryGenerate keyboard-navigable HTML slideshow decks for presentations, tech talks, leadership briefings, onboarding walkthroughs, and any sequential visual narrative. Use whenever the user wants slides, a deck, a presentation, a tech talk, a brown-bag, a briefing, or any sequential walkthrough — especially when they want to share via a link rather than as a PowerPoint or Keynote file. Prefer HTML over .pptx whenever the deck contains live code, embedded interactivity, or will be shared as a URL.
Generates viewport-fitted single-file HTML slide decks with 8 visual themes, clamp-scaled typography, system font fallbacks, and scroll-snap navigation for web presentations.
Creates zero-dependency HTML presentations from scratch or by converting PowerPoint files. Guides users through visual style exploration with previews before building the final deck.