Skip to content
Get packs

HTML Slide Deck Studio

Builds polished slide decks as static HTML with themes, animations and a presenter mode

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
15 files

What it does

Once installed, the agent can turn your notes or text into a presentable slide deck made of plain HTML, CSS and JavaScript files that open in any browser. It offers dozens of visual themes, ready-made page layouts, CSS and canvas animations, keyboard navigation, and a presenter view with speaker notes and a timer. The name and description in the file are oddly framed around consulting delivery, but the actual capabilities are general slide-making.

Great for

  • People who want a web-viewable slide deck without using PowerPoint or Keynote
  • Presenters who want speaker scripts and a presenter view alongside their slides
  • Designers who want to choose from many themes and animation effects quickly

Skip it if

  • Users who need an editable .pptx file for colleagues, since the output is HTML (reason: the skill does not describe PPTX export)
  • Confidential client material shared to an external service, since the skill can fetch CDN webfonts and the overview is consulting-focused (reason: data handling is not explained)

Try asking

  • “Make a 10-slide pitch deck from these bullet points using a dark theme”
  • “Write a presenter-mode deck with 150-300 words of speaker notes per slide for my team talk”
  • “Turn this report into a deck with the editorial-serif theme and a timeline layout”
Step-by-step guide: how to use HTML Slide Deck StudioInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the Apache-2.0 licence and an attribution note.

    html-ppt.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip html-ppt.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html-ppt.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the theme or layout you want in your request, or let the agent pick one from the list
  • Ask for presenter mode explicitly if you want speaker notes, and review the generated script before presenting
  • Open the deck in a browser and test the S key presenter view before the real talk

What's inside

  • assets/animations/animations.css
  • assets/animations/fx-runtime.js
  • assets/animations/fx/_util.js
  • assets/animations/fx/chain-react.js
  • assets/animations/fx/confetti-cannon.js
  • assets/animations/fx/constellation.js
  • assets/animations/fx/counter-explosion.js
  • assets/animations/fx/data-stream.js
  • assets/animations/fx/firework.js
  • assets/animations/fx/galaxy-swirl.js
  • assets/animations/fx/gradient-blob.js
  • README.md
  • README.pt-BR.md
  • README.zh-CN.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.