# html-ppt-skill: HTML Presentations for AI Agents

> An AgentSkill that builds professional HTML presentations with 36 themes, 15 templates, and a presenter mode. Installs with a single command and requires no build step.

**lewislulu/html-ppt-skill** — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML presentations

- Repository: https://github.com/lewislulu/html-ppt-skill
- Stars: 8,556 · Forks: 732
- Language: HTML
- License: MIT
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/lewislulu-html-ppt-skill

## AI-driven HTML presentation generation

html-ppt-skill is a skill for AI agents that generates HTML presentations. You ask your agent to create a slide deck, and it writes HTML, CSS, and JavaScript that renders presentation slides in a browser. The skill is MIT licensed and authored by lewis. The skill provides 36 built-in themes, 15 full-deck templates, 36 page layouts, and 47 animations (27 CSS + 20 canvas effects). It is designed specifically for AI agents to create presentations without manual layout work.

Install with a single command:

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

This registers the skill with your agent runtime. Afterward, any agent that supports AgentSkills can author presentations by asking things like "create an 8-page tech talk with the cyberpunk theme" or "turn this outline into a pitch deck." No build step, no Node dependencies at runtime. The skill ships with 4 showcase decks and 56 verification screenshots to demonstrate the library's capabilities. One command installs all 36 themes, 36 layouts, 47 animations, 15 full-deck templates, and the presenter mode. The agent can choose a theme, template, and content, and output a complete HTML presentation ready to open in a browser or deploy to a web server.

## 36 themes and 15 full-deck templates

