html-ppt-skill

# html-ppt-skill — HTML PPT Studio > Skill by [ara.so](https://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 ```bash # Register with your agent runtime npx skills add https://github.com/lewislulu/html-ppt-skill # Or clone directly git clone https://github.com/lewislulu/html-ppt-skill ``` --- ## Scaffold a New Deck ```bash # Create a new deck from the base template ./scripts/new-deck.sh my-talk # Output: examples/my-talk/index.html (ready to edit) ``` --- ## 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`: ```html <!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> <!-- Base system --> <link rel="stylesheet" href="../../assets/base.css" /> <!-- Pick ONE theme --> <link rel="stylesheet" href="../../assets/themes/tokyo-night.css" /> <!-- Optional: animations --> <link rel="stylesheet" href="../../assets/animations/animations.css" /> </head> <body> <!-- Slide 1: Cover --> <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> <!-- Slide 2: Bullets --> <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> <!-- Slide 3: Big Quote --> <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> <!-- Slide 4: Thanks --> <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`. ```html <!-- Light / Editorial --> <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" /> <!-- Dark / Moody --> <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" /> <!-- Bold / Design-forward --> <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" /> <!-- Business / Professional --> <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" /> <!-- Special / Cultural --> <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">`. ```html <!-- Structural --> <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> <!-- Content --> <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> <!-- Data / Stats --> <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> <!-- Diagrams / Process --> <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> <!-- Comparison --> <section class="slide" data-layout="comparison">…</section> <section class="slide" data-layout="pros-cons">…</section> <section class="slide" data-layout="todo-checklist">…</section> <!-- Visual --> <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. ```html <!-- Fade / Entrance --> <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> <!-- Text Effects --> <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> <!-- Lists --> <ul class="stagger-list"> <li>Appears first</li> <li>Appears second</li> <li>Appears third</li> </ul> <!-- Numbers --> <span class="counter-up" data-target="1000000">0</span> <!-- 3D / Advanced --> <div class="card-flip-3d">…</div> <div class="cube-rotate-3d">…</div> <div class="page-turn-3d">…</div> <div class="perspective-zoom">…</div> <!-- Scroll / Motion --> <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: ```html <!-- Particle effects --> <section class="slide" data-layout="cover" data-fx="particle-burst"> <div class="slide-content"> <h1>Big Launch</h1> </div> </section> <!-- Celebration --> <section class="slide" data-layout="thanks" data-fx="confetti-cannon">