open-slide

/create-theme

Extracts a theme from an existing deck (or a brief).

/create-theme codifies a visual recipe into a reusable theme file. Run it once your decks start sharing a visual language — turn the implicit recipe into a file the agent can read.

What it does

Writes a theme bundle under themes/ — two paired files that share a stem:

  • themes/<id>.md — palette, type stack, layout vocabulary, fixed Title/Footer/Eyebrow components, motion, and voice notes that /create-slide reads on its next run.
  • themes/<id>.demo.tsx — a runnable 2–3 page mini-slide that inlines the same components from the markdown. The dev UI's Themes panel imports it and renders it as the theme's live preview.

Both files are always produced together — a theme without its demo can't preview, a demo without its markdown can't be picked by /create-slide.

The input can be:

  • An existing deck. The skill scans slides/<id>/index.tsx, distils the recurring tokens, and writes them out.
  • A brief. Describe the system in chat ("warm editorial, serif display, high-contrast palette") and the skill bootstraps the bundle from scratch.
  • Image references. Pass screenshots or mood-board images and the skill extracts palette, type, and layout cues from them.

Output

A markdown recipe:

themes/corporate.md
# Corporate

## Palette
- ink: #0a0a0c
- accent: #4a52b5
- mint: #1f8458

## Typography
- display: 'Söhne', system-ui
- mono: 'JetBrains Mono'

## Voice
- Tight, declarative, never coy.
- One concept per slide.

…paired with a preview module:

themes/corporate.demo.tsx
import type { Page } from '@open-slide/core';

const Cover: Page = () => (/* …inline Title / Footer using theme tokens… */);
const Content: Page = () => (/* … */);

export default [Cover, Content];

See Themes for how a theme is consumed.

Using the theme

Once the file exists, mention it by name on the next /create-slide:

/create-slide for "Q3 board update — use the corporate theme"

The agent loads themes/corporate.md before writing the deck.

On this page