html-ppt (lewislulu/html-ppt-skill): a skill that builds HTML slide decks with themes, layouts and presenter mode

The html-ppt skill makes Claude build keyboard-driven HTML slide decks from 36 themes, 36 layouts and 15 full-deck templates, with speaker notes.

Installs: 21.1K; on skills.sh
Stars: 8.9K; on GitHub
Updated: Sep 2026; last commit

The skill makes Claude produce a presentation as static HTML, CSS and JavaScript, not a PowerPoint file. It first asks about content and audience, the theme, and whether to start from one of the 15 full-deck templates, then scaffolds a deck with scripts/new-deck.sh, copies layouts from 36 single-page templates, and fills in your content.

It triggers on requests for a presentation, slides, a deck, a keynote or 幻灯片. The deck runs from the keyboard (arrows, T to cycle themes, F for fullscreen, O for overview) and works on touch screens. If you mention giving a talk, Claude uses the presenter-mode-reveal template and writes 150 to 300 words of speaker script per slide. Pressing S opens a presenter window with the current slide, next slide, script and timer.

The themes, layouts and canvas effects are bundled. SKILL.md says decks render offline, with only the webfonts falling back to system fonts. PNG export uses a script that calls Google Chrome on macOS.

Good for

Engineers and teams making a tech talk or weekly report
Founders making a pitch or product launch deck
Chinese-language creators making Xiaohongshu image posts or decks with speaker scripts

Install html-ppt

Claude Code

Copy this prompt.

Install the html-ppt skill in Claude Code. Run this command:

npx skills add https://github.com/lewislulu/html-ppt-skill --skill html-ppt

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".

Sections in SKILL.md

Install
What the skill gives you
When to use
🎤 Presenter Mode (演讲者模式 + 逐字稿)
Before you author anything — ALWAYS ask or recommend
Quick start
Authoring rules (important)
Images
Custom logo
Writing guide
Catalogs (load when needed)
File structure
Rendering to PNG
Keyboard cheat sheet
License & author

Key facts

Author: lewis (lewislulu)
License: MIT
Repository: lewislulu/html-ppt-skill
Installs on skills.sh: 21,144 as of 2026-11-02
GitHub stars: 8,933 as of 2026-11-02
Last repo commit: 2026-09-14
Files in the skill folder: 239 files including SKILL.md (themes, layouts, templates, animations, 6 reference guides, 2 scripts and preview images)
skills.sh audits: Gen Agent Trust Hub pass, Socket warn, Snyk pass
Bundled: 36 themes, 36 layouts, 15 full-deck templates, 27 CSS animations, 20 canvas FX
PNG export: scripts/render.sh uses Google Chrome at its macOS path

What it includes

Content, style and starting point
Before writing slides, Claude confirms the audience and page count, proposes 2 or 3 themes by tone, and suggests a full-deck template.
Ask first
Scaffold a deck
Run as `./scripts/new-deck.sh my-talk` or with `-t pitch-deck`. It computes the asset path depth and creates the deck under examples/.
Runs code · scripts/new-deck.sh
One CSS file per look
For example minimal-white, tokyo-night, dracula, catppuccin-mocha, xiaohongshu-white and cyberpunk-neon. Press T to cycle them.
Read · 36 themes
Single-page templates with demo data
Includes 5 image layouts that use a framed image so it never overflows the slide.
Read · 36 layouts
Complete multi-slide decks
8 extracted from real decks and 7 scenario scaffolds such as pitch-deck, product-launch, tech-sharing and weekly-report.
Read · 15 full-deck templates
27 CSS entry effects and 20 canvas FX
Add data-anim or data-fx attributes. Canvas FX include confetti-cannon, knowledge-graph, matrix-rain and neural-net.
Animations
Press S for current, next, script and timer cards
Needs speaker notes in a notes element on each slide. Card positions are saved in the browser's localStorage per deck.
Presenter mode
One data-logo attribute on the body
Sets the logo's position, size and opacity once for the whole deck.
Custom logo
Export slides to PNG with headless Chrome
The script expects Google Chrome at its macOS application path. Loops over slide deep links.
Runs code · scripts/render.sh

From the official docs

Permissions

Low risk

Claude runs two bundled shell scripts that create deck folders and render images with Chrome. Check where the new files land before you share the deck.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Runs two shell scripts that write files
new-deck.sh copies a template into a new deck folder and updates asset paths. render.sh runs headless Google Chrome to write PNG files. Check the output folder before you run them.
Decks load webfonts from a CDN online
SKILL.md says the only network use is CDN webfonts. Offline, the browser falls back to system fonts.

Technical details

Talks to	Webfont CDN, when a deck is opened online

Questions

What does the html-ppt skill do?

It makes Claude build a presentation as a folder of HTML, CSS and JavaScript files. It picks from 36 themes, 36 layouts and 15 full-deck templates, adds animations and speaker notes, and gives you a deck you open in a browser.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box above. SKILL.md documents npx skills add https://github.com/lewislulu/html-ppt-skill, or copying the folder to ~/.claude/skills/html-ppt/ for Claude Code. The README has a manual install table for other agents.

Does it make PowerPoint files?

No. It makes static HTML decks. You export slides as PNG with the render script, which needs Google Chrome at the macOS path, or print the deck to PDF from a browser.

Does it work offline?

SKILL.md says decks render offline and only the webfonts fall back to the system font stack. The themes, layouts, animations and demo images are bundled.

Is it safe to install?

It bundles scripts for scaffolding a deck and exporting PNGs, and it writes new deck folders under examples/ in your project. Decks load webfonts from a CDN when you open them online. SKILL.md also tells Claude to include the runtime script so keyboard navigation works.

Can it write a speaker script?

Yes. If you mention a talk, Claude uses the presenter-mode-reveal template and writes 150 to 300 words per slide in a notes block. Press S in the deck to see it in the presenter window.

Does it work in Chinese?

Yes. The skill's triggers include 幻灯片, 演讲稿 and 小红书图文, and it has Xiaohongshu themes and templates. The authoring guide covers Chinese and English decks.

Information

updated Nov 2, 2026

Repository: lewislulu/html-ppt-skill

lewislulu/html-ppt-skill skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

SKILL.md · github.com
html-ppt-skill README · github.com
render.sh · github.com
new-deck.sh · github.com