Slide Deck
When you want to draft, update, convert, or export a slide deck for a React/Next.js...
Install
npx skills add coreyhaines31/makerskills --skill slide-deck -g -a claude-code -y- Repository
- coreyhaines31/makerskills880
- Category
- Design
- Updated
- 9d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
/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.
- Topic / title, what's the deck about?
- Audience, who's in the room? (technical / executive / mixed / clients) Push for specificity: "founders" is too broad; "B2B SaaS founders at MicroConf" is workable.
- Length, rough slide count: 5, 10 (lightning / short internal) / 10, 15 (short keynote, pitch) / 20, 25 (keynote) / 30+ (workshop, uncommon for branded decks).
- 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).
- CTA, what should the audience do/think/feel after?
- Slug, kebab-case (e.g.,
marketing-like-an-engineer). - Content state, all content ready / rough notes / topic only.
