Web-Video-Presentation Skill: Complete Guide to All 23 Built-In Themes

The web-video-presentation skill includes 23 built-in themes located in skills/web-video-presentation/themes/, each providing pre-configured design tokens via theme.json and compiled CSS variables in tokens.css.

The ConardLi/garden-skills repository hosts the web-video-presentation skill, a specialized tool for generating video presentations with consistent styling. This skill ships with 23 distinct built-in themes ranging from professional editorial designs to experimental creative styles, all stored in the themes/ directory with standardized configuration files.

Complete List of Built-In Themes

The web-video-presentation skill provides 23 themes covering diverse aesthetic categories. Each theme resides in its own subdirectory under skills/web-video-presentation/themes/:

Theme Name	Directory Path
Warm Keynote	themes/warm-keynote/
Vintage Editorial	themes/vintage-editorial/
Terminal Green	themes/terminal-green/
Swiss IKB	themes/swiss-ikb/
Sunset Zine	themes/sunset-zine/
Split Canvas	themes/split-canvas/
Pastel Dream	themes/pastel-dream/
Paper Press	themes/paper-press/
Newsroom	themes/newsroom/
Neon Cyber	themes/neon-cyber/
Monochrome Print	themes/monochrome-print/
Midnight Press	themes/midnight-press/
Kraft Paper	themes/kraft-paper/
Indigo Porcelain	themes/indigo-porcelain/
Forest Ink	themes/forest-ink/
Electric Studio	themes/electric-studio/
Dune	themes/dune/
Dark Botanical	themes/dark-botanical/
Creative Voltage	themes/creative-voltage/
Chalk Garden	themes/chalk-garden/
Bold Signal	themes/bold-signal/
Blueprint	themes/blueprint/
Bauhaus Bold	themes/bauhaus-bold/

Each theme directory contains two critical files: theme.json defining the design tokens and tokens.css providing the compiled CSS variables.

Theme Architecture and File Structure

Understanding the file structure is essential for customizing or debugging themes in the web-video-presentation skill.

Core Theme Files

Every theme follows a consistent structure within skills/web-video-presentation/themes/:

• theme.json: Defines colors, typography, spacing, and other design tokens in JSON format
• tokens.css: Compiled CSS custom properties (variables) generated from the JSON configuration

Key Skill Integration Files

Several files manage theme integration across the skill:

• skills/web-video-presentation/manifest.json: Declares the default theme and skill metadata
• skills/web-video-presentation/SKILL.md: Contains human-readable documentation and usage instructions
• skills/web-video-presentation/references/THEMES.md: Documents theme conventions and token structure standards
• skills/web-video-presentation/templates/src/registry/types.ts: TypeScript definitions including the ThemeId union type enumerating all 23 theme identifiers

How to Select and Apply Themes

The web-video-presentation skill supports three methods for theme selection: manifest configuration, runtime JavaScript API, and direct CSS inclusion.

Configuring the Default Theme in Manifest

Set the default theme by modifying defaultTheme in the skill manifest:

// skills/web-video-presentation/manifest.json
{
  "name": "web-video-presentation",
  "description": "Create a video-presentation with styled slides.",
  "defaultTheme": "warm-keynote"
}

Replace "warm-keynote" with any valid theme folder name from the 23 available options.

Runtime Theme Selection via JavaScript

Override the default theme programmatically when initializing the presentation:

import { initPresentation } from '@garden-skills/web-video-presentation';

await initPresentation({
  theme: 'electric-studio',
  // additional configuration options
});

The theme parameter accepts any of the 23 theme identifiers defined in the ThemeId union type.

Direct CSS Variable Access

For custom implementations or external styling, import the theme's CSS variables directly:

<link rel="stylesheet" href="/skills/web-video-presentation/themes/electric-studio/tokens.css">
<style>
  body {
    background: var(--background);
    color: var(--primary);
  }
</style>

This method provides access to all design tokens defined in the source theme.json without requiring JavaScript initialization.

Summary

• The web-video-presentation skill includes 23 built-in themes ranging from editorial styles like Vintage Editorial and Newsroom to experimental designs like Neon Cyber and Electric Studio
• All themes reside in skills/web-video-presentation/themes/ with standardized theme.json and tokens.css files
• Theme selection supports three methods: manifest configuration, runtime JavaScript API, and direct CSS import
• The ThemeId TypeScript type in templates/src/registry/types.ts provides compile-time validation of theme names according to the ConardLi/garden-skills source code

Frequently Asked Questions

How do I create a custom theme for the web-video-presentation skill?

Create a new folder in skills/web-video-presentation/themes/ containing a theme.json file with your design tokens and a tokens.css file with the compiled variables. Follow the structure defined in references/THEMES.md and ensure your theme ID is added to the ThemeId union type in templates/src/registry/types.ts.

Can I switch themes dynamically during a presentation?

Yes. The runtime JavaScript API supports dynamic theme switching by calling initPresentation() with a different theme parameter value, or by updating the theme property on an existing presentation instance if the implementation supports reactive updates.

Where are theme colors and fonts defined?

Theme specifications reside in each theme's theme.json file within skills/web-video-presentation/themes/[theme-name]/. These JSON files define colors, typography scales, spacing values, and other design tokens, which are compiled into CSS custom properties in the corresponding tokens.css files.

What is the default theme if none is specified?

The default theme is defined in skills/web-video-presentation/manifest.json under the defaultTheme key. If this field is omitted or invalid, the skill typically falls back to warm-keynote or the first available theme alphabetically, though specific fallback behavior should be verified in the skill's initialization logic.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}