revealjs-skill

A Claude Code skill for creating polished, professional Reveal.js HTML presentations using natural language.

View Example Presentation

Allows for:

• Professional themes and color palettes
• Multi-column layouts
• Callout boxes and styled components
• Chart.js integration for data visualization
• Font Awesome icons
• Speaker notes
• Animations and transitions
• Custom CSS styling

No build step required - just open the generated HTML in a browser. Can also be exported as a PDF.

Installation

Copy the skills/revealjs folder to your Claude Code skills directory:

# User-level installation (available in all projects)
cp -r skills/revealjs ~/.claude/skills/

# Or project-level installation
cp -r skills/revealjs .claude/skills/

Install dependencies (needed for overflow checking and PDF export):

npm install

• Playwright - Browser automation for overflow detection
• DeckTape - PDF export and slide screenshots (using a fork that adds --slides flag for capturing specific slides, enabling faster iteration when fixing visual issues)
• Cheerio - HTML parsing to validate generated Chart.js

Usage

Once installed, simply ask Claude Code to create a presentation:

"Create a 10-slide presentation about renewable energy trends"

"Make a pitch deck for a SaaS startup"

"Build a quarterly business review presentation with charts"

Claude Code will:

1. Plan the slide structure based on your content
2. Choose an appropriate color palette and design
3. Generate the HTML and CSS files
4. Check for content overflow
5. Review screenshots of every slide for visual issues

Features

Beyond base Reveal.js, this skill adds:

• Custom CSS theme - CSS variables for easy customization of colors, typography, callouts, and layout without modifying core styles
• Scaffold generation - Scaffolding script generates HTML structure so the LLM doesn't waste tokens recreating boilerplate
• Overflow detection - Automated checking catches content that extends beyond slide boundaries, faster than taking and reviewing screenshots
• Chart export mode - ?export query parameter disables Chart.js animations so charts render fully in PDF/screenshots
• Dynamic viewport color - Viewport background color matches each slide's background for seamless full-screen presentation