What You’ll Build

By the end of this guide you’ll have the html-slides skill installed in Claude Code and know how to generate HTML presentations from your terminal. One prompt in, one .html file out — open it in any browser and present.

$ ls
team-update.html          # your presentation
team-update.notes.json    # speaker notes for the presenter app

Install the Skill

Pick the method that suits your workflow.

Option 1 — Plugin marketplace (recommended)

claude plugin marketplace add bluedusk/html-slides
claude plugin install html-slides

Option 2 — Quick install script

curl -sSL https://raw.githubusercontent.com/bluedusk/html-slides/main/remote-install.sh | bash

Option 3 — Manual symlink

# Available in all projects
ln -s /path/to/html-slides ~/.claude/skills/html-slides

# Or just this project
ln -s /path/to/html-slides .claude/skills/html-slides

Generate Your First Deck

In Claude Code, invoke the skill with /html-slides followed by a description of what you need. You can also just describe the presentation you want and Claude will pick up the skill automatically.

Example 1 — Quick team update:

/html-slides Create a 5-slide team update. Revenue is up 23%, we hired 4 engineers, and the v2 launch is on track for April.

Example 2 — From an existing doc:

/html-slides Turn README.md into a presentation. Focus on the architecture section and use an architecture flow diagram.

Example 3 — Convert a PowerPoint:

/html-slides Convert quarterly-review.pptx to HTML slides.

Choose a Theme

Claude Code uses Pro mode (Obsidian) by default, which gives you structured interactive components like stats cards, flip cards, diagrams, and charts. You can specify a different theme in your prompt:

/html-slides Create a presentation about our API. Use the Excalidraw Light theme.

Available themes:

  • Obsidian — the default. Rich components on a dark canvas.
  • Excalidraw Light — hand-drawn, whiteboard-style visuals.
  • Excalidraw Dark — hand-drawn visuals on a dark background.
  • Editorial Light — clean, editorial-style layouts.
  • Binary Architect — technical, code-inspired aesthetic.

For vibe mode with creative themes, just say: “Create a vibe presentation about [topic]”.

Tips for Claude Code

  1. Reference your project files directly — Claude Code can read your codebase, so say things like “use the data in metrics.json” or “base the slides on src/api/routes.ts”.
  2. Use the notes file for presenter mode — The skill generates a .notes.json file alongside your slides. Open both in the HTMLSlides app for speaker notes and a timer.
  3. Iterate on your deck — Ask Claude to “add a comparison slide after slide 3” or “change the stats to show Q1 numbers”. The skill updates the file in place.
  4. Works in any directory — The output lands in your current working directory. No config files or project setup needed.

Present Your Slides

You have two options once your deck is ready:

  1. Open the .html file in a browser — Use arrow keys, Space, Home, and End to navigate. That’s it.
  2. Use the HTMLSlides app — Get dual-display presenter mode with your current slide, next slide preview, speaker notes, timer, and a synced laser pointer.

Check the documentation for the full presenter mode walkthrough.