html-ppt-presenter-mode

Generates HTML slide decks with speaker notes, presenter popup view, and theme switching.

Updated May 20, 2026
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-presenter-mode-keimoshi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt-presenter-mode
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/html-ppt-presenter-mode-reveal
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-presenter-mode-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Presenters often lose their place or forget transitions during talks because slides alone carry no speaking guidance. This Skill produces HTML presentation decks where every slide embeds a 150-300 word verbatim script in hidden <aside class="notes"> blocks, viewable only by the speaker. ## Core Features & Use Cases - Presenter View Popup: Pressing S opens a separate window with four panels — current slide, next slide preview, full script, and timer — while the audience sees only the clean deck. - Theme Switching: Ships with tokyo-night as default plus 4 additional themes (dracula, catppuccin-mocha, nord, corporate-clean), cycled live with the T key; 36 themes available from the master html-ppt skill. - Script Authoring Rules: Enforces the three rules of speaker notes — cue signals instead of verbatim reading, 150-300 words per page, and spoken rather than written language. - Use Case: A developer preparing a 30-minute tech talk asks for a deck with per-slide scripts; the result is a self-contained index.html they present from a browser, glancing at the presenter popup to stay on pace. ## Quick Start Ask the AI to build a presenter-mode HTML deck on your talk topic with a 150-300 word spoken script per slide, then open index.html and press S for the presenter view.

Frequently Asked Questions about html-ppt-presenter-mode

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add speaker notes to an HTML presentation?

Place the script inside an <aside class="notes"> or <div class="notes"> element within each slide section. The CSS hides these from the audience, and the runtime displays them in the presenter popup when you press S.

How do I open presenter view in an HTML slide deck?

Press the S key while the deck is open in a browser. A separate popup window opens with four panels: current slide, next slide preview, full script, and a timer, while the audience window stays unchanged.

How long should speaker notes be per slide?

Keep notes between 150 and 300 words per slide, matching a 2-3 minute speaking pace. Under 150 words gives too little cueing; over 300 words cannot be scanned while presenting.

Can I switch themes in an HTML slide deck during a talk?

Yes. Press T to cycle through the themes listed in the deck's data-themes attribute. The default set includes tokyo-night, dracula, catppuccin-mocha, nord, and corporate-clean, with 36 themes available from the master skill.

Why do shared CSS and JS files 404 after copying the template?

The upstream template references assets via ../../../assets/ paths that only resolve inside the skill directory tree. After copying index.html into a project, either copy the assets locally and rewrite the paths, or inline the CSS and JS directly into the HTML.