Skills HTML Ppt — Development skill for Claude Code
Interactive single-file HTML presentation generator with built-in themes, animations, keyboard/touch navigation, fullscreen, thumbnails, and customizable slide layouts.
How to install Skills HTML Ppt
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open luffy666code/skills-html-ppt and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Skills HTML Ppt does
Interactive single-file HTML presentation generator with built-in themes, animations, keyboard/touch navigation, fullscreen, thumbnails, and customizable slide layouts.
Alternatives in Development
- Serena — Code Intelligence Advanced code navigation and semantic search 14k ★
- HTML Ppt Skill — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML present 8.1k ★
- Codex Claude Academic Skills — 本仓库包含三个面向学术科研人员的Skills,覆盖从文献阅读、论文写作到科学计算的完整研究工作流 3.2k ★
README
HTML PPT Generator
✨ Turn structured content into a polished, interactive, single-file web presentation
**Single HTML · Zero CDN · Responsive · Keyboard Navigation · Fullscreen · Themes · Animations**
🌊 What is this?
`html-ppt` is a reusable AI skill for generating browser-based presentations from structured content. It combines a reusable HTML template, theme presets and lightweight renderers to produce a **self-contained `.html` presentation** that can be opened directly in a browser.
It is designed to be **platform-neutral**: use it with any agent or workflow that can read files and run Python or PowerShell, or use the template directly if your environment already supports file generation.
✨ Highlights
| Capability | What you get |
|---|---|
| 🎨 Theme system | 8 built-in themes + custom colors |
| 🧩 Reusable layouts | Cards, grids, two-column, stats, code blocks, feature lists |
| 🪄 Motion | Animated background, particles, slide transitions, hover effects |
| 🎮 Presentation controls | Arrow keys, Space, Home / End, mouse wheel, touch swipe |
| 🖥️ Presenter UI | Fullscreen, thumbnail view, progress dots, page counter, help overlay |
| 📦 Single-file output | CSS and JavaScript are embedded in the final HTML |
| 🔌 No CDN required | Works offline after generation |
| 🌍 Portable | Cross-platform Python renderer + optional PowerShell renderer |
🚀 Quick Start
- Prepare a slides JSON file.
- Run
scripts/render.pywith a template and color scheme. - Open the generated HTML file in a browser.
📁 Project Structure
html-ppt/
├── SKILL.md
├── README.md
├── examples/
├── scripts/
│ ├── render.py
│ └── render.ps1
└── templates/
├── base_template.html
└── color_schemes.json
Related Skills
18
Build a fullscreen loading screen component in React (Next.js 14, TypeScript). Uses Framer Motion for animatio
Ccstatusline Nocturne
Noctu — status line themes for Claude Code: two layouts, five palettes, column-aligned meters. Muted bars, bri
BLCU PPT Template
A skill that generates PPT files or web PPT programs from the BLCU presentation template
Marp Slides
MARP presentation skill for Claude Code — 22 curated example decks, SVG charts, dark/light themes, dashboard c
Frontend Slides Editable
Editable HTML presentation skill for Codex/Claude Code with drag-resize editing, slide reordering, local save/
Uw Slides
Generate a UW-Madison branded HTML slide presentation
Related Agents
Accessibility Engineer
Accessibility engineer ensuring WCAG 2.1 AA/AAA compliance across pages, interactive components, and web compo
Presentation Director
Creation-side orchestrator for anything you have to present. Takes "I need to present X to Y (at Z, in N minut
Fe Deck Reader
Decomposes PPT/planning decks (multi-slide, converted to PDF/PNG) into policy & rules / screen mockups / scre