revealjs

Generate HTML-based reveal.js presentations with custom CSS and Chart.js visualizations.

Updated May 3, 2026
One-click install
npx skills add https://github.com/druejaramillo/skills --skill revealjs-druejaramillo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: revealjs
Source: https://github.com/druejaramillo/skills/tree/main/tools/revealjs
Command: npx skills add https://github.com/druejaramillo/skills --skill revealjs-druejaramillo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, decktape, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the friction of building polished, professional presentations by automating the creation of HTML-based slide decks that require no build steps and are easily editable in the browser.

Core Features & Use Cases

  • Scaffold Generation: Quickly generate complex slide structures, including vertical stacks and section dividers, using a simple command-line interface.
  • Visual Consistency: Enforce professional design standards through centralized CSS variables, ensuring uniform typography, color palettes, and layout patterns across all slides.
  • Data Visualization: Seamlessly integrate interactive charts using Chart.js with pre-configured flexbox patterns that prevent common layout overflow issues.

Quick Start

Use the revealjs skill to create a new presentation titled Q4 Review with a structure of three horizontal slides followed by a section divider and a two-slide vertical stack.

Frequently Asked Questions about revealjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create HTML presentations with reveal.js without manual coding?

You can generate professional HTML presentations by using this tool to automate reveal.js scaffolding, creating complex slide structures like vertical stacks and section dividers without manual coding or build steps. The resulting slides are browser-ready and easily editable.

How do I add charts to a reveal.js slideshow while preventing layout overflow?

To add charts to a reveal.js slideshow without overflow, this tool integrates Chart.js visualizations using pre-configured flexbox patterns. These responsive grid layouts enforce visual consistency and prevent common content overflow issues across diverse slide types.

Do I need Node.js and Puppeteer to generate browser-ready slide decks?

Yes, you need Node.js and Puppeteer to generate browser-ready slide decks. Puppeteer is specifically required for automated overflow validation, while Decktape handles automated screenshot-based visual review to ensure your presentation renders correctly.

What is the best way to enforce professional design standards across presentation slides?

The best way to enforce professional design standards across presentation slides is by using centralized CSS variables. This ensures uniform typography, color palettes, and layout patterns automatically across all generated HTML slides without manual styling adjustments.

Can I build complex slide structures like vertical stacks in an automated presentation workflow?

Yes, you can build complex slide structures like vertical stacks and section dividers in an automated presentation workflow. This tool generates these layouts through a simple command-line interface, supporting diverse content types within a single HTML presentation.

Why does my presentation layout break when adding interactive visualizations, and how can I fix it?

Presentation layouts break when adding interactive visualizations due to unmanaged flexbox overflow. This tool fixes it by validating your presentation with Puppeteer to detect overflow and applying pre-configured flexbox patterns for chart visualizations.