lewislulu/html-ppt-skill239 files

HTML Ppt

Name: HTML Ppt
Availability: InStock
Author: lewislulu

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".

Use this skill View repository View on skills.sh

Specification

Skill ID: lewislulu/html-ppt-skill/html-ppt
Publisher: lewislulu
Repository: html-ppt-skill
Installs: 0
Files: 239
Synced: Sep 23, 2026

How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

lewislulu/html-ppt-skill/html-pptInstalls these files

.clawscan-allow
.gitignore
LICENSE
README.md
README.zh-CN.md
SKILL.md
assets/animations/animations.css
assets/animations/fx-runtime.js
assets/animations/fx/_util.js
assets/animations/fx/chain-react.js
assets/animations/fx/confetti-cannon.js
assets/animations/fx/constellation.js
assets/animations/fx/counter-explosion.js
assets/animations/fx/data-stream.js
assets/animations/fx/firework.js
assets/animations/fx/galaxy-swirl.js
assets/animations/fx/gradient-blob.js
assets/animations/fx/knowledge-graph.js
assets/animations/fx/letter-explode.js
assets/animations/fx/magnetic-field.js
assets/animations/fx/matrix-rain.js
assets/animations/fx/neural-net.js
assets/animations/fx/orbit-ring.js
assets/animations/fx/particle-burst.js
assets/animations/fx/shockwave.js
assets/animations/fx/sparkle-trail.js
assets/animations/fx/starfield.js
assets/animations/fx/typewriter-multi.js
assets/animations/fx/word-cascade.js
assets/base.css
assets/demo-images/README.md
assets/demo-images/photo-landscape.svg
assets/demo-images/photo-portrait.svg
assets/demo-images/photo-square.svg
assets/demo-images/photo-wide.svg
assets/demo-images/shot-after.svg
assets/demo-images/shot-before.svg
assets/demo-images/shot-ui.svg
assets/fonts.css
assets/runtime.js
assets/themes/academic-paper.css
assets/themes/arctic-cool.css
assets/themes/aurora.css
assets/themes/bauhaus.css
assets/themes/blueprint.css
assets/themes/catppuccin-latte.css
assets/themes/catppuccin-mocha.css
assets/themes/corporate-clean.css
assets/themes/cyberpunk-neon.css
assets/themes/dracula.css
assets/themes/editorial-serif.css
assets/themes/engineering-whiteprint.css
assets/themes/glassmorphism.css
assets/themes/gruvbox-dark.css
assets/themes/japanese-minimal.css
assets/themes/magazine-bold.css
assets/themes/memphis-pop.css
assets/themes/midcentury.css
assets/themes/minimal-white.css
assets/themes/neo-brutalism.css
assets/themes/news-broadcast.css
assets/themes/nord.css
assets/themes/pitch-deck-vc.css
assets/themes/rainbow-gradient.css
assets/themes/retro-tv.css
assets/themes/rose-pine.css
assets/themes/sharp-mono.css
assets/themes/soft-pastel.css
assets/themes/solarized-light.css
assets/themes/sunset-warm.css
assets/themes/swiss-grid.css
assets/themes/terminal-green.css
assets/themes/tokyo-night.css
assets/themes/vaporwave.css
assets/themes/xiaohongshu-white.css
assets/themes/y2k-chrome.css
docs/readme/_theme-cell.html
docs/readme/animations.png
docs/readme/hero.gif
docs/readme/layouts-live.gif
docs/readme/layouts.png
docs/readme/montage-animations.html
docs/readme/montage-layouts.html
docs/readme/montage-templates.html
docs/readme/montage-themes.html
docs/readme/presenter-mode.png
docs/readme/templates.png
docs/readme/themes.png
examples/demo-deck/index.html
references/animations.md
references/authoring-guide.md
references/full-decks.md
references/layouts.md
references/presenter-mode.md
references/themes.md
scripts/new-deck.sh
scripts/render.sh
scripts/verify-output/animation-showcase/animation-showcase_01.png
scripts/verify-output/animation-showcase/animation-showcase_02.png
scripts/verify-output/animation-showcase/animation-showcase_03.png
scripts/verify-output/animation-showcase/animation-showcase_04.png
scripts/verify-output/animation-showcase/animation-showcase_05.png
scripts/verify-output/animation-showcase/animation-showcase_06.png
scripts/verify-output/animation-showcase/animation-showcase_07.png
scripts/verify-output/animation-showcase/animation-showcase_08.png
scripts/verify-output/animation-showcase/animation-showcase_09.png
scripts/verify-output/animation-showcase/animation-showcase_10.png
scripts/verify-output/animation-showcase/animation-showcase_11.png
scripts/verify-output/animation-showcase/animation-showcase_12.png
scripts/verify-output/animation-showcase/animation-showcase_13.png
scripts/verify-output/animation-showcase/animation-showcase_14.png
scripts/verify-output/animation-showcase/animation-showcase_15.png
scripts/verify-output/animation-showcase/animation-showcase_16.png
scripts/verify-output/animation-showcase/animation-showcase_17.png
scripts/verify-output/animation-showcase/animation-showcase_18.png
scripts/verify-output/animation-showcase/animation-showcase_19.png
scripts/verify-output/animation-showcase/animation-showcase_20.png
scripts/verify-output/theme-showcase/theme-showcase_01.png
scripts/verify-output/theme-showcase/theme-showcase_02.png
scripts/verify-output/theme-showcase/theme-showcase_03.png
scripts/verify-output/theme-showcase/theme-showcase_04.png
scripts/verify-output/theme-showcase/theme-showcase_05.png
scripts/verify-output/theme-showcase/theme-showcase_06.png
scripts/verify-output/theme-showcase/theme-showcase_07.png
scripts/verify-output/theme-showcase/theme-showcase_08.png
scripts/verify-output/theme-showcase/theme-showcase_09.png
scripts/verify-output/theme-showcase/theme-showcase_10.png
scripts/verify-output/theme-showcase/theme-showcase_11.png
scripts/verify-output/theme-showcase/theme-showcase_12.png
scripts/verify-output/theme-showcase/theme-showcase_13.png
scripts/verify-output/theme-showcase/theme-showcase_14.png
scripts/verify-output/theme-showcase/theme-showcase_15.png
scripts/verify-output/theme-showcase/theme-showcase_16.png
scripts/verify-output/theme-showcase/theme-showcase_17.png
scripts/verify-output/theme-showcase/theme-showcase_18.png
scripts/verify-output/theme-showcase/theme-showcase_19.png
scripts/verify-output/theme-showcase/theme-showcase_20.png
scripts/verify-output/theme-showcase/theme-showcase_21.png
scripts/verify-output/theme-showcase/theme-showcase_22.png
scripts/verify-output/theme-showcase/theme-showcase_23.png
scripts/verify-output/theme-showcase/theme-showcase_24.png
scripts/verify-output/theme-showcase/theme-showcase_25.png
scripts/verify-output/theme-showcase/theme-showcase_26.png
scripts/verify-output/theme-showcase/theme-showcase_27.png
scripts/verify-output/theme-showcase/theme-showcase_28.png
scripts/verify-output/theme-showcase/theme-showcase_29.png
scripts/verify-output/theme-showcase/theme-showcase_30.png
scripts/verify-output/theme-showcase/theme-showcase_31.png
scripts/verify-output/theme-showcase/theme-showcase_32.png
scripts/verify-output/theme-showcase/theme-showcase_33.png
scripts/verify-output/theme-showcase/theme-showcase_34.png
scripts/verify-output/theme-showcase/theme-showcase_35.png
scripts/verify-output/theme-showcase/theme-showcase_36.png
templates/animation-showcase.html
templates/deck.html
templates/full-decks-index.html
templates/full-decks/course-module/README.md
templates/full-decks/course-module/index.html
templates/full-decks/course-module/style.css
templates/full-decks/dir-key-nav-minimal/README.md
templates/full-decks/dir-key-nav-minimal/index.html
templates/full-decks/dir-key-nav-minimal/style.css
templates/full-decks/graphify-dark-graph/README.md
templates/full-decks/graphify-dark-graph/index.html
templates/full-decks/graphify-dark-graph/style.css
templates/full-decks/hermes-cyber-terminal/README.md
templates/full-decks/hermes-cyber-terminal/index.html
templates/full-decks/hermes-cyber-terminal/style.css
templates/full-decks/knowledge-arch-blueprint/README.md
templates/full-decks/knowledge-arch-blueprint/index.html
templates/full-decks/knowledge-arch-blueprint/style.css
templates/full-decks/obsidian-claude-gradient/README.md
templates/full-decks/obsidian-claude-gradient/index.html
templates/full-decks/obsidian-claude-gradient/style.css
templates/full-decks/pitch-deck/README.md
templates/full-decks/pitch-deck/index.html
templates/full-decks/pitch-deck/style.css
templates/full-decks/presenter-mode-reveal/README.md
templates/full-decks/presenter-mode-reveal/index.html
templates/full-decks/presenter-mode-reveal/style.css
templates/full-decks/product-launch/README.md
templates/full-decks/product-launch/index.html
templates/full-decks/product-launch/style.css
templates/full-decks/tech-sharing/README.md
templates/full-decks/tech-sharing/index.html
templates/full-decks/tech-sharing/style.css
templates/full-decks/testing-safety-alert/README.md
templates/full-decks/testing-safety-alert/index.html
templates/full-decks/testing-safety-alert/style.css
templates/full-decks/weekly-report/README.md
templates/full-decks/weekly-report/index.html
templates/full-decks/weekly-report/style.css
templates/full-decks/xhs-pastel-card/README.md
templates/full-decks/xhs-pastel-card/index.html
templates/full-decks/xhs-pastel-card/style.css
templates/full-decks/xhs-post/README.md
templates/full-decks/xhs-post/index.html
templates/full-decks/xhs-post/style.css
templates/full-decks/xhs-white-editorial/README.md
templates/full-decks/xhs-white-editorial/index.html
templates/full-decks/xhs-white-editorial/style.css
templates/layout-showcase.html
templates/single-page/arch-diagram.html
templates/single-page/big-quote.html
templates/single-page/bullets.html
templates/single-page/chart-bar.html
templates/single-page/chart-line.html
templates/single-page/chart-pie.html
templates/single-page/chart-radar.html
templates/single-page/code.html
templates/single-page/comparison.html
templates/single-page/cover.html
templates/single-page/cta.html
templates/single-page/diff.html
templates/single-page/flow-diagram.html
templates/single-page/gantt.html
templates/single-page/image-compare.html
templates/single-page/image-full-bleed.html
templates/single-page/image-gallery.html
templates/single-page/image-grid.html
templates/single-page/image-hero.html
templates/single-page/image-single.html
templates/single-page/image-text-split.html
templates/single-page/kpi-grid.html
templates/single-page/mindmap.html
templates/single-page/process-steps.html
templates/single-page/pros-cons.html
templates/single-page/roadmap.html
templates/single-page/section-divider.html
templates/single-page/stat-highlight.html
templates/single-page/table.html
templates/single-page/terminal.html
templates/single-page/thanks.html
templates/single-page/three-column.html
templates/single-page/timeline.html
templates/single-page/toc.html
templates/single-page/todo-checklist.html
templates/single-page/two-column.html
templates/theme-showcase.html

