Creating a deck

Ask an agent

The shorter route, and the one the framework is shaped around. From your agent's prompt:

/create-slide intro to vector databases — 6 pages, dense, dark, subtle motion

You do not have to front-load all of that. The skill scopes the deck with you first — what it is about and how it should feel, roughly how long, how much text per page, whether it moves — then chooses an id, plans the running order, and writes the pages into slides/<id>/.

If you already have a look you want it to follow, name the theme in the same sentence and it will read the theme file before it starts. See Themes.

Write the file

Nothing stops you doing it by hand, and for a three-page deck it is often faster. Make a directory, add index.tsx, default-export an array:

import type { Page, SlideMeta } from '@beem-slide/core';

const fill = { width: '100%', height: '100%' } as const;

const Cover: Page = () => (
  <div style={{ ...fill, background: '#0a0a0c', color: '#f6f5f0', padding: 140 }}>
    <h1 style={{ fontSize: 168, letterSpacing: '-0.04em', margin: 0 }}>
      Vector search
    </h1>
  </div>
);

const Outline: Page = () => (
  <div style={{ ...fill, background: '#0a0a0c', color: '#f6f5f0', padding: 140 }}>
    <h2 style={{ fontSize: 84, margin: 0 }}>Three questions</h2>
  </div>
);

export const meta: SlideMeta = {
  title: 'Vector search',
  createdAt: '2026-08-20T09:00:00Z',
};

export default [Cover, Outline] satisfies Page[];

The dev server is watching slides/, so the deck shows up in the browser as soon as the file exists — no registration step, nothing to add to a manifest.

Conventions worth keeping

Ids are kebab-case and permanent-ish. q2-launch, intro-to-rag, 2026-roadmap. The directory name is the id, and it travels into URLs, the --deck build filter and the cloud, so renaming it later is a small migration rather than a rename.

One directory holds everything that deck needs. Images, fonts, video and any helper components go inside it. A deck that reaches outside its own folder stops being movable, and moving decks between workspaces is a thing people do.

Split once a deck gets long. Under five pages, keep every component in index.tsx. Past that — or if a single page runs past a couple of hundred lines — give each page its own file under pages/<NN>-<name>.tsx and let index.tsx do nothing but import and order them. Edits then touch one page's file instead of the whole deck.

Leave the project files alone from inside a deck. package.json, beem-slide.config.ts and the other decks are not a deck's business.

What a page must not do

The canvas does not scroll, so content below 1080px is cropped silently. Do not reach for overflow: auto, negative margins or a transform to make an over-full page fit — split it into two pages instead. The canvas page has the reasoning and /slide-authoring has the arithmetic.