HTML PPT Studio skill
Builds polished slide decks that open in a browser, from a library of styles, layouts and animations.
A Premium skill. Premium opens soon.
- By
- lewislulu
- Licence
- MIT
- Installs
- 20.7K
- Works in
- 17 apps
What HTML PPT Studio makes
This skill makes slide decks as web pages. You describe the talk, and it builds a set of slides you open in any browser and flip through with the arrow keys. There is no PowerPoint file and nothing to install on the viewer's side.
It works from a bundled kit: 36 looks (themes), 15 complete starter decks, 36 single-page layouts, 27 entrance animations and 20 canvas effects. It picks a theme and layout for each slide, fills them with your content, and can export slides as images with a headless Chrome script. If you say you will present it live, it uses a presenter template and writes a speaker script into the notes of every slide.
Best for: People who want a good-looking deck fast and are fine presenting from a browser instead of PowerPoint.
- 36 themes, from minimal white to blueprint and neo-brutalist
- 15 full-deck templates, including pitch deck, product launch, weekly report and tech sharing
- Keyboard controls: arrows to move, T to switch theme, S for presenter mode with a timer and notes
- Touch swipe on phones and tablets
- Optional PNG export of each slide through a headless Chrome script
Made with this skill
Tidewater seed pitch deck. A 6-slide seed pitch deck for "Tidewater", a startup turning seaweed into compostable packaging: title, problem, solution, market, traction (clearly labelled as example numbers), ask. Any brands, names or numbers inside are invented examples.
Example prompts
Type something like this once the skill is added. Your app opens the skill when the request matches.
-
Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.
-
Turn these meeting notes into a weekly report deck with a clean minimal look.
-
I am giving a 20-minute talk on our new onboarding flow. Build the slides and write a speaker script for each one.
-
Make a 3:4 image post series for social media about five habits of good managers.
What’s inside
239 files in the skill folder, with its MIT licence kept inside. 25 are program files your agent can run. Read them before you install.
- SKILL.md the instructions
- assets/ 70 files
- docs/ 12 files
- examples/ 1 files
- references/ 6 files
- scripts/ 58 files
- templates/ 86 files
- .clawscan-allow
- .gitignore
- LICENSE licence
- README.md
- README.zh-CN.md
Which apps it works in
A skill is a folder of plain files, so any app that reads the open skills format can use it. Pick your app for its page.
How to add HTML PPT Studio to your app
Step by step for each app. We say where to click, so you never need to leave this page.
ChatGPTby OpenAI
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Open the ChatGPT desktop app and look for Skills in the sidebar, where standalone skills are listed.
- 3 Add the “html-ppt” folder there if your version offers it. If you do not see Skills yet, use this skill in Claude or Codex instead.
- 4 In a chat, type @ and pick the skill, or just ask. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
To make your own, describe the workflow to @skill-creator in ChatGPT Work and it drafts a skill for you.
Claude appby Anthropic
- 1 Download the skill (.zip) with the button at the top of this page.
- 2 In the Claude app, open Settings > Features.
- 3 Upload the .zip file.
- 4 Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
The current Claude Help Center lists Free, Pro, Max, Team and Enterprise. Organization policy can restrict uploads and sharing. Chat runs code in an isolated environment; uploading a skill does not give it your local project, coding-agent tools or unrestricted network access.
Codexby OpenAI
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.agents/skills - 3 Or paste the install prompt below into Codex and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Codex
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .agents/skills inside that project instead.
Claude Codeby Anthropic
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.claude/skills - 3 Or paste the install prompt below into Claude Code and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Claude Code
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.claude/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
Built-in installer: claude plugin marketplace add <owner/repo>
Built-in installer: claude plugin install <plugin>@<marketplace>
To use the skill in one project only, put it in .claude/skills inside that project instead.
Cursor
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.cursor/skills - 3 Or paste the install prompt below into Cursor and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Cursor
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.cursor/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .cursor/skills inside that project instead. Cursor also reads ~/.agents/skills, ~/.claude/skills, ~/.codex/skills.
GitHub Copilotby GitHub
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.copilot/skills - 3 Or paste the install prompt below into GitHub Copilot and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into GitHub Copilot
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.copilot/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
Built-in installer: gh skill install <owner/repo> <skill> --agent github-copilot --scope user
To use the skill in one project only, put it in .github/skills inside that project instead. GitHub Copilot also reads ~/.agents/skills.
Gemini CLIby Google
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.gemini/skills - 3 Or paste the install prompt below into Gemini CLI and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Gemini CLI
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.gemini/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
Built-in installer: gemini skills install <git-url>
To use the skill in one project only, put it in .gemini/skills inside that project instead. Gemini CLI also reads ~/.agents/skills.
Windsurf
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.codeium/windsurf/skills - 3 Or paste the install prompt below into Windsurf and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Windsurf
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.codeium/windsurf/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .windsurf/skills inside that project instead.
Kiro
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.kiro/skills - 3 Or paste the install prompt below into Kiro and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Kiro
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.kiro/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .kiro/skills inside that project instead.
Antigravityby Google
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.gemini/antigravity/skills - 3 Or paste the install prompt below into Antigravity and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Antigravity
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.gemini/antigravity/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .agents/skills inside that project instead.
OpenCode
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.config/opencode/skills - 3 Or paste the install prompt below into OpenCode and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into OpenCode
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.config/opencode/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .opencode/skills inside that project instead. OpenCode also reads ~/.agents/skills, ~/.claude/skills.
Cline
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.agents/skills - 3 Or paste the install prompt below into Cline and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Cline
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .agents/skills inside that project instead.
Amp
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.config/agents/skills - 3 Or paste the install prompt below into Amp and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Amp
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.config/agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
Built-in installer: amp skill add <github-url> --global
To use the skill in one project only, put it in .agents/skills inside that project instead. Amp also reads ~/.agents/skills, ~/.config/amp/skills, ~/.claude/skills.
Gooseby Block
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.agents/skills - 3 Or paste the install prompt below into Goose and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Goose
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .agents/skills inside that project instead. Goose also reads ~/.claude/skills.
OpenClaw
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.openclaw/skills - 3 Or paste the install prompt below into OpenClaw and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into OpenClaw
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.openclaw/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
Built-in installer: openclaw skills install @owner/<slug>
Built-in installer: openclaw skills install @owner/<slug> --global
Built-in installer: openclaw skills install git:owner/repo@ref
To use the skill in one project only, put it in skills inside that project instead. OpenClaw also reads ~/.agents/skills.
Hermes Agentby Nous Research
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.hermes/skills - 3 Or paste the install prompt below into Hermes Agent and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into Hermes Agent
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.hermes/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
Built-in installer: hermes skills install <owner/repo/skill>
VS Codeby Microsoft
- 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
- 2 Move the “html-ppt” folder into your skills folder:
~/.copilot/skills - 3 Or paste the install prompt below into VS Code and let it do the copying.
- 4 Start a new session. Ask for what you want, for example: “Make a 6-slide seed pitch deck for my startup, problem, solution, market, traction and ask.”
Install prompt: paste this into VS Code
I downloaded the agent skill "HTML PPT Studio" as html-ppt.zip. Unzip it and copy the html-ppt folder into ~/.copilot/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.
To use the skill in one project only, put it in .github/skills inside that project instead. VS Code also reads ~/.claude/skills, ~/.agents/skills.
This skill includes 25 program files. That is normal for skills that build real files, but read them first, and stop if anything asks for passwords or outside downloads.
Questions about HTML PPT Studio
Does it make a PowerPoint file?
No. It makes a static HTML deck that runs in a browser. The skill can also export slides as PNG images, but it does not write .pptx files.
Does it work offline?
The decks render offline. Only the web fonts fall back to your system fonts if there is no network.
Was this skill tested?
We ran it once to build a 6-slide pitch deck for a made-up seaweed packaging startup. The result was a clean browser deck with keyboard navigation and hidden speaker notes. A couple of decorative shapes on the cover landed in odd places, the same as in the unmodified template.
Is the HTML PPT Studio skill free?
It is a Premium skill on Best Agent Skills. Premium opens soon, with monthly, yearly and lifetime plans on the pricing page.
Who made the HTML PPT Studio skill?
lewislulu. We did not write it. Best Agent Skills curates skills like this one, explains them in plain words and shows how to add them to your app. It is shared under the MIT licence (Copyright (c) 2026 lewis <[email protected]>).
