From aradotso-trending-skills-37
Builds professional static HTML presentations with 36 themes, 31 layouts, 47 animations (CSS + canvas)—pure HTML/CSS/JS, no build step or dependencies.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.
# 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
# Create a new deck from the base template
./scripts/new-deck.sh my-talk
# Output: examples/my-talk/index.html (ready to edit)
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
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>
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
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
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>
<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>
Add data-fx attribute to trigger cinematic canvas effects on slide enter:
<!-- 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.
Pre-built complete decks in templates/full-decks/<name>/:
# Business / Generic
templates/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 / Chinese
templates/full-decks/xhs-post/ # 9-slide 3:4 ratio
templates/full-decks/xhs-white-editorial/
templates/full-decks/xhs-pastel-card/
# Technical / Dark
templates/full-decks/graphify-dark-graph/
templates/full-decks/hermes-cyber-terminal/
templates/full-decks/knowledge-arch-blueprint/
# Specific Styles
templates/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
<!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>hello@company.com</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>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²) lookup
def 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="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>
Add notes inside .slide-notes — revealed by pressing S:
<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>
Link directly to a slide by appending #N or ?slide=N:
<!-- 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';
| 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 |
# 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
# All 36 themes (each in an isolated iframe)
open templates/theme-showcase.html
# All 31 layouts with real demo data
open templates/layout-showcase.html
# All 47 animations (CSS + canvas FX)
open templates/animation-showcase.html
# All 14 full-deck templates in a gallery
open templates/full-decks-index.html
Animations not firing on slide enter
fx-runtime.js is loaded after runtime.jsdata-fx value matches a name in assets/animations/fx/*.js<canvas> — fx-runtime.js injects one automatically if absentTheme not applying
<link> should be active at a timebase.css.tpl-<name> class on <body> — add it when embeddingFonts not loading (offline)
fonts.css loads Noto Sans SC / Noto Serif SC from Google Fonts CDN@font-face paths in assets/fonts.css3:4 ratio slides look stretched
aspect-ratio: 3 / 4 and constrain max-width on .slide (see XHS example above)Code blocks not highlighted
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>hljs.highlightAll() after DOM loadChart layouts blank
chart-bar, chart-line, chart-pie, chart-radar layouts expect Chart.js<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>