| name | html-ppt-skill |
| description | Build professional HTML presentations with 36 themes, 31 layouts, 47 animations — pure static HTML/CSS/JS, no build step required. |
| triggers | ["create a presentation in HTML","make slides with animations","build a pitch deck HTML","generate HTML PPT with themes","create a slideshow with canvas effects","make a 小红书 style slide deck","scaffold a new HTML presentation","add animations to my HTML slides"] |
html-ppt-skill — HTML PPT Studio
Skill by ara.so — Daily 2026 Skills collection.
A world-class AgentSkill for producing professional HTML presentations using 36 themes, 14 full-deck templates, 31 page layouts, and 47 animations (27 CSS + 20 canvas FX) — all pure static HTML/CSS/JS, zero build step.
Install
npx skills add https://github.com/lewislulu/html-ppt-skill
git clone https://github.com/lewislulu/html-ppt-skill
Scaffold a New Deck
./scripts/new-deck.sh my-talk
Project Structure (Key Paths)
html-ppt-skill/
├── assets/
│ ├── base.css # shared tokens + primitives
│ ├── runtime.js # keyboard nav + presenter + overview
│ ├── themes/*.css # 36 theme token files
│ └── animations/
│ ├── animations.css # 27 named CSS animations
│ ├── fx-runtime.js # auto-init [data-fx] on slide enter
│ └── fx/*.js # 20 canvas FX modules
├── templates/
│ ├── deck.html # minimal starter
│ ├── theme-showcase.html # all 36 themes (iframe-isolated)
│ ├── layout-showcase.html # all 31 layouts
│ ├── animation-showcase.html # 47 animation slides
│ ├── full-decks-index.html # 14-deck gallery
│ ├── full-decks/<name>/ # 14 scoped multi-slide decks
│ └── single-page/*.html # 31 layout files with demo data
└── examples/demo-deck/ # complete working deck
Minimal Deck Template
Every deck follows this structure — assets/base.css + one theme file + runtime.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Talk</title>
<link rel="stylesheet" href="../../assets/base.css" />
<link rel="stylesheet" href="../../assets/themes/tokyo-night.css" />
<link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>
<section class="slide" data-layout="cover">
<div class="slide-content">
<h1 class="animate-on-enter rise-in">My Presentation</h1>
<p class="animate-on-enter fade-up" style="--delay:0.3s">Subtitle goes here</p>
</div>
</section>
<section class="slide" data-layout="bullets">
<div class="slide-content">
<h2>Key Points</h2>
<ul class="stagger-list">
<li>First important point</li>
<li>Second important point</li>
<li>Third important point</li>
</ul>
</div>
</section>
<section class="slide" data-layout="big-quote">
<div class="slide-content">
<blockquote class="animate-on-enter zoom-pop">
"Design is not just what it looks like. Design is how it works."
</blockquote>
<cite>— Steve Jobs</cite>
</div>
</section>
<section class="slide" data-layout="thanks">
<div class="slide-content">
<h1>Thank You</h1>
<p>github.com/yourhandle</p>
</div>
</section>
<script src="../../assets/runtime.js"></script>
<script src="../../assets/animations/fx-runtime.js"></script>
</body>
</html>
Themes (36 total)
Swap the single <link> to change the entire deck's appearance. All themes live in assets/themes/*.css.
<link rel="stylesheet" href="assets/themes/minimal-white.css" />
<link rel="stylesheet" href="assets/themes/editorial-serif.css" />
<link rel="stylesheet" href="assets/themes/soft-pastel.css" />
<link rel="stylesheet" href="assets/themes/academic-paper.css" />
<link rel="stylesheet" href="assets/themes/tokyo-night.css" />
<link rel="stylesheet" href="assets/themes/dracula.css" />
<link rel="stylesheet" href="assets/themes/catppuccin-mocha.css" />
<link rel="stylesheet" href="assets/themes/gruvbox-dark.css" />
<link rel="stylesheet" href="assets/themes/nord.css" />
<link rel="stylesheet" href="assets/themes/neo-brutalism.css" />
<link rel="stylesheet" href="assets/themes/glassmorphism.css" />
<link rel="stylesheet" href="assets/themes/cyberpunk-neon.css" />
<link rel="stylesheet" href="assets/themes/memphis-pop.css" />
<link rel="stylesheet" href="assets/themes/vaporwave.css" />
<link rel="stylesheet" href="assets/themes/corporate-clean.css" />
<link rel="stylesheet" href="assets/themes/pitch-deck-vc.css" />
<link rel="stylesheet" href="assets/themes/swiss-grid.css" />
<link rel="stylesheet" href="assets/themes/xiaohongshu-white.css" />
<link rel="stylesheet" href="assets/themes/japanese-minimal.css" />
<link rel="stylesheet" href="assets/themes/terminal-green.css" />
Browse all 36 themes live: open templates/theme-showcase.html
Layouts (31 total)
Set via data-layout on each <section class="slide">.
<section class="slide" data-layout="cover">…</section>
<section class="slide" data-layout="toc">…</section>
<section class="slide" data-layout="section-divider">…</section>
<section class="slide" data-layout="thanks">…</section>
<section class="slide" data-layout="cta">…</section>
<section class="slide" data-layout="bullets">…</section>
<section class="slide" data-layout="two-column">…</section>
<section class="slide" data-layout="three-column">…</section>
<section class="slide" data-layout="big-quote">…</section>
<section class="slide" data-layout="table">…</section>
<section class="slide" data-layout="code">…</section>
<section class="slide" data-layout="diff">…</section>
<section class="slide" data-layout="terminal">…</section>
<section class="slide" data-layout="stat-highlight">…</section>
<section class="slide" data-layout="kpi-grid">…</section>
<section class="slide" data-layout="chart-bar">…</section>
<section class="slide" data-layout="chart-line">…</section>
<section class="slide" data-layout="chart-pie">…</section>
<section class="slide" data-layout="chart-radar">…</section>
<section class="slide" data-layout="flow-diagram">…</section>
<section class="slide" data-layout="timeline">…</section>
<section class="slide" data-layout="roadmap">…</section>
<section class="slide" data-layout="mindmap">…</section>
<section class="slide" data-layout="arch-diagram">…</section>
<section class="slide" data-layout="process-steps">…</section>
<section class="slide" data-layout="gantt">…</section>
<section class="slide" data-layout="comparison">…</section>
<section class="slide" data-layout="pros-cons">…</section>
<section class="slide" data-layout="todo-checklist">…</section>
<section class="slide" data-layout="image-hero">…</section>
<section class="slide" data-layout="image-grid">…</section>
Browse all 31 layouts live: open templates/layout-showcase.html
CSS Animations
Add class to any element. Use --delay CSS variable for staggering.
<h1 class="animate-on-enter rise-in">Title</h1>
<p class="animate-on-enter fade-up" style="--delay:0.2s">Subtitle</p>
<img class="animate-on-enter zoom-pop" style="--delay:0.4s" src="..." />
<p class="animate-on-enter blur-in">Blurred entrance</p>
<h2 class="typewriter">Typed out text</h2>
<span class="glitch-in">Glitched text</span>
<span class="neon-glow">Glowing text</span>
<span class="shimmer-sweep">Shimmer effect</span>
<div class="gradient-flow">Animated gradient background</div>
<ul class="stagger-list">
<li>Appears first</li>
<li>Appears second</li>
<li>Appears third</li>
</ul>
<span class="counter-up" data-target="1000000">0</span>
<div class="card-flip-3d">…</div>
<div class="cube-rotate-3d">…</div>
<div class="page-turn-3d">…</div>
<div class="perspective-zoom">…</div>
<div class="marquee-scroll">Scrolling ticker text…</div>
<div class="kenburns"><img src="..." /></div>
<div class="parallax-tilt">Tilt on hover</div>
<div class="ripple-reveal">Ripple entrance</div>
<div class="spotlight">Spotlight effect</div>
Canvas FX Animations
Add data-fx attribute to trigger cinematic canvas effects on slide enter:
<section class="slide" data-layout="cover" data-fx="particle-burst">
<div class="slide-content">
<h1>Big Launch</h1>
</div>
</section>
<section class="slide" data-layout="thanks" data-fx="confetti-cannon">
<div class="slide-content"><h1>Thank You!</h1></div>
</section>
<section class="slide" data-layout="arch-diagram" data-fx="knowledge-graph">
<div class="slide-content">…</div>
</section>
<section class="slide" data-fx="neural-net">…</section>
<section class="slide" data-fx="matrix-rain">…</section>
<section class="slide" data-fx="data-stream">…</section>
<section class="slide" data-fx="starfield">…</section>
<section class="slide" data-fx="constellation">…</section>
<section class="slide" data-fx="galaxy-swirl">…</section>
<section class="slide" data-fx="orbit-ring">…</section>
<section class="slide" data-fx="typewriter-multi">…</section>
<section class="slide" data-fx="word-cascade">…</section>
<section class="slide" data-fx="letter-explode">…</section>
<section class="slide" data-fx="counter-explosion">…</section>
<section class="slide" data-fx="gradient-blob">…</section>
<section class="slide" data-fx="sparkle-trail">…</section>
<section class="slide" data-fx="shockwave">…</section>
<section class="slide" data-fx="firework">…</section>
<section class="slide" data-fx="chain-react">…</section>
<section class="slide" data-fx="magnetic-field">…</section>
fx-runtime.js auto-initialises these on slide enter — no extra JS needed.
Full-Deck Templates (14 total)
Pre-built complete decks in templates/full-decks/<name>/:
templates/full-decks/pitch-deck/
templates/full-decks/product-launch/
templates/full-decks/tech-sharing/
templates/full-decks/weekly-report/
templates/full-decks/course-module/
templates/full-decks/xhs-post/
templates/full-decks/xhs-white-editorial/
templates/full-decks/xhs-pastel-card/
templates/full-decks/graphify-dark-graph/
templates/full-decks/hermes-cyber-terminal/
templates/full-decks/knowledge-arch-blueprint/
templates/full-decks/obsidian-claude-gradient/
templates/full-decks/testing-safety-alert/
templates/full-decks/dir-key-nav-minimal/
Each deck uses scoped .tpl-<name> CSS — safe to embed multiple decks side-by-side.
Browse all: open templates/full-decks-index.html
Common Deck Patterns
Pitch Deck (VC Style)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pitch Deck</title>
<link rel="stylesheet" href="../../assets/base.css" />
<link rel="stylesheet" href="../../assets/themes/pitch-deck-vc.css" />
<link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>
<section class="slide" data-layout="cover" data-fx="gradient-blob">
<div class="slide-content">
<h1 class="animate-on-enter rise-in">CompanyName</h1>
<p class="animate-on-enter fade-up" style="--delay:0.3s">
One-line value proposition
</p>
<p class="animate-on-enter fade-up" style="--delay:0.5s">Seed Round · 2026</p>
</div>
</section>
<section class="slide" data-layout="stat-highlight">
<div class="slide-content">
<h2>Traction</h2>
<div class="kpi-row">
<div class="kpi">
<span class="counter-up" data-target="50000">0</span>
<label>Users</label>
</div>
<div class="kpi">
<span class="counter-up" data-target="120">0</span>
<label>% MoM Growth</label>
</div>
<div class="kpi">
<span>$<span class="counter-up" data-target="2">0</span>M</span>
<label>ARR</label>
</div>
</div>
</div>
</section>
<section class="slide" data-layout="two-column">
<div class="slide-content">
<h2>The Problem / Solution</h2>
<div class="col">
<h3>😩 Problem</h3>
<ul class="stagger-list">
<li>Pain point one</li>
<li>Pain point two</li>
</ul>
</div>
<div class="col">
<h3>✅ Solution</h3>
<ul class="stagger-list">
<li>How we fix it</li>
<li>Why we win</li>
</ul>
</div>
</div>
</section>
<section class="slide" data-layout="cta" data-fx="confetti-cannon">
<div class="slide-content">
<h1>Join Us</h1>
<p>hello@company.com</p>
</div>
</section>
<script src="../../assets/runtime.js"></script>
<script src="../../assets/animations/fx-runtime.js"></script>
</body>
</html>
Tech Talk / Engineering
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tech Sharing</title>
<link rel="stylesheet" href="../../assets/base.css" />
<link rel="stylesheet" href="../../assets/themes/tokyo-night.css" />
<link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>
<section class="slide" data-layout="cover" data-fx="neural-net">
<div class="slide-content">
<h1 class="neon-glow">How We Scaled to 10M RPS</h1>
<p>Engineering Deep Dive · 2026</p>
</div>
</section>
<section class="slide" data-layout="code">
<div class="slide-content">
<h2>The Bottleneck</h2>
<pre><code class="language-python">
# Before: naive approach — O(n²) lookup
def find_user(users, uid):
for user in users: # 💀 scans entire list
if user.id == uid:
return user
# After: hash map — O(1)
user_index = {u.id: u for u in users}
def find_user(uid):
return user_index.get(uid) # ⚡ instant
</code></pre>
</div>
</section>
<section class="slide" data-layout="timeline">
<div class="slide-content">
<h2>Migration Roadmap</h2>
<div class="timeline">
<div class="timeline-item">
<span class="date">Q1</span>
<span class="event">Audit + profiling</span>
</div>
<div class="timeline-item">
<span class="date">Q2</span>
<span class="event">Hash-map refactor</span>
</div>
<div class="timeline-item">
<span class="date">Q3</span>
<span class="event">Cache layer + CDN</span>
</div>
<div class="timeline-item">
<span class="date">Q4</span>
<span class="event">10M RPS achieved ✓</span>
</div>
</div>
</div>
</section>
<script src="../../assets/runtime.js"></script>
<script src="../../assets/animations/fx-runtime.js"></script>
</body>
</html>
小红书 Style (3:4 ratio)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>小红书图文</title>
<link rel="stylesheet" href="../../assets/base.css" />
<link rel="stylesheet" href="../../assets/themes/xiaohongshu-white.css" />
<link rel="stylesheet" href="../../assets/animations/animations.css" />
<style>
.slide { aspect-ratio: 3 / 4; max-width: 480px; }
</style>
</head>
<body>
<section class="slide" data-layout="cover">
<div class="slide-content">
<h1 class="animate-on-enter rise-in">5个让你效率翻倍的工具</h1>
<p class="animate-on-enter fade-up" style="--delay:0.3s">
📌 收藏备用！
</p>
</div>
</section>
<section class="slide" data-layout="image-hero">
<div class="slide-content">
<div class="tag">工具 01</div>
<h2>Notion</h2>
<p>把你的大脑外包给它，笔记 / 任务 / Wiki 一体化</p>
</div>
</section>
<section class="slide" data-layout="thanks">
<div class="slide-content">
<h2>觉得有用的话</h2>
<p>💾 收藏 + 👍 点赞 + 💬 评论你用什么工具</p>
</div>
</section>
<script src="../../assets/runtime.js"></script>
</body>
</html>
Speaker Notes
Add notes inside .slide-notes — revealed by pressing S:
<section class="slide" data-layout="bullets">
<div class="slide-content">
<h2>Architecture Overview</h2>
<ul class="stagger-list">
<li>Service A handles ingestion</li>
<li>Service B handles processing</li>
</ul>
</div>
<aside class="slide-notes">
Mention: Service A uses Kafka. Budget 3 min here.
Demo link: internal.company.com/demo
</aside>
</section>
Deep Linking & URL Navigation
Link directly to a slide by appending #N or ?slide=N:
<a href="my-deck/index.html#5">Jump to Architecture slide</a>
window.location.hash = '3';
Keyboard Controls
| Key | Action |
|---|
← → Space PgUp PgDn | Navigate slides |
Home / End | First / last slide |
F | Fullscreen |
S | Speaker notes overlay |
O | Slide overview grid |
T | Cycle through themes |
A | Demo animation on current slide |
Render to PNG (Headless Chrome)
./scripts/render.sh templates/theme-showcase.html
./scripts/render.sh examples/my-talk/index.html 12
ls scripts/verify-output/*.png
Browse Showcase Files
open templates/theme-showcase.html
open templates/layout-showcase.html
open templates/animation-showcase.html
open templates/full-decks-index.html
Troubleshooting
Animations not firing on slide enter
- Ensure
fx-runtime.js is loaded after runtime.js
- Check
data-fx value matches a name in assets/animations/fx/*.js
- Canvas FX requires a visible
<canvas> — fx-runtime.js injects one automatically if absent
Theme not applying
- Only one theme
<link> should be active at a time
- Theme file must be loaded after
base.css
- Scoped deck templates use
.tpl-<name> class on <body> — add it when embedding
Fonts not loading (offline)
fonts.css loads Noto Sans SC / Noto Serif SC from Google Fonts CDN- For offline use, download fonts and update
@font-face paths in assets/fonts.css
3:4 ratio slides look stretched
- Add
aspect-ratio: 3 / 4 and constrain max-width on .slide (see XHS example above)
- Default slides are 16:9 widescreen
Code blocks not highlighted
- Include highlight.js from CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
- Call
hljs.highlightAll() after DOM load
Chart layouts blank
chart-bar, chart-line, chart-pie, chart-radar layouts expect Chart.js- Include:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
