skills.rest
rstagi
rstagiCOMMUNITY
Explore all skills by this author →
Website𝕏@rstagi_GitHub

talk-slides-build

Builds conference talk decks as React apps or reveal.js vector PDFs from slide specs.

1|Updated Nov 25, 2021
Search Tags:#react#presentation#slides#conference talk#reveal.js#deck#pdf export
One-click install
npx skills add https://github.com/rstagi/dotfile --skill talk-slides-build-rstagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: talk-slides-build
Source: https://github.com/rstagi/dotfile/tree/main/.claude/skills/talk-slides-build
Command: npx skills add https://github.com/rstagi/dotfile --skill talk-slides-build-rstagi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, framer-motion, vite, typescript, reveal.js, playwright, and includes references (resource) and assets (resource) components.

What problem does it solve? Turning a finished slide-content spec, style spec, and delivery plan into an actual presentable deck is tedious and error-prone; this Skill renders those three upstream artifacts into a working deck without rewriting the content. ## Core Features & Use Cases - Custom React world-deck (default): Scaffolds a verified React + Vite + Framer Motion engine, skins it with the style spec's design tokens, maps slides to typed scenes, and builds hand-crafted SVG world visuals with fragment-staged reveals. - reveal.js to vector PDF (fallback): When a conference requires a PDF, it authors reveal.js Markdown, applies the token theme, and exports a text-selectable PDF with embedded fonts via Playwright and Chrome. - Speaker notes integration: Lifts per-slide delivery cue cards verbatim into the deck's presenter-notes overlay or reveal Note blocks. - Use Case: You have 02-slides-content.md, 04-slides-style.md, and 03-delivery-plan.md in a talk directory; run this Skill to produce a deck/ app you can present live, plus a verified deck.pdf if the venue requires one. ## Quick Start Build the deck from the slide content, style, and delivery specs in my talk working directory.

Frequently Asked Questions about talk-slides-build

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a conference talk deck from a slide spec?▼

Place the slide-content, style, and delivery-plan markdown files in a talk working directory, then invoke the build step. It scaffolds a React + Vite + Framer Motion app, fills design tokens from the style spec, and maps each slide to a typed scene with speaker notes.

How do I export a reveal.js presentation to a selectable PDF?▼

Run npm run export:pdf, which serves the deck, loads it in headless Chrome with ?print-pdf, waits for fonts, and calls page.pdf with printBackground enabled. Verify with pdfinfo, pdffonts, and pdftotext that pages match the slide count and fonts are embedded.

React deck vs reveal.js for conference slides?▼

Use the custom React world-deck for live or recorded presentations where a distinctive metaphor-driven world matters. Use reveal.js only when the deliverable is a vector PDF, such as a conference upload or print leave-behind, since the React app does not export clean vector PDFs.

Why does my exported PDF have more pages than slides?▼

Stepped code highlights or fragments are being exported as separate pages. Collapse stepped highlight ranges to a single range and confirm pdfSeparateFragments is false and pdfMaxPagesPerSlide is 1, then re-export.

Why do fonts render as boxes or fall back in the deck?▼

The Google Fonts link in index.html does not match the font family names in the CSS tokens, or the network was unavailable during export. Align the link with the token names or self-host the woff2 files for offline and CI builds.

When should I not use this deck-building approach?▼

Skip it when the venue mandates an editable .pptx with builds or a corporate master template, since neither render path produces that. Also skip if the upstream content, style, or delivery specs do not exist yet.

Related Skills

Explore More Content & Communication Skills→
mahg-esmahg-es
3

slide-deck-generate

Generate branded slide deck structures with per-slide content and speaker notes.

Official
Intermediate
RylaispiritRylaispirit
55

academic-slides

Plan, create, and review academic presentation decks for conference talks and thesis defenses.

Community
Intermediate
yoanbernabeuyoanbernabeu
34

slidev-deployment

Deploy Slidev presentations to GitHub Pages, Netlify, Vercel, or Docker.

Community
Advanced
rojim666rojim666
68

ardot-slides

Generates slide deck designs on the Ardot canvas using a six-phase workflow.

Community
Advanced