What does this skill do, and when should you use it?
dom-to-pptx is a client-side JavaScript library that traverses the DOM, reads each element's computed styles (Flexbox/Grid positions, complex gradients, shadows), and mathematically maps them to native PowerPoint shapes and text boxes — not screenshots — so the exported .pptx is fully editable. Version 2.0.0 adds 20+ element animations and 70+ slide transitions declared via CSS classes and exported as native PowerPoint effects. It ships a headless-browser CLI (dom-to-pptx-exporter) for command-line export and an installer for AI coding agents (Claude Code, Gemini CLI, Windsurf, Cursor). The accompanying Skill bundles a full design methodology — theme engineering, layout rules, style whitelist, pre-export validator — plus 14 sample prompts.
1) Reads .slide containers in an HTML file (default selector, customizable) via a headless browser, measuring each element's final position and computed styles; 2) converts Flexbox/Grid layouts to absolutely-positioned native PPT shapes, parses gradients into vector SVGs, converts CSS Cartesian shadows to PowerPoint's polar-coordinate shadows, and de-halos rounded images with Canvas masking; 3) auto-detects and embeds web fonts so slides render identically on any machine; 4) converts CSS animation classes (fade-in, fly-in, etc.) into native PowerPoint animations and transition classes into slide-to-slide transitions; 5) outputs .pptx from the command line via npx dom-to-pptx-exporter with options for custom slide size, metadata, and single-slide export; 6) the Skill itself guides an AI to generate 'Atmospheric UI' premium slide HTML and run the window.validateSlides() pre-export check.
- Frontend developers who need one-click, high-fidelity, editable PPT export from a web app (React/Vue/vanilla JS)
- Engineers using AI coding agents (Claude Code, Cursor, Gemini CLI, Windsurf) who want prompt-generated decks that outclass typical AI slide tools
- Teams needing batch or automated PPTX generation via headless CLI export in scripts or CI
- Creators of investor pitches, product launches, or academic lectures who want bento grids and glassmorphism layouts
- Presenters who need speaker notes and click-driven animation choreography baked into their slides
How do you install this skill?
- Templates and scripts rely on unpinned dependencies (@latest from cdn.jsdelivr.net and unversioned npx), posing supply-chain and behavior-drift risk; pin specific versions.
- Core function depends on overseas services (jsDelivr, Google Fonts, Unsplash); in mainland-China networks font loading, CDN scripts, and images may fail, degrading export fidelity.
- Static review did not execute the export pipeline; claims of pixel-accurate conversion and animation export are unverified — run a small pilot before critical use.
- Publisher is unverified; prompts encourage using internet images, so review copyright/licensing of generated content.
- Prompts reference an 'export button + validator' in the template while the safe template uses CLI export — a minor inconsistency; follow the actual template.
- Shell / CLI
- Network access
- Local filesystem
Node.jsnpm/npxdom-to-pptx-exporter CLIheadless browser for CLI export
As a library: npm install dom-to-pptx. As a Skill: run npx dom-to-pptx-skills; the interactive installer scans agent directories (Claude Code, Gemini CLI, Windsurf, Cursor) and configures prompt templates automatically. The Skill file lives at skills/dom-to-pptx-skill/SKILL.md with reference files under reference/. Exact manual copy steps for the Skill folder are not documented in the source.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/atharva9167j/dom-to-pptx.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/dom-to-pptx-skill" ~/.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?
Once installed, send your agent any of these to trigger it:
- Create a Q3 pitch deck using the dom-to-pptx skill.
Full-deck CLI export: npx dom-to-pptx-exporter presentation.html -o presentation.pptx. Single slide: npx dom-to-pptx-exporter presentation.html -s "#slide-2" -o slide2-only.pptx. Optional flags: --width/--height (inches), --no-pseudo (skip pseudo-elements), --title/--author (metadata). Browser usage: import { exportToPptx } from 'dom-to-pptx' and pass a selector or array of elements; declare animations via CSS classes (e.g. class="fade-in animate-duration-[1000]") and preview with domToPptx.applyBrowserAnimations(). Build HTML at 1920x1080; the library auto-scales to 16:9. To trigger an AI agent, prompt something like: 'Create a Q3 pitch deck using the dom-to-pptx skill.'
What are this skill's strengths and limitations?
- Output is fully editable (vector shapes + text boxes), unlike screenshot-based converters
- Runs entirely client-side, no server; 230k+ monthly npm downloads claimed
- v2 exports native PowerPoint animations (20+) and slide transitions (70+) from plain CSS classes
- High visual fidelity: auto font embedding, vector gradient parsing, polar-coordinate shadow math, halo-free rounded images
- Comes with design philosophy docs, style/animation whitelists, a runnable validator, and 14 sample prompts — lowering export failure risk
- Network-dependent: CDN stylesheets, images, and fonts need correct CORS headers, or fonts fall back to Arial and image processing fails
- It measures final positions rather than reading Flexbox/Grid definitions, so highly dynamic layouts may drift
- Slide transitions cannot be previewed in-browser (they export correctly but are harder to debug)
- The '230k+ monthly downloads' claim is marketing copy; the repo shows no test suite, and real-world results on each AI-agent platform are independently unverified
- SVG vector export requires svgAsVector: true plus a manual 'Convert to Shape' step inside PowerPoint
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 |
|---|---|---|---|---|
| dom-to-pptx this page | 49 · Use with care | ★ 379 | 1mo ago | MIT |
| PPT Master | 64 · Recommended | ★ 62k | 11d ago | MIT |
| HTML Slide to PPTX Converter | 54 · Use with care | ★ 648 | 1mo ago | — |
| PPTX Presentation Skill ✓ Anthropic · Official | 54 · Use with care | ★ 181k | 16d ago | — |
| PPT Agent | 53 · Use with care | ★ 910 | 4mo ago | NOASSERTION |
The README explicitly states that most HTML-to-PPTX libraries fail on gradients/rounded corners or simply take a (non-editable) screenshot; dom-to-pptx differentiates itself via its coordinate-scraper + style-engine approach and is built on top of PptxGenJS, which it extends. Screenshot-based converters are the implied alternative, though none are named specifically.
How did FollowSkills review this skill?
The skill is minimally privileged: it generates HTML and invokes an npx exporter, with no sensitive-data access or covert exfiltration; data flows (CDN scripts, Google Fonts, Unsplash images) are largely visible. However, dependencies are unpinned (@latest CDN, npx package), supply-chain/network dependencies are not fully disclosed, and there is no rollback or confirmation mechanism; publisher identity is unverified, so high marks are withheld.
Internally self-consistent documentation: the safe template, style whitelist, validator, and sample prompts align, constraints are explicit (px units, no transforms), and failure modes (CORS images, font embedding) are documented. But this is a static review with no test suite or CI evidence covering key paths; browser differences (Firefox CORS) are only mentioned verbally, so scores stay at or below 10.
The scenario is clear (high-fidelity, editable PPTX generation), capability boundaries are explicitly declared via whitelists, and trigger conditions match name/description well. However, there is no Chinese-language support, and core function depends on overseas services (jsDelivr, Google Fonts, Unsplash) with questionable mainland-China reachability, warranting deduction.
Good layered information architecture (SKILL.md plus nine reference files with progressive disclosure), ample examples and FAQs, thorough known-limitation disclosure via whitelists, and a clear MIT license. But versioning relies on npm @latest rather than pinned versions, and maintenance ownership, update path, and changelog are not stated in the skill files.
The target output (directly usable .pptx) is concretely described and the workflow is complete (generate → validate → export), with plausible marginal value (pixel-accurate conversion plus native animations). But static review cannot confirm outputs are directly usable, no representative outputs are verified, and comparative benefit over alternatives lacks evidence, keeping the score at or below 7.
The whitelist claims to be distilled from dom-to-pptx source and provides an audit method (rg search of utils.js), giving a traceable derivation path. But there is no test reproduction, third-party execution evidence, or cross-source corroboration; effectiveness claims remain author assertions, earning only base points.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →