How do I install this skill?

Run `npx skills add https://github.com/lewislulu/html-ppt-skill`. You can also clone the repo and install locally, or manually copy the folder into your Agent's skills directory.

Can I use it without an internet connection?

Yes. Themes, layouts, animations, and speaker mode are all local static files. The only remote dependency is the CSS importing Google Fonts, which falls back to the system font stack offline without affecting rendering.

How does speaker mode work?

Press `S` on any presentation to open a separate window with four draggable, resizable magnetic cards. The two windows stay in sync via `BroadcastChannel`, and the preview card uses an iframe to load the same HTML for pixel-perfect consistency.

Which AI Agent hosts are supported?

The documentation lists Claude Code, Codex, Cursor, OpenCode, Gemini CLI, and Windsurf, along with their project-level and global skills directory paths.

Can I use it directly without an AI Agent?

Yes. The templates are pure static files. Use the included `./scripts/new-deck.sh` script to create a new presentation, then open index.html directly in your browser.

September 26, 2026

html-ppt-skill

Productivity & Workflow Presentations and Slides2

Get resource

An AgentSkill that helps AI Agents generate pure static HTML presentations with themes, layouts, animations, and speaker mode.

MITWebText InputCode Output

Presenter View Slide Design Slide Generation

安装 / 调用方式bash

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

调用示例json

"做一份 8 页的技术分享 slides，用 cyberpunk 主题"
"turn this outline into a pitch deck"
"做一个小红书图文，9 张，白底柔和风"

Product facts

Type: AI Skill & Agent
Category: Productivity & Workflow › Presentations and Slides
Pricing: Open source
Platforms: Web
License: MIT
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

html-ppt-skill (HTML PPT Studio) is an AgentSkill for AI Agents to generate professional HTML presentations. All outputs are pure static HTML/CSS/JS files with no build step required. The skill includes 36 themes, 15 full slide templates, 36 single-page layouts, and 47 animation effects (27 CSS animations and 20 Canvas FX animations). It also offers a speaker mode: press `S` to open a separate speaker window containing four draggable cards—current slide, next preview, transcript, and timer—kept in sync via `BroadcastChannel`. The preview loads the same HTML in an `<iframe>` with query parameters, ensuring colors and layout match the audience view; slide changes communicate via `postMessage` without reloading the page. Once installed, any AI Agent supporting AgentSkills can generate presentations from natural language instructions, such as requesting slides with a specific page count, theme, or image-text content. It also works offline: themes, layouts, and animations rely on local static files, and the only remote dependency is a CSS file importing Google Fonts, which falls back to the system font stack when disconnected. Ideal for developers and creators who need AI Agents to quickly produce Web-based presentations, pitch decks, tech talks, or social media image-text content.

Key features

36 Themes: Provides 36 pure CSS token theme files. Swap the link tag to change the entire presentation's look.
15 Full Templates: Includes 8 templates extracted from real-world scenarios and 7 general-purpose scaffolds like pitch-deck and tech-sharing.
36 Single-Page Layouts: Covers cover, toc, bullets, chart-bar, mindmap, and more, each with sample data ready to render.
47 Animation Effects: Includes 27 CSS animations and 20 Canvas FX animations.
Speaker Mode: Press S to open a separate window with current slide, next preview, transcript, and timer, synced via BroadcastChannel.
Pixel-Perfect Preview: The preview card uses an iframe to load the same HTML, ensuring CSS, theme, fonts, and viewport match the audience view exactly.
No-Refresh Navigation: Slide changes notify the iframe via postMessage to toggle classes without reloading the page.
Pure Static Output: Generated presentations are plain HTML/CSS/JS with no build step required.
Offline Ready: No runtime network requests except optional Google Fonts; automatically falls back to the system font stack when offline.
Multi-Agent Compatible: Supports hosts like Claude Code, Codex, Cursor, OpenCode, Gemini CLI, and Windsurf.

Releases

Notify me

Initial · html-ppt-skill

September 26, 2026

Q&A

How do I install this skill?AI-generated: Run `npx skills add https://github.com/lewislulu/html-ppt-skill`. You can also clone the repo and install locally, or manually copy the folder into your Agent's skills directory.
Can I use it without an internet connection?AI-generated: Yes. Themes, layouts, animations, and speaker mode are all local static files. The only remote dependency is the CSS importing Google Fonts, which falls back to the system font stack offline without affecting rendering.
How does speaker mode work?AI-generated: Press `S` on any presentation to open a separate window with four draggable, resizable magnetic cards. The two windows stay in sync via `BroadcastChannel`, and the preview card uses an iframe to load the same HTML for pixel-perfect consistency.
Which AI Agent hosts are supported?AI-generated: The documentation lists Claude Code, Codex, Cursor, OpenCode, Gemini CLI, and Windsurf, along with their project-level and global skills directory paths.
Can I use it directly without an AI Agent?AI-generated: Yes. The templates are pure static files. Use the included `./scripts/new-deck.sh` script to create a new presentation, then open index.html directly in your browser.