skills.rest
double-coding-lab
double-coding-labOFFICIAL
Explore all skills by this author →
GitHub

html-ppt

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

48|6|Updated Feb 11, 2026
Search Tags:#html#presentation#animations#slides#deck#presenter mode#css themes
One-click install
npx skills add https://github.com/double-coding-lab/Flow2Spec --skill html-ppt-double-coding-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/double-coding-lab/Flow2Spec/tree/main/.claude/skills/html-ppt
Command: npx skills add https://github.com/double-coding-lab/Flow2Spec --skill html-ppt-double-coding-lab

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 HTML slide decks by composing pre-built themes, layouts, and animations, with keyboard navigation and a presenter mode built in. ## Core Features & Use Cases - Theme and layout composition: 36 CSS-token themes, 31 single-page layouts, and 15 full-deck templates that can be copied and filled with real content. - Animations and canvas FX: 27 CSS entry animations plus 20 canvas effects (particles, knowledge graphs, matrix rain) triggered per slide. - Presenter mode: Press S to open a speaker window with current/next slide previews, speaker script, and timer synced via BroadcastChannel. - Use Case: Ask for an 8-page tech sharing deck in the tokyo-night theme with speaker notes, and get a ready-to-present HTML deck with keyboard navigation and PNG export via headless Chrome. ## Quick Start Ask the agent to create a slide deck from your outline, specifying the topic, audience, slide count, and preferred theme such as tokyo-night or minimal-white.

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, audience, slide count, and preferred theme to the agent. It scaffolds a deck from the closest full-deck template, copies layout blocks from the single-page library, and fills them with your content.

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, your script, and a timer, all synced across windows.

Can HTML slide decks be exported to PNG images?▼

Yes, the included render.sh script uses headless Chrome to capture slides as PNG files at 1920x1080 by default. You can specify a slide count and output directory, or adjust dimensions for 3:4 portrait formats.

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

No build step is required. Decks are pure static HTML, CSS, and JavaScript, with CDN links only for webfonts and optional libraries like highlight.js or chart.js.

What are the limitations of HTML-based slide decks?▼

HTML decks require a browser to present and lack native PowerPoint compatibility. Presenter mode popup windows may be blocked by browser popup settings, and canvas animations depend on JavaScript being enabled.

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
shekerkammashekerkamma

presentation-exporter

Export HTML presentations to PDF, PNG, and markdown speaker notes.

Community
Intermediate
SpaceZephyrSpaceZephyr
58

chart-image

Generate flowcharts, architecture diagrams, and ER diagrams with GPT-image-2.

Community
Intermediate
so-ota-bizso-ota-biz

slide-deck-pptx-google-safe

Create .pptx slide decks optimized for Google Slides compatibility and collaboration.

Community
Advanced