# Slide Deck

When you want to draft, update, convert, or export a slide deck for a React/Next.js...

- Repository: https://github.com/coreyhaines31/makerskills (880 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add coreyhaines31/makerskills --skill slide-deck -g -a claude-code -y`
Codex: `npx skills add coreyhaines31/makerskills --skill slide-deck -g -a codex -y`
Cursor: `npx skills add coreyhaines31/makerskills --skill slide-deck -g -a cursor -y`
Gemini CLI: `npx skills add coreyhaines31/makerskills --skill slide-deck -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add coreyhaines31/makerskills`

## Description

When you want to draft, update, convert, or export a slide deck for a React/Next.js slide system (${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/). Writes TypeScript Slide[] arrays using your primitives (Eyebrow, Heading, Accent, Body, BulletList, Divider, TwoCol, GradientText), 12 cycling brand gradients, optional sections for "where am I" context, and speaker notes. Inspired by zarazhangrui/frontend-slides, "show, don't tell" for narrative (presents 3 angles, you pick) plus density modes (speaker-led vs reading-first). Four modes, new (draft from brief), update (modify existing, with overflow guards), ppt (convert legacy PPTX → React deck), export (Playwright snapshot existing React deck to standalone HTML, PDF, or Vercel URL, keeps brand). Triggers on "/slide-deck," "/slides new," "/slides export," "/slides update," "/slides ppt," "draft a deck," "deck for [topic]," "talk on [topic]," "keynote on [topic]," "internal deck for [audience]," "convert this pptx," "export this deck.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# /slide-deck, Draft, update, convert, and export branded React decks

Authors React/TypeScript decks for `${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/page.tsx` using the user's slide system. Branded output (no separate HTML pipeline), when portable HTML/PDF is needed, export mode snapshots the rendered React deck via Playwright so the output is brand-perfect.

## Modes (pick one before Step 1)

| Mode | Invocation | Goal |
|---|---|---|
| **new** | `/slide-deck new <topic>` (default) | Draft a new deck from a brief |
| **update** | `/slide-deck update <slug>` | Modify an existing deck (with overflow guards) |
| **ppt** | `/slide-deck ppt <path-to-pptx>` | Convert a legacy PPTX into a React deck |
| **export** | `/slide-deck export <slug> [html\|pdf\|vercel]` | Snapshot a deck to HTML, PDF, or Vercel URL |

For `update`, `ppt`, and `export`, skip to the corresponding mode section below. For `new`, continue through Steps 1, 8.

---

## Step 1, Capture the brief (ask all at once)

Ask in one structured message. Don't round-trip on each.

1. **Topic / title**, what's the deck about?
2. **Audience**, who's in the room? (technical / executive / mixed / clients) Push for specificity: "founders" is too broad; "B2B SaaS founders at MicroConf" is workable.
3. **Length**, rough slide count: 5, 10 (lightning / short internal) / 10, 15 (short keynote, pitch) / 20, 25 (keynote) / 30+ (workshop, uncommon for branded decks).
4. **Density**, *speaker-led* (1 idea/slide, big type, lots of breathing room, more slides if needed) or *reading-first* (4, 6 bullets/slide, structured grids, self-contained for async review).
5. **CTA**, what should the audience do/think/feel after?
6. **Slug**, kebab-case (e.g., `marketing-like-an-engineer`).
7. **Content state**, all content ready / rough notes / topic only.

The rest: https://github.com/coreyhaines31/makerskills/blob/HEAD/skills/slide-deck/SKILL.md