skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

html-ppt

Generates static HTML slide decks from themes, layouts, and animation templates.

Updated May 20, 2026
Search Tags:#html#presentation#animations#slides#presenter mode#css themes#deck generator
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/html-ppt
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating polished presentations usually requires design tools or manual HTML work. This Skill turns outlines or notes into complete keyboard-navigable HTML slide decks using a token-based design system, so agents can produce consistent, themeable presentations without any build step. ## Core Features & Use Cases - 36 CSS token themes and 31 page layouts: Swap one stylesheet link to reskin an entire deck, and compose slides from ready-made layouts like cover, KPI grid, timeline, chart, and code pages. - 15 full-deck templates and 47 animations: Start from scenario decks (pitch, tech sharing, weekly report, 小红书图文) and add CSS entry animations or canvas FX like particle bursts and knowledge graphs. - Presenter mode with speaker scripts: Press S to open a popup window with current/next slide previews, a 150-300 word speaker script per slide, and a timer, synced via BroadcastChannel. - Use Case: Ask for a 12-page technical sharing deck in the tokyo-night theme with speaker notes; the Skill scaffolds the deck, applies layouts, writes 逐字稿, and exports PNGs via headless Chrome. ## Quick Start Ask the agent to make an HTML presentation about your topic, specifying the slide count, audience, and preferred theme such as tokyo-night or corporate-clean.

Frequently Asked Questions about html-ppt

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

FAQPage Schema
How do I create an HTML presentation with AI?▼

Describe your topic, slide count, audience, and preferred theme, and the Skill scaffolds a deck from its templates. It copies matching single-page layouts, applies a CSS token theme, and wires keyboard navigation through the shared runtime.js.

How do I add speaker notes to HTML slides?▼

Wrap speaker notes in an aside or div with class notes inside each slide section. Pressing S opens a presenter window showing the current slide, next slide preview, the full script, and a timer, all synced across windows.

Can HTML slide decks be exported to PNG images?▼

Yes, the included render.sh script drives headless Chrome to capture slides as 1920x1080 PNGs. You can render a single page or iterate through all slides using hash deep-links, and adjust window size for 3:4 portrait output.

Does this presentation tool require a build step or frameworks?▼

No build step is required; decks are pure static HTML, CSS, and JavaScript opened directly in a browser. Only webfonts, highlight.js, and chart.js load optionally from CDNs.

What are the limitations of CSS token theming for slides?▼

All colors, radii, and shadows must come from CSS variables rather than literal hex values, so custom one-off styling requires editing theme files. Decks also depend on the shared assets folder, so files must keep correct relative paths.

Related Skills

Explore More Design & Creative Skills→
jrhicksjrhicks

/presentation specify

Create a slide-by-slide blueprint with content, speaker notes, and delivery cues.

Community
Intermediate
double-coding-labdouble-coding-lab
48

html-ppt

Generate static HTML slide decks from themes, layouts, and animation templates.

Official
Advanced
Aken-TeamsAken-Teams

Web Slides Generator

Generate interactive HTML slide decks from a concise brief.

Official
Advanced
stanislavjiricekstanislavjiricek
6

phase-slideshow

Generate structured slide deck outlines from research project contents.

Community
Intermediate