html-ppt-skill - An open-source AI PPT generation skill that supports HTML files. - AiBoss

What is html-ppt-skill?

html-ppt-skill is an HTML-based AI presentation skill. The tool supports outputting HTML files natively supported by browsers, and includes 36 themes, 31 layouts, 47 animations, and 15 complete templates. The agent can generate sophisticated presentations by combining natural language. It supports one-click installation and is compatible with multiple platforms such as Claude Code, OpenClaw, Hermes Agent, and Cursor/Codex.

The main functions of html-ppt-skill

36 themesIt covers scenarios such as minimalist academic, cyberpunk, and Xiaohongshu's soft style, and can be switched in real time by pressing the T key.
31 layoutsIncludes a cover, table of contents, code examples, timeline, architecture diagram, flowcharts, etc., along with real-world example data.
47 animations27 CSS animations + 20 Canvas FX (cinematic effects such as particle bursts and neural network pulses).
15 complete templates: Extracted from real projects, such as tech-sharing, pitch-deck, xhs-post, presenter-mode-reveal, etc.
Speaker ModePress the S key to bring up a separate window containing a preview of the current/next page, a transcript, and a timer. Pixel-level precise synchronization is achieved through iframe + BroadcastChannel.
Cross-platform SkillIt follows the AgentSkill protocol, can be installed with a single command, and can be invoked by Claude Code, OpenClaw, Hermes, and Cursor/Codex.

How to use html-ppt-skill

Install Skill:implement npx skills add https://github.com/lewislulu/html-ppt-skill Add the Skill to the Agent.
Natural Language TriggersEnter your requirements in the Agent, such as "Create a 10-page microservice architecture presentation, dark theme, including architecture diagrams and code examples".
Open in browserThe Agent generates a complete HTML file; double-click to view it and use the keyboard to navigate.
Real-time theme switchingPress the T key during the demonstration to quickly switch between 36 themes.
Enable Speaker ModePress the S key to bring up the standalone speaker window, which includes a preview, transcript, and timer.
Manual creation (optional):direct git clone Warehouse, Operation ./scripts/new-deck.sh my-talk Generate the basic structure.

The core advantages of html-ppt-skill

HTML as an alternative to PPTXPlain text format, naturally generated by LLM, zero dependencies, open with a double-click, avoiding the layout misalignment and font loss issues of PPTX.
Prefabricated components + AI combinationHumans provide well-defined pre-made themes, layouts, and animations, while AI handles the assembly, avoiding the aesthetic chaos that can occur when creating from scratch.
Pixel-level speaker synchronizationThe preview and the audience screen share the same HTML + CSS, completely eliminating the awkwardness of inconsistent fonts, spacing, and colors in the projection.
Install once, use everywhereIt follows the open standards of agentskills.io, is not tied to a single platform, and its capability assets can be migrated across agent frameworks.
Cinematic visual effectsThe handwritten Canvas module enables special effects such as particles, starry skies, and neural networks, far surpassing the expressive power of traditional PPT animations.

Project address for html-ppt-skill

GitHub repository: https://github.com/lewislulu/html-ppt-skill

Comparison of similar products to html-ppt-skill

Comparison Dimensions	html-ppt-skill	guizang-ppt-skill
author	lewislulu	Gui Zang (op7418)
Star number	3600+ (20 days)	16,000+
Output format	Single-file HTML	Single-file HTML
visual system	36 themes (minimalist/cyber/Xiaohongshu, etc.)	Two styles: A. E-magazine × e-ink; B. Swiss Internationalism
Number of layouts	31 common layouts	Style A (10 types) + Style B (22 types) with locked layouts
Motion effects capability	47 (27 CSS + 20 Canvas FX cinematic effects)	WebGL background + low-performance static mode (toggle with the B key)
Speaker Mode	Independent window, iframe + BroadcastChannel pixel-level synchronization, including transcript	The built-in speaker mode is not explicitly defined.
Content generation	The agent combines from 101 skills, with the constraint of "not inventing new layouts".	7. Align the checklist first → Confirm the outline → Select the skeleton and fill in the content.
Image support	Basic image insertion	Supports the generation of documentary photos, infographics, flowcharts, and system relationship diagrams.
Cover Ecology	15 complete deck templates (including XHS-Post vertical version)	WeChat Official Accounts: 21:9 header image, 1:1 sharing card; Xiaohongshu: 3:4; WeChat Video Accounts: horizontal format.
Constraint verification	Depends on SKILL.md rule constraints	The checklist.md self-check and validation scripts intercept centered titles, image de-positioning, etc.

Application scenarios of html-ppt-skill

Technical sharing and developer demonstrationsUse the tech-sharing template and dark themes such as tokyo-night and terminal-green to quickly generate slides containing architecture diagrams and code examples.
Funding Roadshow and Product PitchUse the pitch-deck-vc template to generate YC-style business plans with one click, supporting data charts and team introduction layouts.
Xiaohongshu and social media images and textGenerate 3:4 vertical content using the xhs-post template, and adapt it directly to the proportions of social media platforms using the soft-pastel and xiaohongshu-white themes.
Academic reports and paper presentationsIt adopts minimal-white, editorial-serif, and academic-paper themes, which are suitable for journal defenses and academic conferences, and the style is rigorous and restrained.
Business and News BroadcastThe themes "corporate-clean" and "news-broadcast" cater to formal reporting scenarios such as business analysis, sales review, and monthly project reports.