How to use the html-ppt agent skill: HTML slides from your AI agent

What is an agent skill, and what does html-ppt make the agent do?

An agent skill is a folder with a SKILL.md file that gives a coding agent instructions for a specific kind of task. When the agent sees a matching request, it reads those instructions and follows them. The html-ppt skill covers slide-based output.

With it installed, the agent writes slides as a set of static web pages (HTML, CSS and JavaScript) rather than a .pptx file. The skill provides 36 visual themes, 15 ready-made full decks and 36 page layouts, plus 27 CSS animations and 20 canvas effects. The deck supports keyboard navigation and touch swipes on phones and tablets.

• Themes live in assets/themes/*.css; one file gives one look.
• Full-deck templates live in templates/full-decks/<name>/.
• Presenter mode (press S) opens a separate window with the current slide, next slide, speaker script and a timer.

Install the html-ppt skill (ZIP download or Claude apps)

Download the ZIP of the skill from this page and unzip it. You have two main options.

Option A, Claude Code: copy the unzipped html-ppt folder into ~/.claude/skills/ for all your projects, or into a project's .claude/skills/ folder to limit it to that project. The folder must contain SKILL.md.

Option B, Claude apps: upload the skill in the Claude apps under Settings → Capabilities → Skills.

The project's SKILL.md also describes an install command using npx, which needs Node.js. Use it only if you are comfortable running it.

• Claude Code, all projects: ~/.claude/skills/
• Claude Code, one project: .claude/skills/ inside the project folder
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. The skill activates when your request matches its description. Plain requests work well, and so do requests in Chinese, since the skill lists Chinese trigger words such as 幻灯片, 演讲稿 and 小红书图文.

Give the agent the content, roughly how many slides you want and who the audience is. The skill asks you these questions before it starts writing, or proposes a default if you already supplied content.

• "Make a 10-slide deck about our Q3 results for the leadership team, dark theme."
• "Turn these notes into a tech sharing presentation with speaker notes."
• "Build a pitch deck for investors using a clean corporate look."
• "做一份 PPT，主题是分布式缓存，带演讲稿。"

Build and view a deck

The skill's Quick start scaffolds a new deck from the repository root with its script, then opens the result in a browser. Inside a deck, press T to cycle through themes, A for animations, F or O for fullscreen or overview, and the arrow keys to move between slides. The theme can also be hard-coded with a link to a file in assets/themes/.

To use presenter mode, open the deck in the browser and press S. In the audience window, S opens the presenter window. Within the presenter window, the arrow keys move both windows, R resets the timer and Esc closes the popup.

• Audience window: S presenter, T theme, arrows navigate, F fullscreen, O overview.
• Presenter window: arrows navigate, R reset timer, Esc close.
• Speaker notes are written in each slide's aside element with class notes, and the N key opens a notes drawer.

What the skill needs and safety notes

The skill requires Node.js and npx for its install command, and an agent that can read SKILL.md and write files, such as Claude Code. Headless Chrome is optional and is only needed for PNG export. Internet access is optional: some webfonts load from a CDN, and without internet the deck falls back to system fonts.

Be aware that the skill runs scripts and uses the network. Its own description states both. Review the scripts and the install source before you run them, especially on a machine with sensitive files.

• Required: Node.js/npx for the install command, and a coding agent that reads SKILL.md.
• Optional: headless Chrome for PNG export.
• Optional: internet access for CDN webfonts; system fonts are used otherwise.
• Offline: decks render offline, but the webfonts fall back to the system stack.

Tips for better decks

Give the agent your real content and a target slide count before asking for style. The skill recommends a few themes based on tone, such as tokyo-night for technical talks or corporate-clean for formal reports. Choosing one of these early saves rework.

For talks you will present yourself, ask for presenter mode. The skill then uses the presenter-mode-reveal template and writes a speaker script of 150 to 300 words per slide, which you can read in the S window.

• Name a theme (for example tokyo-night, corporate-clean or xiaohongshu-white) in your request.
• Ask for speaker notes if you are presenting, and rehearse once in presenter mode.
• Test on the machine you will present from, since fonts may differ if you are offline.
• Check that the output is HTML before sharing: colleagues who need a .pptx will not be able to open it.