Menú
Guides creating a custom CSS theme for a LazySlides project, including color palette, typography, footer branding, and theater background.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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.