slide-deck
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" applied to narrative (presents 3 angles, you pick) plus density modes (speaker-led vs reading-first). Four modes — new (draft from brief), update (
npx skills add coreyhaines31/makerskills --skill slide-deck --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# /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)
- Modes (pick one before Step 1)
- Step 1 — Capture the brief (ask all at once)
- Step 2 — Three narrative angles
- Step 3 — Outline
- Step 4 — Expand to slide content
- Step 5 — Speaker notes
- Step 6 — Generate files
- Step 7 — Preview
- Step 8 — Archive
- Mode: update
- Mode: ppt
- Mode: export
- Modes (quick invocations)
- Composes with
lsof -i :3000-3099 2>/dev/null | grep -E "LISTEN" | head
Suggested URL pattern
echo "Preview at: http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>"
cd ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site} && npm run dev
then visit http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>
pip install python-pptx 2>/dev/null
python3 -c "
from pptx import Presentation
import json, sys
p = Presentation(sys.argv[1])What does the slide-deck skill do?
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" applied to narrative (presents 3 angles, you pick) plus density modes (speaker-led vs reading-first). Four modes — new (draft from brief), update (
How do I install it?
Run `npx skills add coreyhaines31/makerskills --skill slide-deck --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From coreyhaines31/makerskills, a repository with 500 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.