HTML Slide Deck — Setup Guide

The guide

A Claude Code skill that builds HTML slide decks you can edit, reorder, and save without leaving the browser. This guide walks you through installing it, generating your first deck, and the everyday workflow.

What you get

A Claude Code skill named html-slide-deck. It contains two files:

• SKILL.md — the skill descriptor Claude reads to know what the skill does.
• template.html — a single self-contained HTML file with the slide infrastructure already wired: navigation, inline editing, drag-and-drop reorder, save in place, PDF export.

Once installed, you ask Claude Code to build a deck. It copies the template into your project and fills it with your content.

What you need

1. Claude Code installed (the CLI or the VS Code extension).
2. A Chromium browser (Chrome, Edge, Brave, or Arc) for the save-in-place feature. Safari and Firefox can still present and edit; they fall back to downloading a new file each time you save.

That's the whole stack.

Install the skill

Two ways to do this. Pick whichever is easier for you.

Option A — from GitHub

Open the skill repository: https://github.com/emmaguetta/html-slide-deck

Click the green Code button → Download ZIP. Unzip it. Drop the html-slide-deck folder into:

• ~/.claude/skills/ if you want the skill available in every project (recommended), or
• .claude/skills/ inside one specific project if you only want it there.

If the skills/ folder doesn't exist yet, create it with Finder (or your editor's file explorer). No terminal needed.

Option B — copy-paste

If you'd rather not download a ZIP, create the folder structure yourself and paste the two files in.

1. In Finder, go to your home folder (or your project folder).
2. Make sure hidden folders are visible: in Finder, press Cmd + Shift + . (period).
3. Create the path .claude/skills/html-slide-deck/ by clicking through and adding folders as needed.
4. Inside that folder, create two files using your text editor:
   • SKILL.md — paste the contents from the lead magnet bundle (or from the GitHub repo).
   • template.html — paste the contents from the lead magnet bundle (or from the GitHub repo).

That's it. No installation script.

After installing either way, restart your Claude Code session so it picks up the new skill.

Create your first deck

In a Claude Code session, ask for a deck. Be specific about what should be on it:

"Build me a pitch deck for [your product]. Brand colors: [hex codes or color names]. I want these slides: [cover, problem, solution, product, competition, team] (or whatever fits your story)."

Claude Code will:

1. Read template.html from the skill folder.
2. Write a copy into your project (e.g. slides/deck.html).
3. Adapt the CSS variables at the top of the file to your brand colors.
4. Replace the placeholder content in each <section class="slide"> with your story.
5. Number the page indicators.

Open the file in a Chromium browser. You'll see the cover slide and the toolbar in the top-right corner.

Present

Standard slide-deck shortcuts:

• ← / → (or PageUp / PageDown, or Space) move between slides.
• Home / End jump to the first / last slide.
• Click the right half of a slide for next, the left half for previous.
• The URL hash tracks the current slide: deck.html#5 opens directly on slide 5.

The deck is designed at 1280 × 720 (16:9) and scales to fill any window while keeping the aspect ratio.

Edit text inline (✎)

Click ✎. Every editable element gets a subtle dashed outline on hover. Click into any headline, paragraph, bullet, or label, and type. Changes are live in the DOM but not yet on disk.

While edit mode is on, arrow keys move the text cursor instead of navigating slides. Click ✎ again to exit edit mode and resume keyboard navigation.

Reorder slides (⋮⋮)

Click ⋮⋮. A panel appears at the bottom of the screen with every slide as a draggable thumbnail (page number + headline).

Drag a thumbnail to where you want it. The actual sections move in the DOM, and the page numbers renumber from 01 upward. The cover slide stays unnumbered.

Save back to the file (💾)

Click 💾. The first time you click it in a fresh session, the browser asks where to save. Pick the deck file you have open. Subsequent saves in the same session are silent (the button flashes green).

Behind the scenes, the file pointer is stored in your browser. The next time you open the deck, you don't have to pick the file again. The browser will just ask once per session ("Allow this site to write to this file?"). Click Allow, then every save until you close the tab is silent.

The saved file keeps the toolbar in it, so opening it again immediately gives you the same editor.

If the browser doesn't support save-in-place (Safari, Firefox, or older Chromium), the save falls back to downloading a new file (deck-edited.html).

Export to PDF

Click PDF. Your OS print dialog opens with the deck pre-laid-out: one slide per landscape page, no toolbar, no decorations. In macOS or most Chromium browsers, pick Save as PDF from the destination dropdown.

The print stylesheet matches the slide aspect ratio exactly, so the PDF is clean.

Customize the look

All visual tweaks happen in the <style> block at the top of the file. Six CSS variables in :root drive the entire palette. Change those hex values and the deck rebrands.

You can also rewrite the whole <style> block, swap fonts, or change layouts. As long as you keep the structural classes intact (.stage, .viewport#vp, .track#track, <section class="slide">, the four toolbar button IDs, and .page for page numbers), the toolbar keeps working.

Add a new slide

Copy any <section class="slide"> block in the file, edit the content, and place it where you want in the track. Either set its <div class="page">NN</div> to the right number, or hit reorder afterwards and let the page numbers renumber automatically.

The new section is automatically picked up by the navigation, the edit mode, and the reorder panel.

FAQ

Why does "Save" ask for permission every time I refresh? That's a Chromium security rule, not a bug. The browser asks once per session ("Allow this site to write to this file?"). Click Allow, then every save until you close the tab is silent. The file pointer itself is remembered across sessions, so you don't have to pick the file again — only re-grant permission.

Can I share this with my team? Yes. Send them the GitHub link above or the folder. They drop it in their ~/.claude/skills/ and they get the same workflow.

Can I use it in Safari? You can present, edit, and reorder. Save in place doesn't work in Safari (no File System Access API), so it falls back to a download. PDF export works.

How big can the deck get? The file size is mostly driven by base64-embedded images. A text-only deck is around 30 KB; a 12-slide deck with two embedded photos and one screenshot is around 600 KB. Browsers handle multi-megabyte HTML files without issue.

Can I edit it offline? Yes. Once Google Fonts has been loaded once (cached by the browser), the deck works offline. Save in place needs no network.

Going further

Once you're comfortable with the template, you can extend it:

• Add new components by defining a class in the <style> block, then adding the class to EDITABLE_SEL in the script so it becomes editable in ✎ mode.
• Embed images as base64 so the deck stays a single portable file.
• Replace the wordmark text with an inline SVG logo.
• Host the saved file as a static page (Netlify, GitHub Pages) to share it publicly.