skills.rest
deriye
deriyeCOMMUNITY
Explore all skills by this author →
GitHub

html-ppt

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

Updated Sep 7, 2026
Search Tags:#html#presentation#slides#ppt#presenter mode#css themes#deck templates
One-click install
npx skills add https://github.com/deriye/.agents-work --skill html-ppt-deriye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/deriye/.agents-work/tree/main/skills/html-ppt
Command: npx skills add https://github.com/deriye/.agents-work --skill html-ppt-deriye

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating polished slide decks usually requires heavy presentation software or building HTML slides from scratch. This Skill provides a complete template-driven system for authoring professional static HTML presentations with keyboard navigation, themes, animations, and a presenter mode with speaker scripts. ## Core Features & Use Cases - Template-driven deck authoring: Choose from 36 CSS themes, 31 single-page layouts, and 15 full-deck templates covering pitch decks, tech sharing, weekly reports, product launches, and 小红书图文 posts. - Animations and canvas FX: Apply 27 CSS entry animations via data-anim attributes and 20 canvas effects (particles, fireworks, knowledge graphs) via data-fx. - Presenter mode with speaker scripts: Press S to open a popup with current/next slide previews, a large-font speaker script card, and a timer, all synced with the audience view. - Use Case: An engineer preparing a technical sharing session picks the tokyo-night theme, starts from the tech-sharing full-deck template, writes 150-300 word speaker notes per slide, and exports PNGs with the headless Chrome render script. ## Quick Start Ask the assistant to create an HTML slide deck about your topic, specifying the audience, preferred theme, and whether to start from a full-deck template like tech-sharing or pitch-deck.

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 keyboard navigation?▼

Scaffold a deck with the new-deck.sh script, copy slide sections from the single-page layout templates, and include the runtime.js script. It provides arrow-key navigation, fullscreen, theme cycling, overview grid, and hash deep-links out of the box.

How do I add speaker notes and presenter view to HTML slides?▼

Wrap speaker notes in a div with class notes inside each slide, then press S during the presentation to open the presenter window. It shows current and next slide previews, a large-font script card, and a timer, all synced via BroadcastChannel.

What themes are available for HTML slide decks?▼

The skill ships 36 CSS themes including minimal-white, tokyo-night, dracula, nord, solarized-light, cyberpunk-neon, corporate-clean, academic-paper, and xiaohongshu-white. Each theme is a token override file, and you can press T in a deck to cycle through them.

Can I export HTML slides to PNG images?▼

Yes, the render.sh script wraps headless Chrome to capture slides as PNG files. It uses hash deep-links to iterate through slides, so you can render a single page or an entire multi-slide deck into a custom output directory.

Does building these HTML decks require a build step or framework?▼

No build step is required. Decks are pure static HTML, CSS, and JavaScript with only CDN webfonts as external resources, so any deck can be opened directly in a browser or served from static hosting.

Related Skills

Explore More Design & Creative Skills→
baphledbaphled
1

presentation-writing

Structure technical presentations with narrative arcs and slide density guidance.

Community
Basic
shekerkammashekerkamma

presentation-exporter

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

Community
Intermediate
NoCodeifyNoCodeify

excalidraw-slides

Generate Excalidraw-style hand-drawn slide prompts for YouTube talking-head videos.

Official
Basic
so-ota-bizso-ota-biz

slide-deck-pptx-google-safe

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

Community
Advanced