html-ppt-skill
Build professional HTML presentations with 36 themes, 31 layouts, 47 animations — pure static HTML/CSS/JS, no build step required.
Quellinformationen
- Repository
- reason-machines/trending-skills
- Letzte Quellaktivität
- 16. April 2026 um 11:30
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 82
- Forks
- 15
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- 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](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">
Auf GitHub ansehenDiese SKILL.md ist sehr gross, daher zeigt SkillsMP hier nur den ersten Abschnitt. Auf GitHub ansehen
