Install the "html-ppt" agent skill from https://github.com/lewislulu/html-ppt-skill/tree/main into .claude/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add lewislulu/html-ppt-skill --skill html-ppt -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "html-ppt" agent skill from https://github.com/lewislulu/html-ppt-skill/tree/main into .agents/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add lewislulu/html-ppt-skill --skill html-ppt -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "html-ppt" agent skill from https://github.com/lewislulu/html-ppt-skill/tree/main into .cursor/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add lewislulu/html-ppt-skill --skill html-ppt -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "html-ppt" agent skill from https://github.com/lewislulu/html-ppt-skill/tree/main into .gemini/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
skills CLI
$ npx skills add lewislulu/html-ppt-skill --skill html-ppt -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "html-ppt" agent skill from https://github.com/lewislulu/html-ppt-skill/tree/main into .github/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add lewislulu/html-ppt-skill --skill html-ppt -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "html-ppt" agent skill from https://github.com/lewislulu/html-ppt-skill/tree/main into .opencode/skills/html-ppt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-ppt", then confirm the skill loads.
OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
Skill name
html-ppt
GitHub stars
8.6k
Used in
4 other repos
Token cost
~4.7k tokens
SKILL.md length
1,808 words
Files
268 (incl. scripts, references, assets)
Skills in repo
1
Repo updated
First seen
Licence
MIT
At a glance
Authors static HTML presentations from a library of themes, layouts and animations, with keyboard navigation, for talks, pitch decks and reports.
Works in 3 steps: 不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段 → 每页 150–300 字 — 2–3 分钟/页的节奏 → 用口语，不用书面语 — "因此"→"所以"，"该方案"→"这个方案"
Creating a presentation as a set of static HTML slides
SKILL.md covers Install, What the skill gives you, When to use and Before you author anything —…, plus 10 more sections
Runs JavaScript scripts from its folder; calls npx
What it does
The skill builds slide decks as static HTML files driven by templates: one theme file sets one look, one layout file sets one page type, and one animation class sets one entry effect, all sharing a token-based design system in base.css. It installs with npx skills add or by copying the folder into your agent's skills directory, needs no build step, and renders decks offline, with webfonts falling back to the system stack.
The library holds 36 themes, among them minimal-white, editorial-serif, dracula, nord, swiss-grid and pitch-deck-vc, plus 15 full-deck templates, of which eight come from real decks and seven are scenario scaffolds for pitch decks, product launches, tech sharing, weekly reports, social posts, course modules and a presenter-mode reveal. There are also 36 single-page layouts, including five real-image layouts, 27 CSS animations and 20 canvas effects such as confetti, fireworks and matrix rain, applied through data attributes.
It is meant for presentations, keynotes, sharing documents, pitch decks and Xiaohongshu image-and-text posts that should look tasteful and be usable with keyboard navigation.
When your agent uses it
Creating a presentation as a set of static HTML slides
Choosing a theme and layout for a pitch deck or tech talk
Adding entrance animations or canvas effects to slides
Producing a Xiaohongshu image-and-text post
Example prompts
“Make a pitch deck in the pitch-deck-vc theme for our seed round, with keyboard navigation.”
“Build a weekly report deck from this summary using the weekly-report template.”
“Add a confetti effect to the final slide of my launch presentation.”
Requirements
Node.js with npx, for the install command
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
1不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段
2每页 150–300 字 — 2–3 分钟/页的节奏
3用口语，不用书面语 — "因此"→"所以"，"该方案"→"这个方案"
What it can do on your machine
Read from SKILL.md and the folder at commit fd16290. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
HTML PPT Studio loads about 4.7k tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 156 tokens; SKILL.md has 1,808 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~156
When it runs· the whole SKILL.md, loaded when a task matches
~4.7k
With references· SKILL.md plus every file in references/, read only if the agent opens them
~16k
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
Download SKILL.mdSave it as .claude/skills/html-ppt/SKILL.md (or your agent's skills folder). This skill also uses 267 other files; get the full folder from GitHub.
name
html-ppt
description
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".
html-ppt — HTML PPT Studio
Author professional HTML presentations as static files. One theme file = one
look. One layout file = one page type. One animation class = one entry effect.
All pages share a token-based design system in assets/base.css.
One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.
No network on the target machine? Point the CLI at a local copy
(npx skills add ./html-ppt-skill), or just copy this folder into your agent's
skills directory — ~/.claude/skills/html-ppt/ for Claude Code. Decks render
offline; only the webfonts fall back to the system stack. See
README.md.
Keyboard runtime (assets/runtime.js) — arrows, T (theme), A (anim), F/O, S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards), N (notes drawer), R (reset timer in presenter)
Touch navigation — swipe left/right to change slides on phones and tablets
FX runtime (assets/animations/fx-runtime.js) — auto-inits [data-fx] on slide enter, cleans up on leave
Use when the user asks for any kind of slide-based output or wants to turn
text/notes into a presentable deck. Prefer this over building from scratch.
🎤 Presenter Mode (演讲者模式 + 逐字稿)
If the user mentions any of: 演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — use the presenter-mode-reveal full-deck template and write 150–300 words of 逐字稿 in each slide's <aside class="notes">.
Each card is draggable by its header and resizable by the bottom-right corner handle. Card positions/sizes persist to localStorage per deck. A "Reset layout" button restores the default arrangement.
Why the previews are pixel-perfect: each preview is an <iframe> that loads the actual deck HTML with a ?preview=N query param; runtime.js detects this and renders only slide N with no chrome. So the preview uses the same CSS, theme, fonts, and viewport as the audience view — colors and layout are guaranteed identical.
Smooth navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker. The two windows also stay in sync via BroadcastChannel.
Only presenter-mode-reveal is designed from the ground up around the feature with proper example 逐字稿 on every slide.
Keyboard in presenter window: ← → navigate (syncs audience) · R reset timer · Esc close popup.
Keyboard in audience window: S open presenter · T cycle theme · ← → navigate (syncs presenter) · F fullscreen · O overview.
Before you author anything — ALWAYS ask or recommend
Do not start writing slides until you understand three things. Either ask
the user directly, or — if they already handed you rich content — propose a
tasteful default and confirm.
Content & audience. What's the deck about, how many slides, who's
watching (engineers / execs / 小红书读者 / 学生 / VC)?
Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3
candidates based on tone:
Business / investor pitch → pitch-deck-vc, corporate-clean, swiss-grid
Starting point. One of the 15 full-deck templates, or scratch? Point
to the closest templates/full-decks/<name>/ and ask if it fits. If the
user's content suggests something obvious (e.g. "我要做产品发布会" →
product-launch), propose it confidently instead of asking blindly.
Only after those are clear, scaffold the deck and start writing.
Quick start
Scaffold a new deck. From the repo root:bash
./scripts/new-deck.sh my-talk
open examples/my-talk/index.html
Pick a theme. Open the deck and press T to cycle. Or hard-code it
(../assets/ here is a placeholder — use whatever prefix the rest of the
file already uses; new-deck.sh has set it to the right depth):html
Pick layouts. Copy <section class="slide">...</section> blocks out of
files in templates/single-page/ into your deck. Replace the demo data.
Catalog in references/layouts.md.
Add animations. Put data-anim="fade-up" (or class="anim-fade-up") on
any element. On <ul>/grids, use anim-stagger-list for sequenced reveals.
For canvas FX, use <div data-fx="knowledge-graph">...</div> and include
<script src="../assets/animations/fx-runtime.js"></script>.
Catalog in references/animations.md.
Use a full-deck template. Scaffold from it, don't copy it by hand —
the template's ../../../assets/ is relative to its own location, so a
manual copy lands the paths at the wrong depth:bash
./scripts/new-deck.sh my-talk -t pitch-deck
Each folder is self-contained with scoped CSS. Catalog in
references/full-decks.md and gallery at
templates/full-decks-index.html.
Always start from a template. Don't author slides from scratch — copy the
closest layout from templates/single-page/ first, then replace content.
Use tokens, not literal colors. Every color, radius, shadow should come
from CSS variables defined in assets/base.css and overridden by a theme.
Good: color: var(--text-1). Bad: color: #111.
Text on top of an --accent fill is the one people get wrong: it needs
color: var(--accent-ink), because accents here run from #ffffff to
#000000 and no literal ink is readable on all of them.
Don't invent new layout files. Prefer composing existing ones. Only add
a new templates/single-page/*.html if none of the 36 fit.
Putting images on a slide? Start from one of the five image-* layouts and
use .img-frame — see Images below. Never drop a bare <img> into a slide:
an unframed image ignores the slide's height and pushes the rest off the page.
Respect chrome slots..deck-header, .deck-footer, .slide-number
and the progress bar are provided by assets/base.css + runtime.js.
Add a logo declaratively, once. Put data-logo on <body> — don't paste
an <img> into every slide. See Custom logo below.
Keyboard-first. Always include the runtime, e.g.
<script src="../assets/runtime.js"></script>, so the deck supports
← → / T / A / F / S / O / hash deep-links.
Never hand-edit the ../ depth in asset paths. Every assets/ reference
is relative to the file that holds it: templates/deck.html uses
../assets/, templates/single-page/*.html use ../../assets/, and
templates/full-decks/*/index.html use ../../../assets/. Copying a file to
a new depth silently breaks all of them. Scaffold with
./scripts/new-deck.sh <name> [parent] [-t <template>], which computes the
prefix for wherever the deck lands and verifies every reference resolves.
One .slide per logical page.runtime.js makes .slide.is-active
visible; all others are hidden.
Supply notes. Wrap speaker notes in <div class="notes">…</div> inside
each slide. Press S to open the overlay.
NEVER put presenter-only text on the slide itself. Descriptive text like
"这一页展示了……" or "Speaker: 这里可以补充……" or small explanatory captions
aimed at the presenter MUST go inside <div class="notes">, NOT as visible
<p> / <span> elements on the slide. The .notes class is display:none
by default — it only appears in the S overlay. Slides should contain ONLY
audience-facing content (titles, bullet points, data, charts, images).
Images
Five layouts in templates/single-page/ take real images. Pick by how many
images the page has to carry:
I have…
Use
Why
one screenshot / diagram / chart
image-single.html
.img-frame.contain — letterboxed, never cropped
one photo that should carry the page
image-full-bleed.html
fills the slide, gradient scrim keeps the title readable
one image plus an argument
image-text-split.html
50/50; add flip to .split to move the image right
3–6 images
image-gallery.html
uniform grid; mixed source ratios are normalised by the frame
a before and an after
image-compare.html
both sides identical size, conclusion under each
image-grid.html and image-hero.html are not in this list: they are
gradient-placeholder layouts with no <img> at all. Reach for them when you
want the shape of a bento wall without supplying pictures.
All five are built on one primitive from assets/base.css:
.img-frame owns the aspect ratio and the crop; the <img> fills it with
object-fit: cover. That's what lets a user swap in a photo of any shape
without the layout breaking.
.img-frame.contain letterboxes instead of cropping — always use it for
screenshots, diagrams and logos.
--img-ratio (default 16/10) and --img-pos (object-position) tune it.
.img-scrim / .img-cap / .img-tag are the scrim, caption and corner pill.
Images referenced from a deck are resolved relative to the deck's own
index.html — keep them in the deck folder, e.g. examples/my-talk/shot.png.
assets/demo-images/ holds the placeholder artwork used by these layouts:
hand-written SVG, ~1 KB each, no network needed.
Custom logo
To brand a deck with a company / product logo, declare it once on <body>:
This path needs no JS at all — base.css styles both the same way.
The logo shows in the presenter preview, and on every page of a
print/PDF export (unlike the header/footer/progress chrome, which print
hides). data-no-logo slides are skipped there too. Per-page printing is
painted by runtime.js + @media print; a deck that omits the runtime still
gets the logo on screen, but only on one page of a PDF.
Writing guide
See references/authoring-guide.md for a
step-by-step walkthrough: file structure, naming, how to transform an outline
into a deck, how to choose layouts and themes per audience, how to do a
Chinese + English deck, and how to export.
html-ppt/
├── SKILL.md (this file)
├── references/ (detailed catalogs, load as needed)
├── assets/
│ ├── base.css (tokens + primitives — do not edit per deck)
│ ├── demo-images/*.svg (tiny offline placeholders for the image-* layouts)
│ ├── fonts.css (webfont imports)
│ ├── runtime.js (keyboard + presenter + overview + theme cycle)
│ ├── themes/*.css (36 token overrides, one per theme)
│ └── animations/
│ ├── animations.css (27 named CSS entry animations)
│ ├── fx-runtime.js (auto-init [data-fx] on slide enter)
│ └── fx/*.js (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│ ├── deck.html (minimal 6-slide starter)
│ ├── theme-showcase.html (36 slides, iframe-isolated per theme)
│ ├── layout-showcase.html (iframe tour of all 36 layouts)
│ ├── animation-showcase.html (20 FX + 27 CSS animation slides)
│ ├── full-decks-index.html (gallery of all 15 full-deck templates)
│ ├── full-decks/<name>/ (15 scoped multi-slide deck templates)
│ └── single-page/*.html (36 layout files with demo data)
├── scripts/
│ ├── new-deck.sh (scaffold a deck from deck.html)
│ └── render.sh (headless Chrome → PNG)
└── examples/demo-deck/ (complete working deck)
Rendering to PNG
scripts/render.sh wraps headless Chrome at
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome. For multi-slide
capture, runtime.js exposes #/N deep-links, and render.sh iterates 1..N.
bash
./scripts/render.sh templates/single-page/kpi-grid.html # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir # 8 slides, custom dir
Keyboard cheat sheet
← → Space PgUp PgDn Home End navigate
swipe left / right (touch) navigate — phones and tablets, no keyboard needed
F fullscreen
S open presenter window (magnetic cards: current/next/script/timer)
N quick notes drawer (bottom overlay)
R reset timer (in presenter window)
?preview=N URL param — force preview-only mode (single slide, no chrome)
O slide overview grid
T cycle themes (reads data-themes attr)
A cycle demo animation on current slide
#/N in URL deep-link to slide N
Esc close all overlays
We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 4 other GitHub owners. This page covers the copy in lewislulu/html-ppt-skill, which our catalogue first saw on October 7, 2026.
HTML PPT Studio next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
HTML PPT Studio compared with similar skills
Skill
Stars
Used in
Tokens
Auto-check
Licence
Repo updated
HTML PPT Studio this skilllewislulu/html-ppt-skill
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
Turns popular-science text into an animated slide-style single-page HTML presentation, or restyles it as a flat-UI flowchart, using templates built into the skill.
Generates single-file HTML slide decks with horizontal paging, WebGL backgrounds and a presenter view, in an editorial-magazine style or a Swiss-style layout.
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content.
Authors static HTML presentations from a library of themes, layouts and animations, with keyboard navigation, for talks, pitch decks and reports. css. It installs with npx skills add or by copying the folder into your agent's skills directory, needs no build step, and renders decks offline, with webfonts falling back to the system stack.
When should I use HTML PPT Studio?
HTML PPT Studio fits situations like: creating a presentation as a set of static HTML slides; choosing a theme and layout for a pitch deck or tech talk; adding entrance animations or canvas effects to slides; producing a Xiaohongshu image-and-text post.
How do I install HTML PPT Studio in Claude Code?
Run `npx skills add lewislulu/html-ppt-skill --skill html-ppt -a claude-code`. Or copy the skill folder (the lewislulu/html-ppt-skill repository) into .claude/skills/html-ppt in your project. Claude Code loads it when a task matches its description.
How do I install HTML PPT Studio in Codex?
Run `npx skills add lewislulu/html-ppt-skill --skill html-ppt -a codex`. Or copy the skill folder (the lewislulu/html-ppt-skill repository) into .agents/skills/html-ppt in your project. Codex loads it when a task matches its description.
Can I use HTML PPT Studio in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lewislulu/html-ppt-skill --skill html-ppt -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-ppt, .gemini/skills/html-ppt, .github/skills/html-ppt and .opencode/skills/html-ppt in your project.
What does HTML PPT Studio need to run?
Going by SKILL.md and its folder, HTML PPT Studio needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: Node.js with npx, for the install command.
Does HTML PPT Studio access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is HTML PPT Studio safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does HTML PPT Studio use?
HTML PPT Studio is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does HTML PPT Studio use?
About 4.7k tokens (SKILL.md is roughly 19k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.
What are the alternatives to HTML PPT Studio?
Skills that share tags, products or a category with HTML PPT Studio: Frontend Slides (zarazhangrui/frontend-slides, 30k stars), Science Content Slide Pages (Unclecheng-li/AI-Animation-Skill, 570 stars), Single-File HTML Slide Decks (op7418/guizang-ppt-skill, 27k stars) and HTML Presentation Structure Guide (shanraisshan/claude-code-best-practice, 67k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HTML PPT Studio?
lewislulu (a GitHub user) maintains it in lewislulu/html-ppt-skill, which has 8,598 GitHub stars. The repository was last updated on September 14, 2026.
Source: lewislulu/html-ppt-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
