Getting started

Install

npx @open-slide/cli init my-deck
cd my-deck
npm run dev

The scaffolder generates a workspace (abridged — see open-slide init for the full tree):

my-deck/
├── slides/
│   └── getting-started/    # your first slide
├── themes/                 # shared design systems
├── .agents/skills/         # bundled agent skills
├── open-slide.config.ts    # framework config
├── AGENTS.md               # agent rules (CLAUDE.md symlinks to it)
└── package.json

npm run dev boots the dev server on http://localhost:5173 (or the next free port) with hot module reload, the inspector, and the assets panel.

Author with an agent

Open the workspace in any agent-aware editor — Claude Code, Codex, Cursor, Windsurf, Zed, etc. From the agent prompt:

/create-slide for "Q2 launch — 3 chapters, mixed text density, subtle motion, dark aesthetic"

The skill scopes the deck (theme, aesthetic, page count, density, motion), picks an id, plans the structure, and writes the pages under slides/<id>/index.tsx.

Iterate visually

1. Click any element in the browser preview.
2. Pick Comment and type a note — "use the accent colour on this title", "shrink to 88px", "swap to assets/cover.png".
3. Save. Comments are persisted as @slide-comment markers in the source.
4. Run /apply-comments in your agent. It rewrites exactly the flagged regions and clears the markers.

You can also edit text, typography, and colour directly from the inspector property panel — see Inspector.

Build & deploy

npm run build      # static build to dist/
npm run preview    # preview the static build locally

The output is a plain static site — deploy to Vercel, Cloudflare Pages, Zeabur, Netlify, or any static host.

What's next