wehub-resource-sync
78 lines
2.1 KiB
Plaintext
78 lines
2.1 KiB
Plaintext
---
|
||
title: /create-theme
|
||
description: 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:
|
||
|
||
```md title="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:
|
||
|
||
```tsx title="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](/docs/core-feature/themes) for how a theme is consumed.
|
||
|
||
## Using the theme
|
||
|
||
Once the file exists, mention it by name on the next `/create-slide`:
|
||
|
||
```text
|
||
/create-slide for "Q3 board update — use the corporate theme"
|
||
```
|
||
|
||
The agent loads `themes/corporate.md` before writing the deck.
|