html-slides Skill (claude-office-skills): reveal.js Decks

Makes Claude build reveal.js slide decks as plain HTML files, for anyone who wants web slides without a presentation app.

Installs: 14.4K; on skills.sh
Stars: 556; on GitHub
Updated: Jan 2026; last repo commit

html-slides gives Claude a cheat sheet for reveal.js, the web slide framework. You describe the talk, the theme and the effects you want, and Claude writes the HTML for a deck. The file covers themes, transitions, fragment animations, code highlighting, speaker notes, backgrounds and the main config options.

It bundles one file and no scripts,. The example decks load reveal.js from a public CDN, so the slides need an internet connection when you open them.

Good for

Developers giving a tech talk with highlighted code
Anyone who wants slides as a single HTML page they can share
Presenters who want speaker notes, transitions and animations

Install html-slides

Claude Code

Copy this prompt.

Install the html-slides skill in Claude Code. Run this command:

npx skills add https://github.com/claude-office-skills/skills --skill html-slides

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

>

Sections in SKILL.md

Overview
How to Use
Domain Knowledge
reveal.js Basics
Slide Structure
Themes
Transitions
Fragments (Animations)
Code Highlighting
Speaker Notes
Backgrounds
Configuration
Examples
Example 1: Tech Talk
Example 2: Product Launch
Resources

Key facts

Author: claude-office-skills
Repository: claude-office-skills/skills
Installs on skills.sh: 14,358 as of 2026-11-02
GitHub stars: 556 for the whole claude-office-skills/skills repo
License: MIT (SKILL.md frontmatter)
Last repo commit: 2026-01-31
What is inside: 1 file: SKILL.md. It has no scripts.
Output: One HTML file that loads reveal.js 4 from cdn.jsdelivr.net, per the examples in SKILL.md

What it includes

Describe the talk, pick theme and features, get a deck
Three steps: describe the presentation, say which theme, transitions and features you need, and Claude generates a reveal.js presentation.
Try: “Build a code walkthrough presentation with syntax highlighting.”
How to use
A minimal HTML page that loads reveal.js 4 from a CDN
The starting template links the reveal.js 4 stylesheet, theme and script from cdn.jsdelivr.net, so opening the deck in a browser fetches them.
Network · reveal.js basics
Horizontal, vertical and Markdown slides
Shows side-by-side slides, nested slides that move down, and slides written in Markdown inside a section.
Slide structure
11 built-in themes, from black to moon
Lists black, white, league, beige, sky, night, serif, simple, solarized, blood and moon.
Themes
none, fade, slide, convex, concave or zoom
Sets the slide transition, its speed and the background transition.
Transitions
Step-by-step reveals with 10 listed effects
Lists fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, highlight-red, highlight-blue, highlight-green and strike.
Fragments
Code blocks with line-by-line highlight steps
Uses data-line-numbers to step through lines of a code block.
Code highlighting
Notes you open with the S key
Puts notes in an aside element on the slide. Pressing S in the deck shows them.
Speaker notes
Color, image, video and gradient backgrounds
Shows the data-background attributes for each type.
Backgrounds
Controls, progress bar, slide numbers, timing and size
Lists Reveal.initialize options such as controls, hash, autoSlide, width, height and plugins.
Configuration
A tech talk deck and a product launch deck
Full HTML for an API design talk with a vertical section and highlighted code, and for a product launch with auto-animate.
Two worked examples

From the official docs

Permissions

Low risk

The skill itself bundles no scripts, but the decks it writes load reveal.js from a public CDN when opened.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Decks load code from a public CDN
The example HTML links scripts and styles from cdn.jsdelivr.net. For private talks, host reveal.js yourself before sharing the file. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode is described. The skill bundles one SKILL.md and no scripts.
Talks to	Opening a generated deck fetches reveal.js and its themes from cdn.jsdelivr.net
Sign-in and keys	No account or key is mentioned in SKILL.md.
Data retention	The deck is a file you save.
Scopes	Claude writes an HTML file for you; the skill bundles no scripts

Questions

What does the html-slides skill do?

It teaches Claude to write presentations as reveal.js HTML. You get a single web page with slides, transitions, code highlighting and speaker notes, not a PowerPoint file.

How do I install html-slides?

Use the install box at the top of this page. The skill is one SKILL.md file inside the claude-office-skills/skills repo, so there is nothing else to set up.

Does it make PowerPoint files?

No. The instructions describe reveal.js HTML only. The metadata at the top of the file lists an office-mcp server with a pptx_to_html tool, but the instructions below it do not use it.

How do I make Claude use it?

Ask for a web presentation or reveal.js deck, or name the skill in your prompt. The description field in the file contains only a ">" character, so automatic matching has little text to work with. Naming the skill is our advice, not something the repo states.

Do the slides work offline?

Not as written. The example decks load reveal.js and its themes from cdn.jsdelivr.net. To use them offline you would need to download reveal.js and point the links at your copy.

Is the html-slides skill safe?

It bundles no scripts. The slides Claude writes pull reveal.js from a public CDN when you open them in a browser, and the deck content is whatever you ask Claude to write.

Information

updated Nov 2, 2026

Repository: claude-office-skills/skills
Folder: html-slides

claude-office-skills/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 1

html-slides SKILL.md · github.com