PROCEDURE

Set Up the /presentation Skill

A Claude Code slash command that generates self-contained HTML slide decks. One file, zero dependencies, any browser.

What You're Building

The /presentation skill is a custom slash command for Claude Code. When you type /presentation in a Claude Code session, it generates a complete HTML slide deck from a content brief.

1

Single HTML File

No PowerPoint, no Canva, no external dependencies beyond Google Fonts

12

Slide Components

Title, cards, flow diagrams, comparison tables, stat rows, and more

5

Colour Presets

Or provide your own custom hex codes

The output file includes:

  • ▸ Scroll-snap navigation between slides
  • ▸ Click-to-advance and keyboard arrow controls
  • ▸ Fixed navigation dots
  • ▸ Responsive layout for any screen size
  • ▸ Print-to-PDF support (Ctrl+P, landscape, one slide per page)

Before You Start

✓

Claude Code installed and authenticated

Claude Code is Anthropic's CLI tool. You need it installed and logged in. This is what runs the skill.

✓

A text editor

You'll be creating markdown and HTML files. VS Code, Notepad++, or any text editor works.

Setup Procedure

1

Create the directory structure

Claude Code looks for slash commands in a commands folder inside ~/.claude/. Create two directories:

mkdir -p ~/.claude/commands
mkdir -p ~/.claude/templates

Windows paths: C:\Users\YourName\.claude\commands\ and C:\Users\YourName\.claude\templates\

2

Create the boilerplate template

Create a file called presentation-boilerplate.html in ~/.claude/templates/.

This is the component library — a single HTML file that contains the full <style> block with CSS custom properties, every slide layout pattern, the <nav class="nav-dots"> element, and the <script> block for navigation. Claude reads this file at runtime and uses its patterns to assemble your slides.

Your boilerplate should define these slide components:

Title slide

Headline, subtitle, optional tags

Cards (2, 3, or 4 column)

Big number/icon + heading + body

Two-column split

Side-by-side cards or lists

Comparison table

Before/after with rationale column

Flow diagram (3–5 steps)

Horizontal process with arrows

Loop/cycle diagram

6-step circular process

Outcome list

Numbered items with heading + detail

Stat row

Big numbers with labels

Issue / question list

Numbered badges with descriptions

Gap badges

Metrics with left accent border

Big question

Single provocative italic question

Closing slide

Summary statement or call to action

Tip: Don't know where to start? Open a Claude Code session and ask: "Create me a presentation boilerplate HTML file with scroll-snap navigation, 12 slide component types, CSS custom properties for theming, and print-to-PDF support." Save the output to ~/.claude/templates/presentation-boilerplate.html.

Each slide in the boilerplate uses a data-slide attribute with a sequential index, a .slide-number div with a zero-padded number (01, 02, etc.), and a background class like .slide--primary, .slide--secondary-1, or .slide--grey.

3

Create the skill file

Create ~/.claude/commands/presentation.md. This is the instruction file Claude follows when you invoke the command.

Start the file with a pointer to your boilerplate:

# Presentation Builder

Load the boilerplate template before proceeding:
- `~/.claude/templates/presentation-boilerplate.html`

Then define the workflow. The skill file should instruct Claude to follow these five steps:

Step 1: Parse the brief

Extract from the user's input:

  • ▸ Topic — what is the presentation about?
  • ▸ Audience — who will see it?
  • ▸ Slide count — how many? (default 8–12)
  • ▸ Content outline — any specific points or structure

If the user typed /presentation with no arguments, ask for details interactively — one question, not five.

Step 2: Clarify colours (mandatory)

Present two options:

Option A — Choose a preset palette:

Lone Wolf Unleashed
Corporate Navy
Forest & Gold
Slate & Coral
Deep Purple

Option B — Custom colours: Ask for 5 hex codes:

  1. Primary (dark background) — title slides, key sections
  2. Accent (highlights) — emphasis, bullet markers, active nav dots
  3. Secondary 1 (alternate dark bg) — secondary sections
  4. Secondary 2 (tertiary dark bg) — variant slides
  5. Secondary 3 (supporting colour) — additional backgrounds, flow icons

Claude auto-derives --accent-light, --support-light, --grey-bg (#F2F2F2), and --primary-90 from these.

Step 3: Clarify structure (if needed)

If the brief already implies a clear structure, skip this. Otherwise, recommend slide types from the component library based on the content. Don't list all 12 mechanically — use judgement.

Step 4: Build the HTML

Instruct Claude to:

  • ▸ Copy the full <style> block from the boilerplate, substituting chosen colours into the CSS custom properties
  • ▸ Include the <nav class="nav-dots"> element (always)
  • ▸ Assemble slides using only the component patterns from the boilerplate
  • ▸ Copy the full <script> block exactly — do not modify the JavaScript
  • ▸ Only include slide types actually used — no empty templates
  • ▸ Alternate dark and light backgrounds for visual rhythm

Step 5: Save and confirm

Ask the user where to save. Default to the current directory with a kebab-case filename (e.g., q1-board-update.html). Report: file path, slide count, colour palette used, and a reminder to open in browser.

4

Optional: Add a brand logo

If you want your logo on the title and closing slides, convert it to a base64 data URI and save it as a text file in your templates folder (e.g., ~/.claude/templates/my-logo-b64.txt).

Add a step in your skill file that reads this file and inserts an <img> tag as the first child inside the slide section: 

<img src="[DATA_URI]" alt="Your Brand"
     height="80"
     style="width: auto; flex-shrink: 0;
            align-self: flex-start;
            margin-bottom: 20px;">

Why base64? The output is a single self-contained HTML file. No external image references means it works offline, in email attachments, and prints cleanly to PDF.

5

Test it

Open Claude Code and run:

/presentation "Test Deck" 4 slides for myself

Claude should:

  • ▸ Ask you to choose a colour palette
  • ▸ Generate a 4-slide HTML file
  • ▸ Save it and tell you the file path

Open the file in your browser. Check that:

  • ▸ Arrow keys navigate between slides
  • ▸ Navigation dots appear and are clickable
  • ▸ Ctrl+P shows a landscape print preview with one slide per page

Usage Examples

/presentation "Q1 Board Update" 8 slides for executive team

/presentation SIA system design review for the project team

/presentation

(no arguments — Claude asks you for details interactively)

Want More Resources Like This?

Unleash AI members get access to frameworks, templates, live workshops, and hands-on guidance — all included.

Join Unleash AI