Revealjs Skill

revealjs-skill

A Claude Code skill for creating polished, professional [Reveal.js](https://revealjs.com/) HTML presentations using natural language.

**[View Example Presentation](https://ryanbbrown.com/revealjs-skill/examples/revealjs/presentation.html)**

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

Plugin (recommended)

Add the marketplace and install the plugin from within Claude Code:

/plugin marketplace add ryanbbrown/revealjs-skill
/plugin install revealjs@revealjs-skill

Then install dependencies (needed for overflow checking and PDF export):

npm install --prefix ~/.claude/plugins/cache/revealjs

Manual

Alternatively, 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

Dependencies

• 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"

...