What this skill tells the agent

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.

Install

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

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.

What the skill gives you

36 themes (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
15 full-deck templates (templates/full-decks/<name>/) — complete multi-slide decks with scoped .tpl-<name> CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — 演讲者模式专用)
36 layouts (templates/single-page/*.html) with realistic demo data, including 5 real-image layouts (single / full-bleed / image+text / gallery / before-after)
27 CSS animations (assets/animations/animations.css) via data-anim
20 canvas FX animations (assets/animations/fx/*.js) via data-fx — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
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
Showcase decks for themes / layouts / animations / full-decks gallery
Headless Chrome render script for PNG export

When to use

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">.

See references/presenter-mode.md for the full authoring guide including the 3 rules of speaker script writing:

不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段
每页 150–300 字 — 2–3 分钟/页的节奏
用口语，不用书面语 — "因此"→"所以"，"该方案"→"这个方案"

All full-deck templates support the S key presenter mode (it's built into runtime.js). S opens a new popup window with 4 magnetic cards:

🔵 CURRENT — pixel-perfect iframe preview of the current slide
🟣 NEXT — pixel-perfect iframe preview of the next slide
🟠 SPEAKER SCRIPT — large-font 逐字稿 (scrollable)
🟢 TIMER — elapsed time + slide counter + prev/next/reset buttons

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
Tech sharing / engineering → tokyo-night, dracula, catppuccin-mocha, terminal-green, blueprint
小红书图文 → xiaohongshu-white, soft-pastel, rainbow-gradient, magazine-bold
Academic / report → academic-paper, editorial-serif, minimal-white
Edgy / cyber / launch → cyberpunk-neon, vaporwave, y2k-chrome, neo-brutalism

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.

A good opening message looks like:

我可以给你做这份 PPT！先确认三件事： 1. 大致内容 / 页数 / 观众是谁？ 2. 风格偏好？我建议从这 3 个主题里选一个：tokyo-night（技术分享默认好看）、xiaohongshu-white（小红书风）、corporate-clean（正式汇报）。 3. 要不要用我现成的 tech-sharing 全 deck 模板打底？

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 <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css"> `` Catalog in references/themes.md.
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 —

Use this skill in a project

Open any RiverX project, search the Skills panel for lewislulu/html-ppt-skill/html-ppt, and install it in one click.

Use this skill