What is HTML PPT Presenter Mode?

HTML PPT Presenter Mode is a skill that provides a focused entry point for creating presentations using HTML, specifically utilizing the `presenter-mode-reveal` template.

How do I start using this skill?

To use this skill, first read the master skill for authoring rules, then copy the `presenter-mode-reveal` template files into your project and follow the integration instructions.

Can I customize the themes in my presentations?

Yes, you can choose from 36 different themes available in the template to customize the visual style of your presentation.

What are the two methods to integrate the necessary assets?

You can either copy the required asset files into your local project structure or inline the CSS and JavaScript directly into your HTML for a self-contained presentation.

Is this skill suitable for complex presentations?

While this skill is great for creating standard presentations, it may not support advanced features beyond the provided templates.

HTML PPT Presenter Mode

Name: HTML PPT Presenter Mode
Availability: InStock
Author: nexu-io

Free

Create engaging presentations with ease using HTML.

by nexu-io84.9k stars on nexu-io/open-design

7 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What HTML PPT Presenter Mode does

HTML PPT Presenter Mode provides a streamlined approach for developers and designers to create visually appealing presentations using HTML. This skill serves as a focused entry point into the broader HTML PPT framework, allowing users to quickly access the presenter-mode-reveal template, which is designed for effective presentation delivery. By leveraging this skill, users can transform a simple prompt into a fully functional design within a single session, making it ideal for live demos and decision-making scenarios.

To get started, users should familiarize themselves with the master skill, which outlines essential authoring rules, including content guidelines and layout structures. The skill emphasizes the importance of maintaining the integrity of the template's CSS and JavaScript, ensuring that presentations function correctly without broken links. Users can choose between two methods for integrating the necessary assets into their projects, either by copying files into a local structure or by inlining the code directly into their HTML files for a self-contained presentation.

Customization is a key feature of this skill, as users can select from a variety of themes to enhance the visual appeal of their presentations. The skill also provides guidelines for incorporating speaker notes, ensuring that important information is accessible to the presenter without cluttering the visual slides. Overall, HTML PPT Presenter Mode is designed for those who need a reliable and efficient way to create and deliver presentations using web technologies.

When to use it

Use this skill when you need to create a presentation quickly and effectively, especially in a live demo or decision-making context.

When not to use it

This skill may not be suitable for users looking for advanced presentation features beyond the provided templates or those who require extensive customization beyond the scope of the themes available.

What you can build with it

Quick Live Demo Creation

Use this skill to rapidly create a presentation for a live demo, ensuring all necessary assets are in place for a seamless experience.

Team Decision-Making Sessions

Leverage the presenter mode to facilitate decision-making sessions, allowing for clear visual communication of ideas.

Custom Themed Presentations

Easily switch between themes to create visually distinct presentations tailored to different audiences or purposes.

How to install HTML PPT Presenter Mode

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-presenter-mode-reveal --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

HTML PPT · Presenter Mode (演讲者模式)

A focused entry point into the html-ppt master skill that lands the user directly on the presenter-mode-reveal full-deck template.

When this card is picked

The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of presenter-mode-reveal (see the upstream full-decks catalog for screenshots and rationale).

How to author the deck

Read the master skill first. All authoring rules live in design-templates/html-ppt/SKILL.md — content/audience checklist, token rules, layout reuse, presenter mode, the keyboard runtime, and the "never put presenter-only text on the slide" rule.
Start from the matching template folder: design-templates/html-ppt/templates/full-decks/presenter-mode-reveal/ — copy index.html and style.css into the project, keep the .tpl-presenter-mode-reveal body class.
Bring the shared runtime with the template. The upstream index.html links the shared CSS/JS via ../../../assets/... because it sits three folders deep inside design-templates/html-ppt/templates/full-decks/. Once you copy index.html into the project, those parent-relative URLs no longer resolve and base.css, animations.css, and runtime.js will 404 — meaning the deck never activates and slide navigation is dead. Pick one of these two recipes per project:
- Recipe A — copy + rewrite (preferred): copy design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css, and design-templates/html-ppt/assets/runtime.js into a project-local assets/ (with assets/animations/animations.css), then rewrite the four <link>/<script> tags in index.html from ../../../assets/... to the matching project-local paths (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
- Recipe B — inline: read the same four files and replace each <link rel="stylesheet" href="../../../assets/..."> with a <style>...</style> containing the file's contents, and the <script src="../../../assets/runtime.js"> with a <script>...</script> containing runtime.js. Yields a single self-contained index.html. Either way, do not ship the upstream ../../../assets/... URLs verbatim into a project artifact — they only work in-tree.
Pick a theme. Default tokens look fine; if the user wants a different feel, swap in any of the 36 themes from design-templates/html-ppt/assets/themes/*.css via <link id="theme-link"> and let T cycle.
Replace demo content, not classes. The .tpl-presenter-mode-reveal scoped CSS only recognises the structural classes shipped in the template — keep them.
Speaker notes go inside <aside class="notes"> or <div class="notes"> — never as visible text on the slide.

Attribution

Visual system, layouts, themes and the runtime keyboard model come from the upstream MIT-licensed lewislulu/html-ppt-skill. The LICENSE file ships at design-templates/html-ppt/LICENSE; please keep it in place when redistributing.

Frequently asked questions about HTML PPT Presenter Mode

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.