What are Claude Code Skills?

Claude Code Skills are reusable prompt templates stored as markdown files in your project's .claude/skills/ directory. They let you codify best practices and common workflows into slash commands that Claude follows consistently.

How do I create a Claude Code Skill?

Create a markdown file in .claude/skills/ with instructions for Claude. The filename becomes the command name — for example, .claude/skills/code-review.md can be invoked with /code-review during a Claude Code session.

Can I share skills with my team?

Yes. Skills stored in .claude/skills/ can be committed to version control so every team member has access to the same standardized workflows. You can also organize skills into subdirectories by category.

What is the difference between project and global skills?

Project skills (.claude/skills/) are specific to the current project and are committed to git. Global skills (~/.claude/skills/) are personal skills available across all your projects.

revealjs

New

333Community RegistryGeneralby Ryan Brown · MIT

Create polished, professional reveal.js presentations with themes, multi-column layouts, callout boxes, code highlighting, animations, speaker notes, and custom styling.

Community PluginView Source

Overview

A coding agent skill for creating polished, professional Reveal.js 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:

code

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

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

bash

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

Manual

Alternatively, copy the skills/revealjs folder to your Claude Code skills directory:

bash

# 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):

bash

npm install

Dependencies

•[Playwright](https://playwright.dev/) - Browser automation for overflow detection
•[DeckTape](https://github.com/astefanutti/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](https://cheerio.js.org/) - 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:

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

Browser Editing

After generating a presentation, you can edit text directly in the browser — no need to touch raw HTML:

bash

node ~/.claude/skills/revealjs/scripts/edit-html.js my-presentation/presentation.html

This opens the presentation in a local server where you can click any text to edit it inline, then click Save to write changes back to the file. Press Escape to deselect a text element. Useful for wordsmithing, fixing typos, or tweaking copy after Claude generates the initial version.

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

Star History

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/revealjs.md https://raw.githubusercontent.com/ryanbbrown/revealjs-skill/main/SKILL.md

Invoke in Claude Code

/revealjs

View source on GitHub

reveal.jspresentationslideshtmlslideshowpresentations

Frequently Asked Questions

What is revealjs?

Create polished, professional reveal.js presentations with themes, multi-column layouts, callout boxes, code highlighting, animations, speaker notes, and custom styling.

How to install revealjs?

To install revealjs, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /revealjs.

What is revealjs best for?

revealjs is a community categorized under General. It is designed for: reveal.js, presentation, slides, html, slideshow, presentations. Created by Ryan Brown.