A toolkit for creating static HTML slide presentations with reusable themes, layouts, templates, and animations. The presentations can be styled for formats such as talks, pitches, academic decks, and social-media graphics.

Use it to create slide decks, keynote presentations, reveal-style HTML slideshows, and other multi-slide visual documents.

It provides ready-made presentation structures and visual styles so an agent does not have to build every slide design from scratch.

html-ppt — Skill for Claude Code and Codex by sanqiufong

Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo

git clone --depth 1 https://github.com/sanqiufong/slides-from-anything

agentmods

npx agentmods add skills/sanqiufong/slides-from-anything/html-ppt

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/sanqiufong/slides-from-anything/html-ppt/github.svg)](https://agentmods.dev/skills/sanqiufong/slides-from-anything/html-ppt)

Your own site

<a href="https://agentmods.dev/skills/sanqiufong/slides-from-anything/html-ppt"><img src="https://agentmods.dev/badge/skills/sanqiufong/slides-from-anything/html-ppt/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/sanqiufong/slides-from-anything/html-ppt"><img src="https://agentmods.dev/badge/skills/sanqiufong/slides-from-anything/html-ppt.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 169 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 3,828 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin 91% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00169	$0.03828
Opus 5	$0.00084	$0.01914
Sonnet 5	$0.00034	$0.00766
Haiku 4.5	$0.00017	$0.00383

Measured 10d ago against content hash 3880aa4abf60, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

html-ppt scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

The scan reads SKILL.md. This mod also ships 23 executable files (assets/animations/fx-runtime.js, assets/animations/fx/_util.js, assets/animations/fx/chain-react.js, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

91% identical to html-ppt — 28 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/html-ppt/SKILL.md · 252 lines

How it starts

The opening of the file, as written. The whole thing — 252 lines — stays where its author put it; the contents beside it link to each section on GitHub.

html-ppt — HTML PPT Studio

Author professional HTML presentations as static files. One theme file = one look. One layout file = one page type. One animation class = one entry effect. All pages share a token-based design system in assets/base.css.

Install

npx skills add https://github.com/lewislulu/html-ppt-skill

One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.

What the skill gives you

36 themes (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
15 full-deck templates (templates/full-decks/<name>/) — complete multi-slide decks with scoped .tpl-<name> CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — 演讲者模式专用)
31 layouts (templates/single-page/*.html) with realistic demo data
27 CSS animations (assets/animations/animations.css) via data-anim
20 canvas FX animations (assets/animations/fx/*.js) via data-fx — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
Keyboard runtime (assets/runtime.js) — arrows, T (theme), A (anim), F/O, S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards), N (notes drawer), R (reset timer in presenter)
FX runtime (assets/animations/fx-runtime.js) — auto-inits [data-fx] on slide enter, cleans up on leave
Showcase decks for themes / layouts / animations / full-decks gallery
Headless Chrome render script for PNG export

Read the full file on GitHub · 252 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 252 lines · 169 tokens per session scan A 3880aa4abf60

Subscribe to this mod's changes

html-ppt is a skill published in the GitHub repository sanqiufong/slides-from-anything (130 stars, last pushed yesterday), licensed Apache-2.0. It adds 169 tokens to every session and 3,828 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. It is 91% identical to html-ppt, differing in 28 lines, and is treated as a copy.

Creative and media Design and UX

html-ppt-zhangzara-retro-zine

A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Built as a decision-grade story deck for community, local readers.

nexu-io/open-design · 49 tokens

html-ppt-zhangzara-studio

A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Built as a decision-grade design craft deck for prospective clients.

nexu-io/open-design · 47 tokens

motion-frames

A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video…

nexu-io/open-design · 91 tokens

webgl-halftone-drift

A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.

nexu-io/open-design · 44 tokens

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

motion-graphics

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…

heygen-com/hyperframes · 139 tokens

html-ppt

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

This is a copy

How it starts

html-ppt — HTML PPT Studio

Install

What the skill gives you

What ships with it

What this file has done since we first saw it

Other skills, from other repositories

html-ppt-zhangzara-retro-zine

html-ppt-zhangzara-studio

motion-frames

webgl-halftone-drift

webgl-holographic-foil

motion-graphics