Slide Deck Generator
A Claude Code skill that generates self-contained HTML slide presentations — Helvetica, editorial layout, 22 slide types, keyboard/touch navigation. Describe a topic or paste data, get a .html file you can open in any browser.
What it does
Type /slide-deck-generator in Claude Code with a topic, outline, or data. The skill generates a complete .html slide deck you can open in any browser — no PowerPoint, no build step, no dependencies.
The design system is editorial and monochrome: Helvetica, left-aligned typography, generous whitespace, and a clean black/white/grey palette. Every deck includes keyboard navigation, touch swipe, a progress bar, and auto-injected page numbers.
Install
Claude Desktop:
- Open Customize → Browse plugins
- Click + → Add marketplace from GitHub
- Enter
AlpacaLabsLLC/skills-for-architects - Install the Presentations plugin
Claude Code (terminal):
claude install github:AlpacaLabsLLC/skills-for-architects/06-presentationsUsage
/slide-deck-generator Q1 results — revenue up 40%, 3 new clients, 2 hiresOr start with a document:
/slide-deck-generator [paste report, outline, or data]The skill plans the narrative arc, selects slide types, and writes the HTML. Output defaults to ~/Documents/presentation.html.
22 Slide Types
The design system includes five categories of slides:
Title — Full-bleed image cover with gradient overlay, or text-only fallback
Content — Heading + body, heading + list, heading + stats, insight lists, two-column layouts
Data — Stat rows (large numbers), stat comparisons (before/after with arrows), data tables, bar charts, timelines, side-by-side comparisons
Statement — Bold centered text on white or dark backgrounds for emphasis
Image — Full bleed, full bleed with title overlay, and grid layouts (2, 3, 4, or 6 images)
Every slide can include a callout annotation for sources or footnotes.
Design System
| Element | Value |
|---|---|
| Font | Helvetica Neue |
| Backgrounds | White (default), light grey, dark |
| Accent | #E8B517 warm yellow (progress bar) |
| Layout | Left-aligned, 60% max content width |
| Brand mark | Customizable wordmark, bottom-right on every slide |
The accent color can be changed per-deck for brand-specific presentations.
Customization
- Accent color — Change
--accentin the CSS for brand-specific decks - Writing style — Headlines are short and opinionated (“We have 18 huddle rooms. At peak, 29 groups need one.” not “Huddle Room Analysis”)
- Slide types — All markup is in
SKILL.md, easy to add new component patterns - Brand variant — Fork the skill and swap fonts, colors, and the brand mark for your own design system
What’s included
SKILL.md— Full skill prompt with HTML template, CSS, JS, and all 22 component patternssample.html— Reference deck demonstrating every slide typeREADME.md— Installation and usage guide