Back to Skills

html-ppt

HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal

2,963stars305forksUpdated 5/8/2026

Security Assessment

Medium Risk(60/100)

Detected risks:

Privilege Escalation([README.md] sudo, [README.zh-CN.md] sudo, [SKILL.md] sudo)
Security Score60/100

About html-ppt

html-ppt is a reusable AI skill focused on a specific workflow. description: HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".

The skill packages instructions, conventions, and task-specific guidance so an agent can execute the job more consistently. Author professional HTML presentations as static files. One theme file = one look. One layout file = one page type. One animation class = one entry effect. All pages share a token-based design system in `assets/base.css`.

In practice, this skill is best suited for users who need repeatable execution with fewer setup steps and less ambiguity. npx skills add https://github.com/lewislulu/html-ppt-skill One command, no build. Pure static HTML/CSS/JS with only CDN webfonts. - **36 themes** (`assets/themes/*.css`) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint - **15 full-deck templates** (`templates/full-decks/<name>/`) — complete multi-slide decks with scoped `.tpl-<name>` CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, **presenter-mode-reveal** — 演讲者模式专用)

FAQ

What does html-ppt help with?

html-ppt helps agents follow a focused workflow described in the source documentation, reducing ambiguity and keeping execution aligned with the intended task.

When should this skill be used?

Use it when the task matches the workflow, domain, or operating rules described in the skill documentation, especially when consistent execution matters.

What are the main limitations?

The skill is constrained by the quality and scope of its source instructions. If the underlying documentation is incomplete, the agent may still need extra context or manual validation.

All Files

