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
Scaffold a New Deck
Project Structure (Key Paths)
Minimal Deck Template
Every deck follows this structure — assets/base.css + one theme file + runtime.js:
Themes (36 total)
Swap the single <link> to change the entire deck's appearance. All themes live in assets/themes/*.css.
Browse all 36 themes live: open templates/theme-showcase.html
Layouts (31 total)
Set via data-layout on each <section class="slide">.
Browse all 31 layouts live: open templates/layout-showcase.html
CSS Animations
Add class to any element. Use --delay CSS variable for staggering.
Canvas FX Animations
Add data-fx attribute to trigger cinematic canvas effects on slide enter:
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>/:
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)
Tech Talk / Engineering
小红书 Style (3:4 ratio)
Speaker Notes
Add notes inside .slide-notes — revealed by pressing S:
Deep Linking & URL Navigation
Link directly to a slide by appending #N or ?slide=N:
Keyboard Controls
Render to PNG (Headless Chrome)
Browse Showcase Files
Troubleshooting
Animations not firing on slide enter
- Ensure
fx-runtime.jsis loaded afterruntime.js - Check
data-fxvalue matches a name inassets/animations/fx/*.js - Canvas FX requires a visible
<canvas>—fx-runtime.jsinjects 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.cssloads Noto Sans SC / Noto Serif SC from Google Fonts CDN- For offline use, download fonts and update
@font-facepaths inassets/fonts.css
3:4 ratio slides look stretched
- Add
aspect-ratio: 3 / 4and constrainmax-widthon.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-radarlayouts expect Chart.js- Include:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
