skills.rest
HalseyYang
HalseyYangCOMMUNITY
Explore all skills by this author →
GitHub

html-ppt

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

1|Updated Jul 13, 2026
Search Tags:#templates#html#presentation#slides#ppt#deck#presenter mode
One-click install
npx skills add https://github.com/HalseyYang/Skills-HY --skill html-ppt-halseyyang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/HalseyYang/Skills-HY/tree/main/html-ppt-skill
Command: npx skills add https://github.com/HalseyYang/Skills-HY --skill html-ppt-halseyyang

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 skills and heavy tools like PowerPoint or Keynote. This Skill lets an AI agent author professional multi-slide HTML presentations directly from templates, with keyboard navigation, themes, animations, and a presenter mode with speaker scripts. ## Core Features & Use Cases - 36 themes and 31 layouts: Swap one CSS token file to reskin an entire deck, and compose slides from ready-made layouts (cover, KPI grid, charts, timeline, code, terminal, and more). - 15 full-deck templates: Complete multi-slide decks for pitch decks, product launches, tech sharing, weekly reports, 小红书图文 (3:4), and course modules. - 47 animations plus presenter mode: 27 CSS entry animations and 20 canvas FX, plus an S-key presenter window with current/next slide previews, speaker script, and timer. - Use Case: Ask the agent to turn a meeting outline into an 8-page tech-sharing deck using the tokyo-night theme, then press S during the talk to see your 150-300 word speaker notes per slide. ## Quick Start Ask the agent to create an 8-page technical sharing slide deck using the tech-sharing template with the tokyo-night theme.

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 an AI agent?▼

Install the skill with npx skills add, then ask the agent for a deck with a topic, page count, and theme. The agent scaffolds a deck from templates, copies layout blocks, and wires in the shared runtime for keyboard navigation.

How do I add speaker notes to HTML slides?▼

Wrap speaker notes in an aside or div with class notes inside each slide section. The notes are hidden from the audience and appear in the presenter window opened with the S key, which also shows current and next slide previews plus a timer.

Can I export HTML slides to PNG images?▼

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

Does this require a build step or JavaScript framework?▼

No build step is required. Decks are pure static HTML/CSS/JS, with CDN links only for webfonts and optionally highlight.js or chart.js. Themes are plain CSS token files swapped via a single link tag.

What are the limitations of HTML slide decks compared to PowerPoint?▼

HTML decks require a browser to present and do not produce native .pptx files, so editing in PowerPoint is not possible. Export is limited to PNG screenshots or print-to-PDF via the included print styles.

Related Skills

Explore More Content & Communication Skills→
eatbreadseatbreads
1

ppt-maker

Convert notes and outlines into editable PowerPoint decks with speaker notes.

Community
Intermediate
pattern-ai-labspattern-ai-labs
11

meeting-presenter

Convert documents into narrated slide presentations for live meetings.

Official
Advanced
causify-aicausify-ai
144

slides.add_visuals

Generate visual suggestions for slide content in educational presentations.

Official
Basic
kortix-aikortix-ai
20.2k

presentations

Create, edit, validate, and export HTML slide decks and native PowerPoint files.

Official
Advanced