html-slides▌
claude-office-skills/skills · updated Apr 8, 2026
This skill enables creation of stunning HTML-based presentations using reveal.js - the web's most popular presentation framework. Create interactive, responsive slides with animations, code highlighting, speaker notes, and more.
HTML Slides Skill
Overview
This skill enables creation of stunning HTML-based presentations using reveal.js - the web's most popular presentation framework. Create interactive, responsive slides with animations, code highlighting, speaker notes, and more.
How to Use
- Describe the presentation you want to create
- Specify theme, transitions, and features needed
- I'll generate a reveal.js presentation
Example prompts:
- "Create an interactive presentation about our product"
- "Build a code walkthrough presentation with syntax highlighting"
- "Make a presentation with speaker notes and timer"
- "Create slides with animations and transitions"
Domain Knowledge
reveal.js Basics
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script>Reveal.initialize();</script>
</body>
</html>
Slide Structure
<!-- Horizontal slides -->
<section>Slide 1</section>
<section>Slide 2</section>
<!-- Vertical slides (nested) -->
<section>
<section>Vertical 1</section>
<section>Vertical 2</section>
</section>
<!-- Markdown slides -->
<section data-markdown>
<textarea data-template>
## Slide Title
- Point 1
- Point 2
</textarea>
</section>
Themes
Built-in themes: black, white, league, beige, sky, night, serif, simple, solarized, blood, moon
<link rel="stylesheet" href="reveal.js/dist/theme/moon.css">
Transitions
Reveal.initialize({
transition: 'slide', // none, fade, slide, convex, concave, zoom
transitionSpeed: 'default', // default, fast, slow
backgroundTransition: 'fade'
});
Fragments (Animations)
<section>
<p class="fragment">Appears first</p>
<p class="fragment fade-in">Then this</p>
<p class="fragment fade-up">Then this</p>
<p class="fragment highlight-red">Highlight</p>
</section>
Fragment styles: fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, highlight-red, highlight-blue, highlight-green, strike
Code Highlighting
<section>
<pre><code data-trim data-line-numbers="1|3-4">
def hello():
print("Hello")
print("World")
return True
</code></pre>
</section>
Speaker Notes
<section>
<h2>Slide Title</h2>
<p>Content</p>
<aside class="notes">
Speaker notes go here. Press 'S' to view.
</aside>
</section>
Backgrounds
<!-- Color background -->
<section data-background-color="#4d7e65">
<!-- Image background -->
<section data-background-image="image.jpg" data-background-size="cover">
<!-- Video background -->
<section data-background-video="video.mp4">
<!-- Gradient background -->
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
Configuration
Reveal.initialize({
// Display controls
controls: true,
controlsTutorial: true,
progress: true,
slideNumber: true,
// Behavior
hash: true,
respondToHashChanges: true,
history: true,
keyboard: true,
overview: true,
center: true,
touch: true,
loop: false,
rtl: false,
shuffle: false,
// Timing
autoSlide: 0, // 0 = disabled
autoSlideStoppable: true,
// Appearance
width: 960,
height: 700,
margin: 0.04,
minScale: 0.2,
maxScale: 2.0,
// Plugins
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});
Examples
Example 1: Tech Talk
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>API Design Best Practices</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">
<h1>API Design</h1>
<h3>Best Practices for 2024</h3>
<p><small>Engineering Team</small></p>
</section>
<section>
<h2>Agenda</h2>
<ol>
<li class="fragment">RESTful Principles</li>
<li class="fragment">Authentication</li>
<li class="fragment">Error Handling</li>
<li class="fragment">Documentation</li>
</ol>
</section>
<section>
<section>
<h2>RESTful Principles</h2>
</section>
<section>
<h3>Resource Naming</h3>
<pre><code data-trim class="language-http">
GET /users # Collection
GET /users/123 # Single resource
POST /users # Create
PUT /users/123 # Update
DELETE /users/123 # Delete
</code></pre>
</section>
</section>
<section>
<h2>Questions?</h2>
<p>api-team@company.com</p>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
hash: true,
plugins: [RevealHighlight]
});
</script>
</body>
</html>
Example 2: Product Launch
<!doctype html>
<html>
<head>
<title>Product Launch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">
<style>
.reveal h1 { color: #2d3748; }
.metric { font-size: 3em; color: #3182ce; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-color="#f7fafc">
<h1>Introducing</h1>
<h2 style="color: #3182ce;">ProductX 2.0</h2>
</section>
<section>
<h2>The Problem</h2>
<p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>
</section>
<section data-auto-animate>
<h2>Our Solution</h2>
<div data-id="box" style="background: #3182ce; padding: 20px;">
AI-Powered Automation
</div>
</section>
<section data-auto-animate>
<h2>Our Solution</h2>
<div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">
<p>AI-Powered Automation</p>
<p>90% faster</p>
</div>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script>Reveal.initialize();</script>
</body>
</html>
Resources
Ratings
4.7★★★★★57 reviews- ★★★★★Ren Diallo· Dec 28, 2024
html-slides is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Naina Dixit· Dec 16, 2024
Registry listing for html-slides matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Isabella Choi· Dec 4, 2024
Keeps context tight: html-slides is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Chinedu Mensah· Dec 4, 2024
Useful defaults in html-slides — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Chinedu Okafor· Dec 4, 2024
Solid pick for teams standardizing on skills: html-slides is focused, and the summary matches what you get after install.
- ★★★★★Chinedu Diallo· Nov 23, 2024
html-slides has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Lucas Bhatia· Nov 23, 2024
I recommend html-slides for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Rahul Santra· Nov 15, 2024
html-slides reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Ren Menon· Nov 7, 2024
Solid pick for teams standardizing on skills: html-slides is focused, and the summary matches what you get after install.
- ★★★★★Kaira Sethi· Oct 26, 2024
I recommend html-slides for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
showing 1-10 of 57