The Problem

Building presentation slides typically requires manual CSS wrestling, slide transition management, and state handling for navigation—time better spent on content. For teams using coding agents, the gap between "make slides about X" and a polished deck involves boilerplate and context-switching. This repo addresses that by providing a framework where slides are described in natural language and the agent writes the React components, with the framework handling the canvas, scaling, navigation, and present mode.

What This Does

open-slide is a pnpm monorepo (582 files) structured around @open-slide/core (runtime and Vite plugin) and @open-slide/cli (scaffolder). The entry points live in apps/demo/slides/—five sample decks including build-on-reveal, claude-code-intro, harness-engineering, image-placeholder-demo, and llm-fundamentals each rendering into a fixed 1920 × 1080 canvas. The scaffolder initiates from packages/cli/template/, generating a minimal workspace where Vite/React/tsconfig stay hidden inside apps/demo/. A changeset/ directory at the root manages version bumps, and GitHub Actions handle CI/CD.

The framework's agent-native authoring flows through two skill paths: /create-slide drafts a deck end-to-end after asking four scoping questions (topic & aesthetic, page count, text density, motion vs. static), while /slide-authoring serves as the technical reference for the 1920 × 1080 canvas, type scale, palette, and layout rules. The in-browser inspector persists comments as @slide-comment markers in source; running /apply-comments applies every pending edit and clears the markers. An assets manager integrates the svgl catalogue for brand logo searches, and present mode supports fullscreen playback with keyboard navigation, current/next slide preview, speaker notes, and a timer. Export generates self-contained static HTML or a print-ready PDF with one command.

How It Is Wired

Execution starts at the CLI entry point: npx @open-slide/cli init my-slide invokes packages/cli/index.ts (the scaffolder), which generates a workspace scaffold including apps/demo/package.json, apps/demo/tsconfig.json, and slide templates under apps/demo/slides/. The demo dev server starts via pnpm dev in apps/demo/, which runs Vite configured in apps/web/next.config.mjs and apps/web/tsconfig.json. The runtime core at packages/core provides the Vite plugin that handles slide navigation, scaling, and present mode—this plugin wraps the 1920 × 1080 canvas context and injects navigation handlers. Each slide component (e.g., apps/demo/slides/build-on-reveal/index.tsx) renders arbitrary React into that fixed canvas; the core watches file changes for hot reload and persists @slide-comment markers in apps/demo/.agents/skills/apply-comments/ and apps/demo/.claude/skills/apply-comments/. Export to static HTML/PDF is triggered through the core's build pipeline, outputting a plain static site with no server dependency.

Internal call graph: CLI init → generated workspace pnpm dev → Vite server with core plugin → slide components render into 1920×1080 canvas → inspector stores @slide-comment markers → /apply-comments applies edits → export generates static HTML/PDF.

Files with widest blast radius: packages/core (runtime + Vite plugin), packages/cli (scaffolder), apps/demo/package.json (workspace entry), apps/web/next.config.mjs (Next config). The core plugin is the single point through which all slide navigation, hot reload, and present mode flow.

What this code touches outside itself: The core Vite plugin injects CSS and JS for navigation controls, present mode overlay, and comment persistence. The CLI generates vercel.json and netlify.toml for deploy targets. @slide-comment markers are written to disk as .md files alongside slide sources.

How To Use It

Setup:

git clone https://github.com/moses-y/open-slide
cd open-slide
pnpm install

Configuration: No environment variables or API keys are required. The apps/demo/open-slide.config.ts file (present in the scaffold) and root package.json handle build targets and presenter settings. The LICENSE file is MIT.

Running it:

pnpm dev    # from apps/demo/

This starts the Vite dev server with the core plugin active. Open http://localhost:5173 to view the slide carousel. Navigation uses keyboard arrows or on-screen controls. To enter present mode, click the present button or press Ctrl+Shift+P.

Scaffolding a new deck:

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

Real-World Use

A developer wants to create a 10-slide deck about agent architecture in under an hour. They run npx @open-slide/cli init agent-deck, answer the scaffolder's four questions (topic: agent architecture; aesthetic: clean tech; pages: 10; text density: medium), and the CLI generates apps/slides/ with skeleton index.tsx files numbered 1–10. They drive the agent with /create-slide, which drafts the structure and writes the React pages. During review, they click any element in the dev server, add a @slide-comment like "change headline font size", then run /apply-comments and the agent repositions the typography automatically. When final, pnpm build exports a static HTML site deployable to Vercel or Cloudflare Pages in one click.

Code Health & Issues

  • 51 test files found across the monorepo, concentrated under packages/core/ and apps/demo/
  • 53 doc files found, including README.md, CLAUDE.md, AGENTS.md, and skill .md files in .agents/ and .claude/
  • No structural red flags: tests, CI, license, and lockfile are present where expected
  • The monorepo uses changeset/ for version management with config.json at root
  • Dependencies are pinned in apps/demo/package.json, apps/web/package.json, and packages/cli/package.json

The Bottom Line

open-slide delivers on its promise: a slide framework that cedes the canvas and navigation to the framework while the agent focuses on content. The scaffolder and inspector skills are the standout features— they genuinely reduce the friction between "I need slides" and "here's a polished deck." The codebase is well-structured for a monorepo (changesets, separate core/CLI packages) and has no missing licensure or CI gaps. Teams already working with coding agents will find the quickest path to present-ready decks; teams outside that ecosystem may find the natural-language scaffolding less relevant than a traditional slide tool, but the static export output is universally usable.