Productivity & Collaboration

Reveal.js Presentation Skill

Turns a coding agent into a slide generator that produces polished reveal.js HTML decks you can open directly in a browser — no build step.

53/ 100
Use with care

Useful, but reliability, evidence or controls still have material gaps.

See how it was scored ↓
Works as-is in
Codex · Claude Code
Stars
★ 415
Last updated
5mo ago
License
MIT
revealjshtml-presentationschartjscss-theming
+4decktapepuppeteerslide-scaffoldingfont-awesome

What does this skill do, and when should you use it?

This is a coding agent skill for Claude Code that generates professional reveal.js HTML presentations from natural-language requests. It plans the slide structure, scaffolds the HTML and CSS, applies content-informed color palettes and typography, and then runs automated overflow checks plus per-slide screenshot review. The output runs in any browser and can also be exported as PDF. It is MIT-licensed and installable either as a plugin or by copying the skill folder.

Runs a create-presentation.js script to scaffold HTML with placeholders (single slides, vertical stacks, section dividers); generates styles.css with CSS variables for colors and fonts (font sizes must use pt); supports Chart.js charts (reading references/charts.md is mandatory first), Font Awesome icons, multi-column grid layouts, speaker notes, and fragments; detects content overflow with check-overflow.js; captures per-slide screenshots via decktape and requires the agent to visually inspect every one; finally offers edit-html.js so users can click and edit text in the browser.

Good fit
  • A salesperson or analyst who needs a quarterly business review deck with charts quickly
  • A founder preparing a pitch deck for a SaaS startup
  • Users who want editable HTML slides from a plain-language description instead of a PPT file
  • Presenters who want palettes matched to topic and brand rather than default styling
  • Technical teams who need PDF export or per-slide screenshots to verify layout

How do you install this skill?

Before you use it
  • SKILL.md contradicts package./README on the overflow-check tool (Puppeteer vs Playwright); verify the actual environment before installing dependencies.
  • decktape depends on an author-owned fork (github:ryanbbrown/decktape), not the upstream project — supply-chain and maintenance risk.
  • check-charts.js requires cheerio, which is missing from all install instructions in SKILL.md.
  • Core rendering relies on overseas CDNs (jsdelivr, cdnjs, Google Fonts) that may be unreachable from mainland China; edit-html.js runs a fixed local server on port 3456 and overwrites files on save without confirmation — back up first.
  • Publisher is unverified by the FollowSkills registry and there is no changelog, so long-term maintenance status is unknown.
Before you start
Your agent needs
  • Shell / CLI
  • Network access
  • Local filesystem
Install first
  • Node.js
  • Puppeteer (overflow checking)
  • Decktape (screenshots/PDF export)
  • Cheerio (Chart.js validation)

Option 1 (recommended): in Claude Code run /plugin marketplace add ryanbbrown/revealjs-skill, then /plugin install revealjs@revealjs-skill, then npm install --prefix ~/.claude/plugins/cache/revealjs. Option 2 (manual): copy the skills/revealjs folder into ~/.claude/skills/ (user-level) or .claude/skills/ (project-level) and run npm install there. Dependencies include Puppeteer (overflow checking), Decktape (screenshots/PDF export), and Cheerio (Chart.js validation).

