SlideNerds

A presentation runtime for Next.js and a skill library that teaches LLMs to build polished, professional slides. Tell your AI what to build. The skills make sure it looks right.

SlideNerds is a different kind of presentation tool. There is no drag-and-drop editor. No template gallery. No design mode. You talk to an LLM, and it builds your slides in code.

The package has three parts. A runtime that turns any Next.js app into a presentation. A CLI that scaffolds new decks. And 18 skill files that teach LLMs how to build slides that actually look good.

Get started

Create a new deck in four commands:

npx @strategicnerds/slide-nerds create my-talk
cd my-talk
npm install
npm run dev

Or clone the repo:

git clone https://github.com/CoolAssPuppy/slide-nerds.git

Or install into an existing Next.js project:

npm install @strategicnerds/slide-nerds

Then open Claude Code in the project directory and start building slides. The generated CLAUDE.md and .slidenerds/skills/ directory tell the LLM everything it needs to know.

How it works

Tell the LLM what you need: "Build a board update deck with quarterly revenue, a competitive comparison, and a roadmap." It reads the skills, writes the slides, and you see them live in the browser with hot reload.

The runtime

Wrap your layout with SlideRuntime and write slides as <section data-slide=""> elements. The runtime handles navigation (arrow keys, space), speaker notes (press P), Light Table with slide thumbnails (press L), fullscreen (press F), and URL sync. A floating control menu in the corner provides quick access to everything.

Every element with data-step is hidden until the presenter advances. Add animation classes like step-fade, step-move-up, or step-pop for entrance effects. Elements with data-magic-id animate between consecutive slides using FLIP transitions.

The skill library

The 18 skills are the real differentiator. Each one is a markdown file that teaches an LLM a specific domain of slide construction:

Structure: Narrative frameworks (SCQA, Minto Pyramid, PAS), deck templates (investor pitch, board deck, sales deck), and the visual design skill with typography scales, spacing systems, and composition rules.

Content: 13 chart types with Recharts, strategic frameworks (SWOT, 2x2, TAM/SAM/SOM, process chevrons, risk matrix), diagram patterns (flowcharts, org charts, sequence diagrams, journey maps), and advanced layouts (dashboards, pricing comparisons, before/after splits, logo walls).

Quality: Accessibility rules (WCAG contrast, motion reduction, screen reader support), animation timing, and speaker notes conventions.

When you create a new deck, all 18 skills are installed to .slidenerds/skills/ in the project directory. The LLM reads them and applies the patterns.

Brand system

Every deck has a brand.config.ts that controls colors, fonts, and spacing. The layout reads this file and injects CSS custom properties. Change one file and the entire deck rebrands. No hex values in slide code, ever.

The brand skill teaches the LLM how to derive a full palette from a single brand color, how to pair fonts, and how to compute derived opacity tokens for secondary and tertiary text.

Shape system

The SlideShape component renders 18 SVG shapes (circle, hexagon, star, diamond, heart, and 13 more) that support text content inside, image masking via SVG clipPath, and Magic Move transitions. Shapes use brand color tokens so they rebrand automatically.

Who this is for

Developers who present. Teams that need decks fast. Anyone who would rather describe what they want than drag boxes around a canvas.

The slides deploy to Vercel (or anywhere Next.js runs). They are real web pages with real URLs, not proprietary file formats.

Open source

The runtime, CLI, and skill library are open source under the MIT license. The package is @strategicnerds/slide-nerds on npm.