create-theme

# Create a slide theme This skill produces one markdown file under `themes/<id>.md` that describes a reusable visual identity for slides — palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. Themes are agent-facing documentation, not executable runtime: a slide author reads the theme markdown and applies it when writing `slides/<id>/index.tsx`. A theme is **distinct from a slide's `design` const**. The theme markdown is authoring-time aesthetic direction (read by `create-slide`, copied into slide source). 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 in the dev UI. Both can coexist: the markdown theme commits the _direction_, the per-slide `design` const makes the slide _tweakable_. This skill only writes the markdown. You only write a single file under `themes/`. Never modify 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. If the user's original message already specifies the inputs unambiguously, skip the question and proceed. Otherwise call `AskUserQuestion` (multi-select) so they can pick one or more sources, and ask follow-ups (paths, slide id, prose) only as needed. ## Step 2 — Gather raw inputs - **Images**: read each path with the `Read` tool (it accepts images). Note dominant colors as hex, type weight/style, layout rhythm, decorative motifs, and any recurring chrome (header bar, footer line, page numbers). - **Text**: extract explicit tokens (hex codes, font names, motion verbs) and implicit tone words ("editorial", "playful", "brutalist"). Resolve vague language into concrete decisions before writing. - **Existing slide**: read `slides/<id>/index.tsx` and pull: - The `palette` object → Palette section. - Font constants and any `font-size` patterns → Typography section. - Padding / alignment patterns → Layout section. - Recurring components (TrafficLights, Eyebrow, Footer-style helpers, WindowShell, …) → Fixed components section. - `@keyframes` blocks and the shared `styles` string → Motion section. - The aesthetic feel implied by the design → Aesthetic paragraph. When inputs disagree (e.g. images use blue but the description says green), ask the user which to honor. ## Step 3 — Pick a theme id Use **kebab-case**, short, descriptive. Examples: `editorial-noir`, `brutalist-mono`, `pastel-soft`, `dev-terminal`. Check `themes/` to avoid collisions. ## Step 4 — Write `themes/<id>.md` Produce a file with this exact section order. Section bodies adapt to the theme; the headings stay consistent across all themes. ````markdown --- name: <Human title, e.g. "Editorial Noir"> description: <one-line elevator pitch> mode: light | dark | system --- # <Theme name> ## Palette | Role | Value | Notes | | ------ | --------- | ------------------------------ | | bg | `#0f172a` | page background | | text | `#f8fafc` | primary copy | | accent | `#fbbf24` | callouts, eyebrow, key numbers | | muted | `#94a3b8` | secondary copy, dividers | | ... | ... | extend as the theme requires | ## Typography - Display font: `<stack>` — weight 800–900 for headlines. - Body font: `<stack>` — weight 400–500. - Type-scale overrides (only list what differs from `slide-authoring` defaults): - Hero title: 180 px (default 140–200 ✓) - Body text: 36 px ## Layout - Content padding: 120 px from canvas edges (1920 × 1080). - Alignment: left-aligned, single column. - Grid notes: optional 12-column overlay at 80 px gutter for content pages. ## Fixed components These are paste-ready. Copy them verbatim into a slide that uses this theme. ### Title ```tsx const Title = ({ children }: { children: React.ReactNode }) => ( <h1 style={{ fontSize: 140, fontWeight: 900, lineHeight: 1.05, letterSpacing: "-0.02em", margin: 0, color: "#f8fafc", }} > {children} </h1> ); ``` ### Footer ```tsx const Footer = ({ pageNum, total }: { pageNum: number; total: number }) => ( <div style={{ position: "absolute", left: 120, right: 120, bottom: 60, display: "flex", justifyContent: "space-between", fontSize: 24, color: "#94a3b8", }} > <span>EDITORIAL NOIR · 2026</span> <span> {pageNum} / {total} </span> </div> ); ``` ### Eyebrow / accents (optional) ```tsx const Eyebrow = ({ children }: { children: React.ReactNode }) => ( <div style={{ fontSize: 26, letterSpacing: "0.2em", color: "#fbbf24" }}>{children}</div> ); ``` ## Motion - Philosophy: static / subtle / rich — pick one and explain in one sentence. - Reusable keyframes (paste-ready, only if the philosophy is subtle or rich): ```css @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } ``` ## Aesthetic One paragraph. What it feels like, the references it draws on, what to avoid (e.g. "no rounded corners; no gradients; no decorative emoji"). Commit to a single direction — minimal, maximalist, editorial, retro, brutalist, soft/pastel, neon, paper/print. ## Example usage ```tsx const Cover: Page = () => ( <div style={{ width: "100%", height: "100%", background: "#0f172a", color: "#f8fafc", padding: 120, display: "flex", flexDirection: "column", justifyContent: "center", }} > <Eyebrow>CHAPTER 01</Eyebrow> <Title>The Big Idea</Title> <p style={{ fontSize: 36, color: "#94a3b8", maxWidth: 1200, marginTop: 32 }}> A short subtitle that explains what this slide is about. </p> <Footer pageNum={1} total={5} /> </div> ); ``` ```` ## Step 5 — Self-review Run this checklist before finishing: - [ ] Palette covers `bg` / `text` / `accent` / `muted` at minimum, all as hex. - [ ] Type scale specifies hero, heading, body, caption sizes (or explicitly defers to `slide-authoring` defaults). - [ ] At least Title and Footer are defined as paste-ready React with concrete inline styles. - [ ] Motion section commits to one of static / subtle / rich. - [ ] Aesthetic paragraph names a single coherent direction. - [ ] File lives at `themes/<id>.md` and only that file was created — no slide changes, no config changes. - [ ] Frontmatter `mode` is one of `light`, `dark`, `system`. ## Step 6 — Hand off Tell the user: - The theme id and file path. - That `/create-slide` will list it as a picker option on its next run. - A one-line summary of the look (palette + aesthetic). Do not run the dev server. Do not modify slides — even to demonstrate the theme; that is the user's next move. ## Anti-patterns - ❌ Writing executable code in `themes/<id>.md` outside the labeled component snippets — the file is documentation. - ❌ Producing more than one file. One theme = one `themes/<id>.md`. - ❌ Inventing palette / fonts when the user supplied images or an existing slide. Extract, don't fabricate. - ❌ Editing `slides/`, `packages/`, `package.json`, or `open-slide.config.ts`. - ❌ Skipping the Fixed components section. Title and Footer are the most common reuse target — they must be paste-ready.