The skill ships with 36 CSS-based themes stored in assets/themes/*.css. Swapping between them requires only changing a single `<link>` tag. The themes include minimal-white, editorial-serif, soft-pastel, sharp-mono, catppuccin-latte, catppuccin-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, and engineering-whiteprint. Each is pure CSS with no JavaScript dependencies. Browse all themes side-by-side in templates/theme-showcase.html with live iframes to verify rendering.

Full-deck templates come in two categories in templates/full-decks/. Eight are extracted from real-world decks: xhs-white-editorial (Xiaohongshu white editorial), graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, and dir-key-nav-minimal. Seven more are scenario scaffolds for pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post (9-slide 3:4 for social media), course-module, and presenter-mode-reveal with complete 150- to 300-word speaker scripts on every slide.

Each template is self-contained in its own folder with scoped `.tpl-<name>` CSS, allowing multiple decks to be previewed side-by-side without visual collisions.

## Presenter mode with speaker notes and timer

The skill includes a true presenter mode, new as of the latest version, activated by pressing `S` on any deck. A separate window opens with four draggable, resizable magnetic cards: the current slide, a preview of the next slide, speaker notes (逐字稿), and a countdown timer. The two windows stay in sync via `BroadcastChannel` API for cross-window communication, allowing one-way messaging with `postMessage({type:'preview-goto', idx:N})`.

The previews are pixel-perfect because each is an `<iframe>` that loads the same deck HTML with a `?preview=N` query parameter. The runtime detects this and renders only that slide without UI chrome, using the identical CSS, theme, fonts, and viewport as the audience view. Colors and layout are guaranteed identical. Navigation is smooth: on slide change, the presenter window sends postMessage to each iframe, which toggles `.is-active` between slides with no reload or flicker.

Speaker notes follow three rules from references/presenter-mode.md: bold the keywords instead of reading full sentences, write 150 to 300 words per slide (roughly 2 to 3 minutes of talk time), and write conversationally as you would speak. The skill ships with a ready-made template at `templates/full-decks/presenter-mode-reveal/` that includes complete speaker scripts on every slide.

## Installation and offline operation

The recommended installation uses `npx skills add`, which works if your machine has network. Three alternatives work offline or without Node.

1. Install from a local copy: Clone the repository first with `git clone https://github.com/lewislulu/html-ppt-skill`, then run `npx skills add ./html-ppt-skill`.

2. Manual installation without Node: Drop the skill folder directly into your agent's skills directory. Paths vary by agent: Claude Code uses `.claude/skills/html-ppt/` (project scope) or `~/.claude/skills/html-ppt/` (global); Codex and Cursor use `.agents/skills/html-ppt/` or `~/.cursor/skills/html-ppt/`; OpenCode uses `~/.config/opencode/skills/html-ppt/`; Gemini CLI uses `.agents/skills/html-ppt/` or `~/.gemini/skills/html-ppt/`; Windsurf uses `.windsurf/skills/html-ppt/` or `~/.codeium/windsurf/skills/html-ppt/`. Only SKILL.md, assets/, templates/, references/, and scripts/ are needed at runtime; docs/ is about 4.6 MB of README artwork and can be dropped from offline copies.

3. No agent at all: The templates are plain static files. Run `./scripts/new-deck.sh my-talk` and open `examples/my-talk/index.html`.

The decks run offline except for one remote dependency: `assets/fonts.css`, which `@import`s Google Fonts. Offline, these imports fail and the browser falls back to system fonts (Helvetica, Georgia, Menlo, -apple-system). To pin typography offline, replace the imports with `@font-face` rules pointing to local font files or delete the imports and accept the system stack.

## Static HTML output with no build step

All themes, layouts, animations, presenter mode, and PNG rendering use local static HTML, CSS, and JavaScript with no build step. When you ask your agent to create a deck, it outputs HTML files that work immediately in any browser without preprocessing. The skill provides a shell script (`scripts/new-deck.sh`) to create a new deck from scratch: `./scripts/new-deck.sh my-talk` generates a new presentation, and you open it with `open examples/my-talk/index.html`. Alternatively, you can fork any full-deck template from templates/full-decks/ and modify it directly.

Because the output is pure static HTML, you can host decks on any web server, email them as files, commit them to git, or open them locally without a development environment. This also means the skill works in fully air-gapped environments (with the caveat that Google Fonts fail offline). The repository publishes live previews in every README section as iframes, so you can see every theme and template before using them. All animations (27 CSS and 20 canvas effects) are included and run locally, requiring no external libraries.

## Repository structure and authorship

The repository is authored by lewis (sudolewis@gmail.com) and released under the MIT license. The top-level structure includes .clawscan-allow, .gitignore, LICENSE, README.md, README.zh-CN.md (Chinese documentation), SKILL.md (the skill definition), assets/ (CSS, fonts, animations), docs/ (README artwork), examples/, references/ (presenter-mode.md guide), scripts/, and templates/. The last push was on 2026-09-14. The project has no formal GitHub releases, but the repository is actively maintained. All content is static files with no server or runtime dependencies, making it simple to fork, modify, or contribute improvements.

## Conclusion

html-ppt-skill is for users of AI agents who want to generate presentation decks programmatically. Use it when you need quick, themed slides without leaving your agent workflow, especially for one-off presentations, prototypes, or decks you want to iterate on with an AI agent. Skip this if you need PPTX export, collaborative real-time editing with multiple people, or complex animations that require a build step. Verify that your agent runtime supports AgentSkills before installing. To get started, install with `npx skills add https://github.com/lewislulu/html-ppt-skill`, then ask your agent to create a presentation.

## FAQ

### What is html-ppt-skill?

html-ppt-skill is an AgentSkill that generates professional HTML presentations with multiple themes, templates, and animations. Install it once with npx, then ask your AI agent to create slides.

### How do I install html-ppt-skill?

Run npx skills add https://github.com/lewislulu/html-ppt-skill on a machine with Node. For offline installation, clone the repo and run npx skills add with the local path, or copy the folder directly to your agent's skills directory.

### Does html-ppt-skill require a build step?

No. The skill outputs pure static HTML, CSS, and JavaScript that work immediately in any browser with no preprocessing or build tools needed.

### What themes and templates does html-ppt-skill include?

The skill includes 36 CSS themes and 15 full-deck templates. Themes range from minimal-white to cyberpunk-neon, and templates cover pitch decks, product launches, tech talks, Xiaohongshu posts, course modules, and weekly reports. Themes are CSS-only with no JavaScript dependencies, and swapping themes requires only changing a single <link> tag.

## Sources

- [Issues](https://github.com/lewislulu/html-ppt-skill/issues)
- [lewislulu/html-ppt-skill on GitHub](https://github.com/lewislulu/html-ppt-skill)
- [License: MIT](https://github.com/lewislulu/html-ppt-skill/blob/main/LICENSE)
- [README](https://github.com/lewislulu/html-ppt-skill/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/lewislulu-html-ppt-skill