Guide · Agent skill
How to use the HTML Presenter Mode Deck agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The html-ppt-presenter-mode skill tells an AI agent how to build a slide deck as a single HTML web page for a product demo or AI literacy talk. It points the agent to the presenter-mode-reveal template, copies its styling and navigation code into your project, and keeps speaker notes off the slides. This guide explains what the skill does, how to install it, how to ask for a deck, and what it depends on.
HTML Presenter Mode Decknexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Get the master skill. Obtain the separate html-ppt master skill folder (design-templates/html-ppt) with its templates, assets and themes, since this skill cannot run without it.
- 2Install the skill. Unzip the downloaded ZIP into ~/.claude/skills/ for personal use or .claude/skills/ inside a project, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Ask for a deck. Describe your topic, audience and goal in plain language and mention HTML slides so the agent picks this skill.
- 4Answer the agent's questions. Provide the missing essentials it asks for, such as audience, decision target, source materials and must-keep numbers.
- 5Fix the asset links. Use Recipe A or Recipe B from the skill so the CSS and runtime.js load from your project, not the original tree.
- 6Open and present. Open the generated index.html in a browser and check that keyboard navigation works before presenting.
What does this skill make the agent do?
Without the skill, asking an agent for a slide deck usually gets you a plain outline. This skill narrows the job: the agent builds a styled HTML presentation that uses the visual identity of the presenter-mode-reveal full-deck template.
The skill is built around the master html-ppt skill. It tells the agent to start from the template folder, copy its index.html and style.css into your project, and keep the .tpl-presenter-mode-reveal body class. The result is a deck you can open in a browser and navigate with the keyboard.
- Output is HTML only, not PowerPoint or Google Slides.
- Speaker notes go in an aside or div with the class notes, so they never appear as visible slide text.
- The skill locks in the presenter-mode-reveal look. For a different style, the master skill's themes can be swapped in.
Install the skill from the ZIP
Download the skill ZIP from this page and unzip it. For a personal setup, place the skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
The skill will not work alone. You also need the separate html-ppt master skill folder (design-templates/html-ppt), including its templates, assets and themes. That folder is not included in this download, so get it and keep its structure intact.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
~/.claude/skills/How do you trigger the skill with a natural request?
You do not need special syntax. Describe a demo deck in plain language and mention HTML slides, the topic and the audience. The skill's trigger terms include phrases such as html deck, html slides, ai-literacy and copilot.
The source includes an example prompt you can adapt. It asks the agent to create a decision-grade AI literacy deck in the template's visual system, and to ask first for missing essentials such as audience, decision target, source materials, deadline and must-keep numbers.
Example requests that fit this skill
Good requests name the format, the template and the goal. Vague requests are more likely to produce a generic deck.
Replace the bracketed parts with your own topic.
- Make an HTML slide deck for a live demo of [your product], using the presenter-mode-reveal template, for developers.
- Build an HTML deck on AI literacy for prospects. Keep speaker notes out of the slides and add them in notes blocks.
- Create an html deck for our community talk on [topic]. Ask me for the audience, decision goal and any must-keep numbers first.
Set up the shared runtime so the deck works
The template's index.html links shared CSS and JavaScript using parent-relative paths that only work inside the original folder tree. Copy the files alone and the deck will not load, and slide navigation will stop working.
The skill describes two recipes. Recipe A copies fonts.css, base.css, animations/animations.css and runtime.js into a project assets/ folder, then rewrites the four link and script tags to those local paths. Recipe B inlines the same file contents into a single self-contained index.html. Pick one per project and do not ship the original ../../../assets/ paths.
- Recipe A (preferred): copy the four files into assets/ and rewrite the tags.
- Recipe B: replace the link and script tags with style and script blocks containing the file contents.
Keep the deck consistent
The skill tells the agent to keep the structural classes from the template and replace the demo content, not the classes. Changing the class names can break the scoped styles.
To change the feel, the master skill includes 36 theme files in assets/themes. A theme is loaded through a link element with the id theme-link, and the T key cycles through themes according to the source.
- Replace content, keep structural classes.
- Put speaker notes in aside.notes or div.notes only.
- Use a theme file only if you want to move away from the default look.
What people use it for
- A developer advocate preparing a live walkthrough of a product, from a one-line prompt to a working result.
- A team sharing an AI literacy talk as a web page that anyone can open in a browser.
- A sales or prospect presentation that needs a consistent, branded-looking HTML deck.
- A community meetup deck where the presenter's notes must stay out of the visible slides.
Frequently asked questions
Do I need to install anything else to use the html-ppt-presenter-mode skill?
Yes. The skill depends on the separate html-ppt master skill folder, including its templates, assets and themes. The skill's files are example.html and SKILL.md, and the master folder is not included, so you must obtain it separately.
Where do I install an agent skill?
Unzip the skill into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
Is the html-ppt-presenter-mode skill free to use?
The directory lists this item under the Apache-2.0 licence. The SKILL.md attributes the upstream visual system, layouts, themes and runtime to the MIT-licensed lewislulu/html-ppt-skill, and says its LICENSE file ships at design-templates/html-ppt/LICENSE, which should be kept when you redistribute. Check the licence files yourself before commercial use.
Can this skill make a PowerPoint or Google Slides file?
No. The skill outputs an HTML web page only. If you need a .pptx or Google Slides file, use a different tool or skill.
Why does my deck show no styling or navigation after copying index.html?
The template's index.html uses parent-relative paths to base.css, animations.css and runtime.js, which break when the file is moved alone. Use Recipe A to copy those assets into a project assets/ folder and rewrite the links, or Recipe B to inline them into one file.
Does the skill run scripts or use the network?
According to the directory listing, it runs no scripts and uses no network access. It does require an agent that can copy and edit files in your project.
How does this compare with a generic slide-making skill?
This skill locks in one specific visual template, presenter-mode-reveal, and its keyboard-navigable HTML output. A generic deck skill gives more freedom in style but will not produce this template's look by default.
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
Use this skill if you are a developer or developer-relations person who wants a styled, browser-based HTML demo deck in the presenter-mode-reveal look, with speaker notes kept out of view. Skip it if you need a PowerPoint or Google Slides file, want a generic style, or cannot obtain and keep the separate html-ppt master skill folder.
Download the skill