Stats
Actions
Tags
From slide-deck
Create interactive Reveal.js slide deck presentations with rich visual elements. Use when user wants to create a presentation, slide deck, workshop deck, talk, or wants interactive slides with navigation and transitions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/slide-deck:slide_deckThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
1. Determine topic, audience, and approximate slide count
white)Every deck follows this skeleton:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Deck Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/white.css">
<style>
/* Custom CSS here — see COMPONENTS.md */
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section><!-- Each section is one slide --></section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.js"></script>
<script>
Reveal.initialize({
hash: true,
transition: 'slide',
overview: true,
slideNumber: true
});
</script>
</body>
</html>
white, black, beige, moon, night, serif, simple, sky, solarized, dracula, league, blood<section> is a slide; use components from COMPONENTS.md<style> block.html file, all CSS inline in <style>, Reveal.js loaded from CDN<section> tags — each <section> inside .slides is one slide.reveal — e.g., .reveal .demo-box { ... }class="title-slide" on the section<section> tags for drill-down contentEscape for thumbnail gridFslide, fade, convex, concave, zoomclass="fragment" to animate elements in sequence<aside class="notes"> inside a sectiondata-auto-animate to consecutive sectionsnpx claudepluginhub ferrants/skill-slide-deckGenerate 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.
Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes.
Creates Slidev presentations with markdown slides, Vue components, modular imports, layouts, themes, animations, code highlighting, and best practices for developers.