# Create Theme

Use this skill when the user wants to create, draft, author, or extract a slide theme...

- Repository: https://github.com/open-slide/open-slide (9607 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add open-slide/open-slide --skill create-theme -g -a claude-code -y`
Codex: `npx skills add open-slide/open-slide --skill create-theme -g -a codex -y`
Cursor: `npx skills add open-slide/open-slide --skill create-theme -g -a cursor -y`
Gemini CLI: `npx skills add open-slide/open-slide --skill create-theme -g -a gemini-cli -y`

## Description

Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces two paired files under `themes/`, `<id>.md` (palette, typography, layout, fixed Title/Footer components, motion) and `<id>.demo.tsx` (a runnable demo slide that the dev-UI Themes panel previews). Do NOT use for editing real slides, only for authoring the theme bundle.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Create a slide theme

This skill produces a **theme bundle** under `themes/`: two paired files that together describe a reusable visual identity.

1. `themes/<id>.md`, agent-facing documentation: palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. This is what `create-slide` reads when an author picks the theme.
2. `themes/<id>.demo.tsx`, a runnable mini-slide (a normal slide module: `export default Page[]`) that demonstrates the theme on 2, 3 pages. The dev UI's **Themes panel** loads this file and renders it as the theme's live preview.

Both files share the same stem so the runtime can pair them automatically.

A theme is **distinct from a slide's `design` const**. The theme markdown is authoring-time aesthetic direction (copied into a real slide's source by `create-slide`). The demo `.tsx` is a self-contained preview, not a real slide, it does not appear in the slides list. A per-slide `const design: DesignSystem = { … }` (declared at the top of `slides/<id>/index.tsx`) is the runtime tokens object the user can tweak from the Design panel. The markdown commits the *direction*; the per-slide `design` const makes the slide *tweakable*; the demo `.tsx` makes the theme *previewable*.

You only write files under `themes/<id>.md` and `themes/<id>.demo.tsx`. Never modify real slides or other configuration. The canvas / type-scale defaults that themes can override live in the **`slide-authoring`** skill, read it before writing the theme so your overrides are stated explicitly.

## Step 1, Identify the input source

A theme can be derived from any combination of three input shapes:

- **Image references**, paths or URLs to slide screenshots, mood-board images, brand assets.
- **Free-text description**, prose describing the desired palette, fonts, feel.
- **An existing slide**, `slides/<id>/index.tsx` whose visual identity should be lifted out into a reusable theme.

The rest: https://github.com/open-slide/open-slide/blob/HEAD/packages/core/skills/create-theme/SKILL.md