Guide · Agent skill
How to use the HTML Slide Deck Studio agent skill (html-ppt)
Updated · written with AI from the project's own documentation and checked against our catalogue data
html-ppt, listed as HTML Slide Deck Studio, is an agent skill that lets an AI agent turn your notes or text into a slide deck made of plain HTML, CSS and JavaScript files that open in any web browser. This guide explains what an agent skill is, how to install this one, how to ask for a deck in plain language, and what to check before you rely on the output. By the end you will be able to produce a themed deck with speaker notes and a presenter view.
HTML Slide Deck Studionexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the html-ppt ZIP from this page and unzip it on your computer.
- 2Place the folder. Move the unzipped folder into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Ask for a deck. Describe the topic, audience, length and a theme in plain words, and include speaker notes if you need a script.
- 5Open the deck. Open the generated HTML file in a web browser and step through each slide with the arrow keys.
- 6Open presenter mode. Press S in the deck to open the presenter window with current and next slide previews, speaker script and timer.
What is an agent skill, and what does html-ppt make the agent do?
An agent skill is a folder of instructions and supporting files that an AI agent loads when a task matches the skill. The skill's main file, SKILL.md, tells the agent what to do and which bundled files to use.
With html-ppt installed, the agent can author slide decks as static files. The skill describes 36 visual themes, 15 full-deck templates, 31 single-page layouts, 27 CSS animations and 20 canvas animation effects. Its keyboard runtime supports arrow navigation, a theme switcher, an animation toggle, fullscreen, an overview, a presenter mode and a notes drawer.
- Themes such as minimal-white, editorial-serif, tokyo-night, swiss-grid and pitch-deck-vc
- Full-deck templates for pitch decks, product launches, tech sharing, weekly reports and course modules
- A presenter view with the current slide, next slide, speaker script and timer
- Speaker notes written into each slide's notes element
Install the html-ppt skill from the ZIP
Download the ZIP of the skill from this page and unzip it. To make it available to Claude Code for your whole machine, place the unzipped folder inside ~/.claude/skills/. To limit it to one project, place it inside that project's .claude/skills/ folder.
In the Claude apps you can instead upload the skill under Settings, then Capabilities, then Skills.
The skill's own README gives a one-line install command that uses Node.js and npx. If you use that route, you need Node.js installed so that npx is available.
- Whole machine: ~/.claude/skills/ (unzip here)
- Single project: the project's .claude/skills/ folder
- Claude apps: Settings, then Capabilities, then Skills, then upload
npx skills add https://github.com/lewislulu/html-ppt-skillTrigger the skill with a natural request
You do not need a special command. The skill is meant to load when you ask for slide-based output or want notes turned into a presentable deck. Describe the topic, audience and approximate length in plain words.
The skill's own guidance is to infer reasonable defaults from your brief and only ask one consolidated question when a missing answer would change the deck substantially. Asking for a specific theme or mentioning that you want speaker notes helps the agent choose correctly.
- Make an HTML slide deck from these notes for the engineering team, using a dark tech theme.
- Turn this text into a 10-slide pitch deck in the pitch-deck-vc style.
- I am giving a tech sharing talk on Thursday. Build me a deck with a speaker script for each slide.
- Create a weekly report deck in a clean corporate look with animations.
Use presenter mode and speaker notes
If you mention speaker notes, a talk, a script or a presenter view, the skill is directed to use its presenter-mode-reveal template and to write a speaker script of roughly 150 to 300 words on each slide. The script is meant as prompts to speak from, with core words in bold and short transition lines.
In the browser, press S on a deck to open a separate presenter window with four draggable cards: current slide, next slide, speaker script and timer. Press R in that window to reset the timer and Esc to close it. The two windows stay in sync when you move between slides.
- Audience window: S opens presenter, T cycles theme, F fullscreen, O overview, N notes drawer
- Presenter window: arrow keys navigate and sync the audience, R resets the timer, Esc closes
Check the output before you present
Open the generated index file in a browser and click through every slide. The skill is pure static HTML, CSS and JavaScript, so there is no build step, but the decks load fonts from CDN webfonts and therefore need internet access to display those fonts as designed.
Review the content for accuracy. The agent writes the slides from your material, so numbers, names and claims need checking against your sources.
- Open the deck in a browser and step through every slide
- Confirm numbers and names against your source notes
- Check that fonts render correctly with internet access
Safety notes: scripts and network access
The skill is listed as running scripts and using the network. Its bundled files include a managed Chromium render script for exporting PNG images, and the decks can fetch CDN webfonts when opened. The skill's documentation does not fully explain what data, if any, leaves your machine beyond these font requests.
Read the bundled files before installing if you handle sensitive material. Do not paste confidential client material into a deck workflow until you have confirmed how your setup handles data.
- Scripts run as part of the skill; review them if your policy requires it
- Decks may request CDN webfonts over the internet
- Export data handling is not described in the skill's documentation, so treat confidential content with care
What people use it for
- Turning raw meeting notes into a shareable web deck that colleagues can open in any browser
- Preparing a technical talk with a speaker script on every slide and a timer in presenter view
- Building a pitch-style deck with a chosen theme such as pitch-deck-vc or corporate-clean
- Making a short course module or weekly report with animated slide transitions
Frequently asked questions
Is the html-ppt skill free to use?
The directory lists the licence as Apache-2.0, but the README in the repository states MIT. Check the LICENSE file in the source repository before you reuse or redistribute the skill, since the two statements differ.
How do I install the html-ppt agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for your whole machine or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills. The README also gives a one-line npx command that needs Node.js.
What do I need to run html-ppt?
You need Node.js with npx if you use the one-line install command, a web browser to view the decks, and internet access for CDN webfonts. The skill runs scripts and uses the network.
Can html-ppt export a PowerPoint .pptx file?
The skill's documentation does not describe PPTX export. Its output is HTML, CSS and JavaScript files that open in a browser, so if colleagues need an editable .pptx file, use PowerPoint or Keynote instead.
Why are my fonts not showing correctly?
The decks load webfonts from a CDN, so they need internet access to display as designed. If you are offline or your network blocks CDN requests, the browser will fall back to other fonts.
How does html-ppt compare with other slide tools?
html-ppt produces web-viewable HTML decks with many themes, animations and a presenter view, driven by an AI agent. Tools like PowerPoint or Keynote are better when you need a standard editable file to share with others, and the skill's documentation does not compare it with other agent skills.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
html-ppt suits people who want a browser-viewable slide deck made from their notes, especially presenters who want speaker scripts and a presenter view, and designers who want to try many themes and animations quickly. Pick something else if you need an editable .pptx for colleagues or if you must keep confidential material offline, since the skill's data handling is not fully explained and it fetches CDN fonts.
Download the skill