Agent skill · design visual · aradotso
html-ppt-skill
Build professional HTML presentations with 36 themes, 31 layouts, 47 animations — pure static HTML/CSS/JS, no build step required.
Why this skill is useful
Provides a structured framework for creating HTML presentations with specific themes and animations that the AI wouldn't generate on its own.
What it needs
Requires git installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
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 --- Scaffold a New Deck --- Project Structure (Key Paths) --- Minimal Deck Template Every deck follows this structure — assets/base.css + one theme file + runtime.js: --- Themes (36 total) Swap the single <link> to change the entire deck's appearance. All themes live in assets/themes/.css. Browse all 36 themes live: open templates/theme-showcase.html --- Layouts (31 total) Set via data-layout on each <section class="slide">. Browse all 31 layouts live: open templates/layout-showcase.html --- CSS Animations Add class to any element. Use --delay CSS variable for staggering. --- Canvas FX Animations Add data-fx attribute to trigger cinematic canvas effects on slide enter: 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>/: Each deck uses scoped .tpl-<name> CSS — safe to embed multiple decks side-by-side. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/html-ppt-skill