html-slides
Create interactive HTML presentations using reveal.js - the web's most popular presentation framework
Install
mkdir -p .claude/skills/html-slides && curl -L -o skill.zip "https://mcp.directory/api/skills/download/2416" && unzip -o skill.zip -d .claude/skills/html-slides && rm skill.zipInstalls to .claude/skills/html-slides
About this skill
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>[email protected]</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
More by openclaw
View all skills by openclaw →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
pdf-to-markdown
aliceisjustplaying
Convert entire PDF documents to clean, structured Markdown for full context loading. Use this skill when the user wants to extract ALL text from a PDF into context (not grep/search), when discussing or analyzing PDF content in full, when the user mentions "load the whole PDF", "bring the PDF into context", "read the entire PDF", or when partial extraction/grepping would miss important context. This is the preferred method for PDF text extraction over page-by-page or grep approaches.
Related MCP Servers
Browse all servers
VChartCreate interactive visualizations and charts with VChart, a powerful data analysis tool and pie chart maker for flexible
BlenderConnect Blender to Claude AI for seamless 3D modeling. Use AI 3D model generator tools for faster, intuitive, interactiv
MagicCreate modern React UI components instantly with Magic AI Agent. Integrates with top IDEs for fast, stunning design and
MCP Server ChartEffortlessly create 25+ chart types with MCP Server Chart. Visualize complex datasets using TypeScript and AntV for powe
Markdown MindmapTransform your notes with Markdown Mindmap—convert Markdown into interactive mind maps for organized, visual knowledge r
PowerPointCreate and edit PowerPoint presentations, apply themes, add slides and export to PDF quickly using pptxgenjs and officeg