HTML Slides

Single-file animated HTML decks with viewport-locked slides and keyboard/touch nav.

Works with setup

Test report

Verdict
Works with setup
Score
8.4/10
Tested
Jul 14, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Aug 10, 2026 · 8bb96c3

Built the same 4-slide 'Q3 Product Roadmap' deck twice, once ignoring the skill and once following it strictly: the skill version replaced the baseline's scrollable body and purple-gradient-plus-Inter look (an anti-pattern the skill explicitly calls out by name) with locked 100dvh sections, clamp() type, keyboard/touch navigation, a progress bar, and prefers-reduced-motion support that the baseline had none of. The gap: the 'curated style presets' promised in the description live in a sibling skill folder that a standalone install of html-slides never pulls in.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 4/5
  • Triggers reliably 5/5
  • Output vs. baseline 9/10
  • Docs & honesty 3/5

What HTML Slides does

Generates single-file, self-contained HTML presentations with viewport-locked slides (100dvh, overflow:hidden), clamp()-based responsive type, CSS/GSAP reveal animations, keyboard and touch navigation, and a print stylesheet for PDF export. Triggers on requests for animated HTML decks, PPTX-to-HTML conversion, or single-file web presentations. The 'curated style presets' the description advertises actually live in a sibling skill folder (slide-design) that a standalone install of this skill does not include.

How to install HTML Slides

git clone https://github.com/proyecto26/slides-ai-plugin
cd slides-ai-plugin
mkdir -p ~/.claude/skills
cp -r skills/html-slides ~/.claude/skills/html-slides

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger HTML Slides

  • /html-slides Single-file animated HTML decks with viewport-locked slides and keyboard/touch nav.

It also activates on plain-language prompts like these:

  • Build a 4-slide roadmap deck as one animated HTML file
  • Make a keyboard-navigable slide deck for our Q3 review
  • I need a self-contained HTML presentation with slide transitions

Frequently asked questions

Is the HTML Slides skill free?
Yes. The skill itself is free from proyecto26/slides-ai-plugin. SkillProof publishes the install command and an independent test verdict at no cost.
Does HTML Slides work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 14, 2026. Verdict: Works with setup. Built the same 4-slide 'Q3 Product Roadmap' deck twice, once ignoring the skill and once following it strictly: the skill version replaced the baseline's scrollable body and purple-gradient-plus-Inter look (an anti-pattern the skill explicitly calls out by name) with locked 100dvh sections, clamp() type, keyboard/touch navigation, a progress bar, and prefers-reduced-motion support that the baseline had none of. The gap: the 'curated style presets' promised in the description live in a sibling skill folder that a standalone install of html-slides never pulls in.
What is the HTML Slides SkillProof Score?
8.4/10 — installs cleanly 4/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 3/5.
How do I install HTML Slides?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use HTML Slides with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.