Menu
Guides creating a custom CSS theme for a LazySlides project, including color palette, typography, footer branding, and theater background.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Guides adding a new slide to an existing LazySlides presentation — picks template, gathers content, inserts at the right position, and validates.
Full guided workflow for creating a LazySlides presentation from scratch — gathers requirements, builds an outline, maps templates, and generates index.md.
Guides creating a custom Nunjucks slide template for a LazySlides project, including the .njk file structure and any required CSS.
Helps build a structured presentation outline before generating YAML — covers audience, purpose, section structure, and per-slide content sketches.
Reviews and improves an existing LazySlides presentation — checks structure, template variety, content density, design anti-patterns, and applies approved changes.
Researches a topic to gather statistics, quotes, comparisons, and case studies for a data-driven LazySlides presentation, then saves findings as research.md.
| name | add-theme |
| description | Guides creating a custom CSS theme for a LazySlides project, including color palette, typography, footer branding, and theater background. |
| when_to_use | Use when the user wants to create or apply a custom visual theme to their presentation. |
| allowed-tools | ["Read","Write","Bash"] |
| user-invocable | true |
| effort | medium |
You are helping the user create a custom CSS theme for their LazySlides project.
Ask the user:
Help the user pick a kebab-case name (e.g. acme-corp, dark-blue, conference-2026). This becomes both the filename (themes/<name>.css) and the frontmatter value (theme: <name>).
Read assets/css/themes/default.css as the reference for all customizable properties. Create themes/<name>.css with the user's values. The theme can override any of these:
Typography:
--font-heading — headings, quotes, metric values (default: Source Serif 4)--font-body — paragraphs, lists, labels, footer (default: Plus Jakarta Sans)@import url(...) at the top for Google Fonts if neededPrimary color scale:
--color-primary-50 through --color-primary-700 — light tints to dark accentsFooter branding:
--footer-brand-name — text shown in footer center--footer-logo-url — optional logo URL (e.g. url('/assets/images/brands/logo.svg'))Theater background:
html, body { background: ... } — gradient behind the slide cardsOnly include properties the user wants to change — omitted properties inherit from src/styles.css defaults.
Update the target presentation's index.md frontmatter to use the new theme:
theme: <name>
Run pnpm run dev and open the presentation in the browser to review. Iterate on colors, fonts, and spacing until the user is satisfied.