Generic route: install into Claude Code manually (macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/ryanbbrown/revealjs-skill.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/revealjs" ~/.claude/skills/
rm -rf "$tmp"

Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.

How do you use this skill?

Try saying

Once installed, send your agent any of these to trigger it:

  • Create a 10-slide presentation about renewable energy trends
  • Make a pitch deck for a SaaS startup.

After installation, simply ask in natural language, e.g. "Create a 10-slide presentation about renewable energy trends" or "Make a pitch deck for a SaaS startup." The agent will plan structure, choose a palette, generate HTML/CSS, check for overflow, and review screenshots of every slide. Afterwards run node <path>/scripts/edit-html.js <directory>/presentation.html to click-edit text in the browser; use the ?export query parameter to disable chart animations for clean PDF rendering.

What are this skill's strengths and limitations?

Pros
  • No build step — the generated HTML opens directly in a browser and exports to PDF
  • Scaffold script saves tokens by avoiding LLM-generated boilerplate
  • Automated overflow detection is faster and more reliable than manual screenshot hunting
  • Includes 18 example palettes plus content-driven color guidance to avoid generic defaults
  • Browser-based click-to-edit script makes post-generation copy tweaks easy
Limitations
  • Requires a local toolchain of Node.js, Puppeteer, and Decktape — nontrivial setup
  • Mandatory screenshot review of every slide makes long decks slow to generate
  • README and SKILL.md are inconsistent on dependencies (Playwright vs Puppeteer); the repo has no Topics and no test suite
  • Outputs reveal.js HTML only — no .pptx or other traditional formats

How does this skill compare with similar options?

Side by side with related skills; every score comes from the same FSRS standard.

Skill FS score Stars Last updated License
Reveal.js Presentation Skill this page 53 · Use with care ★ 415 5mo ago MIT
PPT Agent 53 · Use with care ★ 910 4mo ago NOASSERTION
slides-grab Export Skill 56 · Use with care ★ 1.2k 1mo ago MIT
dom-to-pptx 49 · Use with care ★ 379 1mo ago MIT
HTML Slide to PPTX Converter 54 · Use with care ★ 648 1mo ago —

The skill is explicitly built on the open-source Reveal.js framework (revealjs.com), adding agent-friendly capabilities such as scaffold generation, CSS-variable theming, overflow detection, and a chart export mode. The source material names no competing products.

How did FollowSkills review this skill?

FollowSkills review · FSRS-2.0
Use with care
53/ 100 5-point scale 2.7 / 5
1Trust17 / 25 · 3.4/5

Scripts only read/write local files; edit-html.js includes a path-traversal guard (filePath.startsWith(baseDir)); no network exfiltration or credential access, consistent with least privilege. However, the /save endpoint overwrites the user's HTML file without confirmation, there is no backup/rollback mechanism, and the skill depends on multiple third-party CDNs plus an author-owned GitHub fork of decktape, leaving dependency provenance only partially transparent.

2Reliability9 / 20 · 2.3/5

Core scripts (create-presentation, check-overflow, check-charts) are internally consistent with argument validation and readable error output. But there is a clear contradiction: SKILL.md says overflow checking uses Puppeteer while package./README declare Playwright — different APIs, so following the docs may fail outright. check-charts.js requires cheerio, which is absent from all install instructions in SKILL.md; decktape relies on an author's private fork with non-upstream flags. Deductions: doc/dependency inconsistency, private fork, missing cheerio install note.

3Adaptability8 / 15 · 2.7/5

The description gives clear semantic triggers (slides, presentation, deck, slideshow) and bounds ('HTML with no build step'). But non-fit ranges (e.g. no PPTX output) are undeclared, there is no Chinese-language support statement, and core rendering depends entirely on overseas CDNs (jsdelivr, cdnjs, Google Fonts), which may be unreachable from mainland-China networks, degrading charts/fonts/icons.

4Convention9 / 15 · 3.0/5

MIT license is clear, documentation is well layered (SKILL.md plus progressive-disclosure references), scripts embed help text and examples. But there is no versioning/changelog beyond a static 1.0.0, no stated maintenance responsibility or update path, no FAQ or known-limitations section, and README dependency claims contradict SKILL.md.

5Effectiveness6 / 15 · 2.0/5

The workflow is complete (scaffold → fill → overflow check → screenshot review → browser editing), output is directly openable HTML, and marginal value is plausible (structured scaffolding plus automated validation beats hand-writing). But a static review cannot verify real output quality; the screenshot step depends on an external decktape fork and browser tooling, and the only representative result is an author-supplied external link.

6Verifiability4 / 10 · 2.0/5

All source and scripts are auditable in-repo and claims largely match implementation. But there are no committed tests, no CI execution evidence, the demo is an external link unverifiable in static review, and some README feature claims (dynamic viewport color) have no visible counterpart in the provided sources.

1 2 3 4 5 6

Open a dimension to read why it scored that way

Reviewed Sep 10, 2026 Reviewed revision d0ccd344c4aa Review evidence[1][2][3][4][5][6][7][8][9][10]

Evidence confidence:Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.

See the full review method →

FAQ

Can it export PowerPoint files?
No. Output is a standard HTML presentation that decktape can export to PDF; the source mentions no .pptx support.
Does it need internet access at runtime?
Yes. Presentations load reveal.js from a CDN, palettes can @import Google Fonts, and screenshot export uses npx decktape — all require network.
How do I fix wording after generation?
Run node scripts/edit-html.js presentation.html to start a local server; click any text to edit inline, click Save to write back, and press Ctrl+C to stop.
Any constraints on charts?
Charts use the bundled Chart.js plugin. SKILL.md requires reading references/charts.md before adding any chart, and charts must sit in flexbox containers with maintainAspectRatio: false to avoid overflow.

Related skills