| name | html-slides |
| description | Create interactive HTML presentations using reveal.js - the web's most popular presentation framework |
| author | claude-office-skills |
| version | 1.0 |
| tags | ["presentation","reveal.js","html","slides","interactive"] |
| models | ["claude-sonnet-4","claude-opus-4"] |
| tools | ["computer","code_execution","file_operations"] |
| library | {"name":"reveal.js","url":"https://github.com/hakimel/reveal.js","stars":"70.5k"} |
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
<section>Slide 1</section>
<section>Slide 2</section>
<section>
<section>Vertical 1</section>
<section>Vertical 2</section>
</section>
<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',
transitionSpeed: 'default',
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
<section data-background-color="#4d7e65">
<section data-background-image="image.jpg" data-background-size="cover">
<section data-background-video="video.mp4">
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
Configuration
Reveal.initialize({
controls: true,
controlsTutorial: true,
progress: true,
slideNumber: true,
hash: true,
respondToHashChanges: true,
history: true,
keyboard: true,
overview: true,
center: true,
touch: true,
loop: false,
rtl: false,
shuffle: false,
autoSlide: 0,
autoSlideStoppable: true,
width: 960,
height: 700,
margin: 0.04,
minScale: 0.2,
maxScale: 2.0,
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>Engineering Team
Agenda
RESTful Principles
Authentication
Error Handling
Documentation
RESTful Principles
Resource Naming
GET /users # Collection
GET /users/123 # Single resource
POST /users # Create
PUT /users/123 # Update
DELETE /users/123 # Delete
Questions?
api-team@company.com
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=>ProductX 2.0
The Problem
Teams waste 20% of time on manual tasks
Our Solution
AI-Powered Automation
Our Solution
AI-Powered Automation
90% faster
Reveal.initialize();
Resources
