W.
CLAUDE CODE SKILL

Deck Builder

Build polished, interactive HTML presentation decks from a conversation. Describe the moment — who’s in the room, what the format is, what it should feel like — and get a complete deck as a single .html file. No PowerPoint. No Google Slides. No build tools.

01

Describe the Moment

Who’s the audience? What’s the format? What should it feel like? Three inputs. The style follows the moment.

02

Claude Builds It

Layout, typography, color, animations, interactive elements — all handled. One HTML file, zero dependencies. Opens in any browser, works offline.

03

Iterate in Plain English

“Make the accent color warmer.” “Add a timer to the retro slide.” “Match the brand to stripe.com.” No CSS. No code. No Figma.

STYLES

6 Named Visual Styles

Each style is a complete visual identity — typography, color palette, spacing, and layout patterns. Choose one, or point Claude at any brand site and it will match the aesthetic.

Editorial Warmth

Serif headlines, warm paper tones, thick editorial rules. Board reviews, strategy presentations, anything that should feel like a well-crafted longread.

Cohort Dark

Dark background, accent color pops, mono type. Developer-facing talks, product launches, anything that should feel like a polished dev tool.

Swiss Rigor

Grid-locked layouts, Helvetica-style type, minimal color. Data-heavy presentations, quarterly reviews, anything that needs to feel precise.

Terminal Brutalism

Monospace everything, raw borders, high contrast. Technical deep-dives, engineering all-hands, anything that should feel unvarnished and direct.

Magazine Feature

Full-bleed images, overlapping type, editorial pacing. Keynotes, product reveals, anything that needs cinematic energy.

Bento Modern

Card-based grid layouts with expandable tiles. Workshops, capability overviews, anything where the audience explores at their own pace.

CAPABILITIES

9 Interactive Features

These aren’t slide features — they’re meeting tools. The deck does work during the meeting.

•
Inline TimersStart, pause, reset — right on the slide. No tab-switching during workshops.
•
Click-to-CopyOne click, paste-ready. Drop links or code blocks into Zoom chat instantly.
•
Word-by-Word RevealsAnimated text that builds with the beat of your delivery.
•
Video EmbedsLoom or YouTube inline. The audience never leaves the deck.
•
Expandable Bento TilesClick a card to expand it. Great for self-paced exploration.
•
Persistent Brand BarYour name and branding visible on every slide.
•
Progress RailSection-aware navigation with dot progress and keyboard shortcuts.
•
Password GateOptional password protection for private decks shared via URL.
•
Keyboard NavigationArrow keys, spacebar, T for timers. Present from any browser.
WHAT’S INSIDE

The Skill Package

The deck-builder skill is a structured set of reference files that give Claude deep knowledge about presentations:

  • SKILL.md — Core instructions and the 7-step workflow
  • presentation-principles.md — Cognitive science of how people process slides
  • narrative-arc-templates.md — 6 story structures mapped to deck types
  • style-catalog.md — Full specs for all 6 visual styles
  • capabilities-catalog.md — 9 interactive affordances with implementation details
  • workshop-pedagogy.md — Instructional design for training decks
  • speaker-notes-guide.md — How to write notes that complement the slides
  • starter-template.html — HTML/CSS/JS shell that every deck starts from
INSTALL

Get Started

Option A — Claude.ai, Desktop App, or Cowork

  1. Download the ZIP file below
  2. In Claude (or Cowork), click Customize in the sidebar
  3. Go to Skills and click +
  4. Choose Upload a skill and select the ZIP
  5. Type /deck-builder and describe your moment
Download deck-builder.zip ↓

Option B — Claude Code (CLI, VS Code, JetBrains)

Clone the repo to your skills directory:

git clone https://github.com/bvwill/deck-builder ~/.claude/skills/deck-builder

That’s it. Next time you open Claude Code, say “build me a deck” and the skill activates. Update any time with cd ~/.claude/skills/deck-builder && git pull.

Both options give you the same skill. The ZIP is the easiest if you’re on claude.ai, the desktop app, or Cowork. The git clone is best if you want automatic updates via git pull.
DELIVERY

How to Present

Every deck ships as a single .html file. No build step. No dependencies. Four ways to use it:

Present Live

Open the file, hit F11 for fullscreen, present from your browser. Arrow keys to navigate.

Export to PDF

Cmd+P, Save as PDF. Send as an attachment or print it.

Screenshot Slides

Grab individual slides for Slack, email, or LinkedIn posts.

Deploy to a URL

GitHub Pages, Netlify, or any host. Share a link. Optional password protection built in.

OPEN SOURCE

View on GitHub

The full source is on GitHub. Star the repo, file issues, or fork it and make it your own.

github.com/bvwill/deck-builder →

MIT + Commons Clause. Free to use, modify, and share. You own everything you create with it — sell your decks, use them commercially, no restrictions on output.

GO DEEPER

Learn to Build Your PM Operating System

Deck-builder is one skill. The Maven bootcamp teaches you how to build an entire operating system with Claude Code — competitive monitoring, feedback synthesis, content pipelines, and more.

AI for Product Managers

Cohort 2 · Starts May 30 · 4 weeks · Limited to 30 seats

Learn More on Maven →
LIGHTNING LESSON

Watch the Free Lesson

A 30-minute lightning lesson covering the deck-builder workflow end to end — from describing the moment to shipping a polished deck. See the skill in action, watch brand matching and iteration live, and learn the three-part framing that makes every deck fit its audience.

Watch on Maven →
← BACK TO RESOURCES