Html Ppt Skill

by reason-machines2384a003145aNo license83 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 months ago

Build professional HTML presentations with 36 themes, 31 layouts, 47 animations — pure static HTML/CSS/JS, no build step required.

Instructions onlyDocuments & Office Design & Creative

AI-generated overview

Builds professional HTML presentations from static HTML/CSS/JS with themes, layouts, and animations.

What it does: This skill guides an agent in producing presentation decks as static HTML/CSS/JS files, with no build step. It supplies 36 theme stylesheets, 31 slide layouts, 47 animations (CSS and canvas effects), and 14 full-deck templates, plus a base stylesheet and runtime for keyboard navigation, speaker notes, and overview. It also documents scaffolding, deep linking, PNG rendering, and troubleshooting.
When to use it: Use it when someone wants a slide deck, pitch deck, tech talk, or social-media-style slide set delivered as HTML rather than a PowerPoint file. It fits requests for themed slides, animated transitions, or canvas visual effects.
Requirements: Instructions only; no scripts ship with the skill. Decks reference assets such as base.css, theme files, runtime.js, and fx-runtime.js. Optional features need network access: Google Fonts for Noto fonts, highlight.js for code highlighting, and Chart.js for chart layouts. Headless Chrome is needed for the documented PNG rendering step.

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

bash

# Register with your agent runtimenpx skills add https://github.com/lewislulu/html-ppt-skill
# Or clone directlygit clone https://github.com/lewislulu/html-ppt-skill

# Register with your agent runtimenpx skills add https://github.com/lewislulu/html-ppt-skill
# Or clone directlygit 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)

# 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

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>

<!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" />

<!-- 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>

<!-- 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>

<!-- 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">  <div class="slide-content"><h1>Thank You!</h1></div></section>
<!-- Tech / Data --><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>
<!-- Space / Ambient --><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>
<!-- Text FX --><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>
<!-- Visual --><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>

<!-- 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">  <div class="slide-content"><h1>Thank You!</h1></div></section>
<!-- Tech / Data --><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>
<!-- Space / Ambient --><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>
<!-- Text FX --><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>
<!-- Visual --><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>/:

bash

# Business / Generictemplates/full-decks/pitch-deck/templates/full-decks/product-launch/templates/full-decks/tech-sharing/templates/full-decks/weekly-report/templates/full-decks/course-module/
# Social / Chinesetemplates/full-decks/xhs-post/          # 9-slide 3:4 ratiotemplates/full-decks/xhs-white-editorial/templates/full-decks/xhs-pastel-card/
# Technical / Darktemplates/full-decks/graphify-dark-graph/templates/full-decks/hermes-cyber-terminal/templates/full-decks/knowledge-arch-blueprint/
# Specific Stylestemplates/full-decks/obsidian-claude-gradient/templates/full-decks/testing-safety-alert/templates/full-decks/dir-key-nav-minimal/

# Business / Generictemplates/full-decks/pitch-deck/templates/full-decks/product-launch/templates/full-decks/tech-sharing/templates/full-decks/weekly-report/templates/full-decks/course-module/
# Social / Chinesetemplates/full-decks/xhs-post/          # 9-slide 3:4 ratiotemplates/full-decks/xhs-white-editorial/templates/full-decks/xhs-pastel-card/
# Technical / Darktemplates/full-decks/graphify-dark-graph/templates/full-decks/hermes-cyber-terminal/templates/full-decks/knowledge-arch-blueprint/
# Specific Stylestemplates/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)

html

<!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>[email protected]</p>    </div>  </section>
  <script src="../../assets/runtime.js"></script>  <script src="../../assets/animations/fx-runtime.js"></script></body></html>

<!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>[email protected]</p>    </div>  </section>
  <script src="../../assets/runtime.js"></script>  <script src="../../assets/animations/fx-runtime.js"></script></body></html>

Tech Talk / Engineering

html

<!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²) lookupdef 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>

<!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²) lookupdef 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)

html

<!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>    /* 3:4 aspect ratio for XHS */    .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>
  <!-- Repeat for tools 2–5 -->
  <section class="slide" data-layout="thanks">    <div class="slide-content">      <h2>觉得有用的话</h2>      <p>💾 收藏 + 👍 点赞 + 💬 评论你用什么工具</p>    </div>  </section>
  <script src="../../assets/runtime.js"></script></body></html>

<!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>    /* 3:4 aspect ratio for XHS */    .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>
  <!-- Repeat for tools 2–5 -->
  <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:

html

<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>  <!-- Hidden from audience, shown in presenter overlay -->  <aside class="slide-notes">    Mention: Service A uses Kafka. Budget 3 min here.     Demo link: internal.company.com/demo  </aside></section>

<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>  <!-- Hidden from audience, shown in presenter overlay -->  <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:

html

<!-- Link to slide 5 in a shared deck --><a href="my-deck/index.html#5">Jump to Architecture slide</a>
<!-- From JS -->window.location.hash = '3';

<!-- Link to slide 5 in a shared deck --><a href="my-deck/index.html#5">Jump to Architecture slide</a>
<!-- From JS -->window.location.hash = '3';

Keyboard Controls

Render to PNG (Headless Chrome)

bash

# Single template, default viewport./scripts/render.sh templates/theme-showcase.html
# Specific deck, 12 slides./scripts/render.sh examples/my-talk/index.html 12
# Output lands in scripts/verify-output/ls scripts/verify-output/*.png

# Single template, default viewport./scripts/render.sh templates/theme-showcase.html
# Specific deck, 12 slides./scripts/render.sh examples/my-talk/index.html 12
# Output lands in scripts/verify-output/ls scripts/verify-output/*.png

Browse Showcase Files

bash

# All 36 themes (each in an isolated iframe)open templates/theme-showcase.html
# All 31 layouts with real demo dataopen templates/layout-showcase.html
# All 47 animations (CSS + canvas FX)open templates/animation-showcase.html
# All 14 full-deck templates in a galleryopen templates/full-decks-index.html

# All 36 themes (each in an isolated iframe)open templates/theme-showcase.html
# All 31 layouts with real demo dataopen templates/layout-showcase.html
# All 47 animations (CSS + canvas FX)open templates/animation-showcase.html
# All 14 full-deck templates in a galleryopen 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>

Source and attribution

Source:reason-machines/trending-skillsinskills/html-ppt-skillat commit2384a00

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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

Html Ppt Skill

html-ppt-skill — HTML PPT Studio

Install

Scaffold a New Deck

Project Structure (Key Paths)

Minimal Deck Template

Themes (36 total)

Layouts (31 total)

CSS Animations

Canvas FX Animations

Full-Deck Templates (14 total)

Common Deck Patterns

Pitch Deck (VC Style)

Tech Talk / Engineering

小红书 Style (3:4 ratio)

Speaker Notes

Deep Linking & URL Navigation

Keyboard Controls

Render to PNG (Headless Chrome)

Browse Showcase Files

Troubleshooting

Source and attribution

More from reason-machines/trending-skills

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

More in Documents & Office

Pdf

View Pdf

Wiki Ado Convert

Process Letter

Teaser

Clean Data Xls