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.
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.
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.
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.
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.
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.
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.
- 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.
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.
- 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
What are this skill's strengths and limitations?
- 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
- 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 do you install this skill?
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).
How do you use this skill?
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.
How does this skill compare with similar options?
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.