163 files
LICENSE1.1 KB
View
.clawscan-allow0.6 KB
View
README.md9.9 KB
View
README.zh-CN.md7.7 KB
View
SKILL.md13.1 KB
View
assets/animations/animations.css7.9 KB
View
assets/animations/fx-runtime.js3.1 KB
View
assets/animations/fx/_util.js1.9 KB
View
assets/animations/fx/chain-react.js1.4 KB
View
assets/animations/fx/confetti-cannon.js1.5 KB
View
assets/animations/fx/constellation.js1.3 KB
View
assets/animations/fx/counter-explosion.js2.3 KB
View
assets/animations/fx/data-stream.js1.5 KB
View
assets/animations/fx/firework.js1.6 KB
View
assets/animations/fx/galaxy-swirl.js1.0 KB
View
assets/animations/fx/gradient-blob.js1.4 KB
View
assets/animations/fx/knowledge-graph.js2.4 KB
View
assets/animations/fx/magnetic-field.js1.3 KB
View
assets/animations/fx/neural-net.js2.6 KB
View
assets/animations/fx/orbit-ring.js1.3 KB
View
assets/animations/fx/particle-burst.js1.2 KB
View
assets/animations/fx/shockwave.js1.3 KB
View
assets/animations/fx/sparkle-trail.js1.9 KB
View
assets/animations/fx/starfield.js1.0 KB
View
assets/animations/fx/typewriter-multi.js2.1 KB
View
assets/animations/fx/word-cascade.js1.6 KB
View
assets/animations/fx/letter-explode.js2.0 KB
View
assets/animations/fx/matrix-rain.js1.1 KB
View
assets/themes/bauhaus.css0.7 KB
View
assets/themes/catppuccin-latte.css0.6 KB
View
assets/themes/news-broadcast.css1.1 KB
View
assets/themes/pitch-deck-vc.css1.2 KB
View
docs/readme/montage-animations.html4.6 KB
View
docs/readme/montage-templates.html3.2 KB
View
templates/full-decks/course-module/README.md0.6 KB
View
templates/full-decks/course-module/style.css4.3 KB
View
templates/full-decks/obsidian-claude-gradient/style.css6.0 KB
View
templates/full-decks/pitch-deck/index.html7.8 KB
View
templates/full-decks/testing-safety-alert/README.md0.6 KB
View
templates/single-page/code.html1.7 KB
View
templates/single-page/cover.html1.5 KB
View
templates/single-page/todo-checklist.html2.2 KB
View
templates/theme-showcase.html6.1 KB
View
assets/base.css8.0 KB
View
assets/themes/japanese-minimal.css1.0 KB
View
assets/themes/terminal-green.css0.8 KB
View
scripts/new-deck.sh1.3 KB
View
templates/full-decks/hermes-cyber-terminal/style.css5.7 KB
View
templates/full-decks/tech-sharing/index.html8.3 KB
View
templates/full-decks/xhs-post/README.md0.3 KB
View
templates/single-page/big-quote.html1.0 KB
View
templates/single-page/process-steps.html1.9 KB
View
assets/fonts.css0.9 KB
View
assets/themes/magazine-bold.css1.1 KB
View
assets/themes/tokyo-night.css0.6 KB
View
scripts/render.sh1.7 KB
View
templates/full-decks/knowledge-arch-blueprint/README.md0.5 KB
View
templates/full-decks/xhs-post/index.html6.7 KB
View
templates/single-page/bullets.html1.1 KB
View
templates/single-page/pros-cons.html1.6 KB
View
assets/runtime.js36.0 KB
View
assets/themes/memphis-pop.css0.9 KB
View
assets/themes/vaporwave.css1.2 KB
View
templates/.DS_Store6.0 KB
View
templates/full-decks/knowledge-arch-blueprint/index.html10.5 KB
View
templates/full-decks/xhs-post/style.css4.0 KB
View
templates/single-page/chart-bar.html1.5 KB
View
templates/single-page/roadmap.html2.0 KB
View
templates/single-page/thanks.html1.1 KB
View
assets/themes/academic-paper.css1.2 KB
View
assets/themes/midcentury.css0.9 KB
View
assets/themes/xiaohongshu-white.css0.7 KB
View
templates/animation-showcase.html7.5 KB
View
templates/full-decks/knowledge-arch-blueprint/style.css4.9 KB
View
templates/full-decks/xhs-white-editorial/README.md0.6 KB
View
templates/single-page/chart-line.html1.9 KB
View
templates/single-page/section-divider.html0.9 KB
View
templates/single-page/three-column.html1.1 KB
View
assets/themes/arctic-cool.css0.6 KB
View
assets/themes/minimal-white.css0.7 KB
View
assets/themes/y2k-chrome.css1.3 KB
View
templates/deck.html2.9 KB
View
templates/full-decks/obsidian-claude-gradient/README.md0.6 KB
View
templates/full-decks/xhs-white-editorial/index.html9.5 KB
View
templates/single-page/chart-pie.html1.7 KB
View
templates/single-page/stat-highlight.html0.9 KB
View
templates/single-page/timeline.html2.0 KB
View
assets/themes/aurora.css1.1 KB
View
assets/themes/neo-brutalism.css0.8 KB
View
docs/readme/_theme-cell.html2.6 KB
View
templates/full-decks-index.html4.3 KB
View
templates/full-decks/obsidian-claude-gradient/index.html6.6 KB
View
templates/full-decks/tech-sharing/style.css3.8 KB
View
templates/single-page/chart-radar.html1.7 KB
View
templates/single-page/toc.html1.6 KB
View
assets/themes/blueprint.css0.9 KB
View
assets/themes/nord.css0.6 KB
View
docs/readme/montage-layouts.html3.1 KB
View
templates/full-decks/course-module/index.html9.7 KB
View
templates/full-decks/pitch-deck/README.md0.5 KB
View
templates/single-page/comparison.html1.7 KB
View
templates/single-page/two-column.html1.4 KB
View
assets/themes/catppuccin-mocha.css0.6 KB
View
assets/themes/rainbow-gradient.css0.8 KB
View
docs/readme/montage-themes.html2.9 KB
View
templates/full-decks/dir-key-nav-minimal/README.md0.6 KB
View
templates/full-decks/pitch-deck/style.css3.5 KB
View
templates/full-decks/testing-safety-alert/index.html9.8 KB
View
templates/single-page/cta.html1.5 KB
View
templates/single-page/table.html1.8 KB
View
assets/themes/corporate-clean.css0.9 KB
View
assets/themes/retro-tv.css1.1 KB
View
examples/demo-deck/index.html7.8 KB
View
templates/full-decks/dir-key-nav-minimal/index.html5.3 KB
View
templates/full-decks/presenter-mode-reveal/README.md2.3 KB
View
templates/full-decks/testing-safety-alert/style.css6.4 KB
View
templates/single-page/diff.html1.8 KB
View
assets/themes/cyberpunk-neon.css1.3 KB
View
assets/themes/rose-pine.css0.6 KB
View
references/animations.md7.5 KB
View
templates/full-decks/dir-key-nav-minimal/style.css4.7 KB
View
templates/full-decks/presenter-mode-reveal/index.html9.3 KB
View
templates/full-decks/weekly-report/README.md0.5 KB
View
templates/single-page/flow-diagram.html1.8 KB
View
assets/themes/dracula.css0.6 KB
View
assets/themes/sharp-mono.css0.7 KB
View
references/authoring-guide.md4.9 KB
View
templates/full-decks/graphify-dark-graph/README.md0.6 KB
View
templates/full-decks/presenter-mode-reveal/style.css5.5 KB
View
templates/full-decks/weekly-report/index.html8.2 KB
View
templates/single-page/gantt.html2.4 KB
View
assets/themes/editorial-serif.css0.8 KB
View
assets/themes/soft-pastel.css0.6 KB
View
references/full-decks.md8.0 KB
View
templates/full-decks/graphify-dark-graph/index.html10.3 KB
View
templates/full-decks/product-launch/README.md0.5 KB
View
templates/full-decks/weekly-report/style.css4.9 KB
View
templates/single-page/image-grid.html1.9 KB
View
assets/themes/engineering-whiteprint.css1.3 KB
View
assets/themes/solarized-light.css0.6 KB
View
references/layouts.md3.9 KB
View
templates/full-decks/graphify-dark-graph/style.css5.0 KB
View
templates/full-decks/product-launch/index.html6.4 KB
View
templates/full-decks/xhs-pastel-card/README.md0.7 KB
View
templates/full-decks/xhs-white-editorial/style.css5.6 KB
View
templates/single-page/image-hero.html1.7 KB
View
assets/themes/glassmorphism.css1.1 KB
View
assets/themes/sunset-warm.css0.6 KB
View
references/presenter-mode.md5.7 KB
View
templates/full-decks/hermes-cyber-terminal/README.md0.7 KB
View
templates/full-decks/product-launch/style.css3.9 KB
View
templates/full-decks/xhs-pastel-card/index.html8.1 KB
View
templates/layout-showcase.html2.2 KB
View
templates/single-page/kpi-grid.html1.5 KB
View
assets/themes/gruvbox-dark.css0.6 KB
View
assets/themes/swiss-grid.css0.9 KB
View
references/themes.md3.7 KB
View
templates/full-decks/hermes-cyber-terminal/index.html10.9 KB
View
templates/full-decks/tech-sharing/README.md0.5 KB
View
templates/full-decks/xhs-pastel-card/style.css5.5 KB
View
templates/single-page/arch-diagram.html2.7 KB
View
templates/single-page/mindmap.html2.1 KB
View
templates/single-page/terminal.html2.1 KB
View

Install html-ppt

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill