Create a frame

open-frame is built around a tight loop: init → create → iterate. This page covers the create step. Once a deck exists, head to Iterate for the feedback loop.

With an agent

The recommended path — open your editor, ask:

/create-frame for "intro to vector databases — 6 pages, dense text, dark aesthetic, subtle motion"

/create-frame asks four scoping questions, picks a deck id, plans the structure, and writes pages under frames/<id>/index.tsx. See /create-frame for the full skill walk-through.

By hand

Create a folder, add an index.tsx, default-export an array of components.

import type { Page, FrameMeta } from '@open-frame/core';

const Cover: Page = () => (
  <div style={{ width: '100%', height: '100%', background: '#0a0a0c', color: '#f6f5f0' }}>
    {/* anything you can render */}
  </div>
);

const Outline: Page = () => <div>{/* ... */}</div>;

export const meta: FrameMeta = { title: 'Intro', theme: 'corporate' };

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

The dev server picks it up and adds it to the frame browser automatically.

Conventions

• IDs are kebab-case: q2-launch, intro-to-rag, 2026-roadmap.
• One folder per deck. Co-locate everything that deck needs.
• Don't touch package.json, open-frame.config.ts, or other frames from inside a deck folder.