HTML Ppt Skill

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

# 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

# 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:

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

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

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

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