Create Theme
Use this skill when the user wants to create, draft, author, or extract a slide theme...
Install
npx skills add open-slide/open-slide --skill create-theme -g -a claude-code -y- Repository
- open-slide/open-slide9.6k
- Category
- Design
- Updated
- 6d ago
- License
- MIT
- Context cost
- Mediumabout 2,816 tokens
- Runs scripts
- No, instructions only
What it does
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.
Create a slide theme
This skill produces a theme bundle under themes/: two paired files that together describe a reusable visual identity.
themes/<id>.md, agent-facing documentation: palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. This is whatcreate-slidereads when an author picks the theme.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.tsxwhose visual identity should be lifted out into a reusable theme.
