How to List Available Themes for the Web Video Presentation Skill

You can list available themes for the Web Video Presentation skill by reading the THEMES.md reference file, scanning the skills/web-video-presentation/themes/ directory for theme.json files, or querying the metadata programmatically using shell scripts or Python.

The Web Video Presentation skill in the ConardLi/garden-skills repository ships with pre-defined visual themes that control the color palette and styling of generated presentation videos. Each theme is self-contained in its own subdirectory under skills/web-video-presentation/themes/, making enumeration straightforward through file system operations or documentation parsing.

Where Themes Are Stored

Themes reside in individual subdirectories beneath skills/web-video-presentation/themes/. Every theme folder contains two essential files:

• theme.json – Metadata including the theme ID, display name, description, mood tags, and color preview data.
• tokens.css – CSS custom properties defining the color palette and style tokens used during video rendering.

For example, the Indigo Porcelain theme is located at skills/web-video-presentation/themes/indigo-porcelain/theme.json, while the Warm Keynote theme stores its CSS variables in skills/web-video-presentation/themes/warm-keynote/tokens.css.

Method 1: Read the Reference Documentation

The repository maintains a human-readable index at skills/web-video-presentation/references/THEMES.md. This markdown file lists every available theme alongside a brief description of its visual style.

To view the list in a browser, open the raw file from the repository:

curl https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/web-video-presentation/references/THEMES.md

The file contains entries formatted as:

• indigo-porcelain – Deep-indigo ink on porcelain white
• warm-keynote – Warm, inviting color scheme for keynote-style videos

Method 2: Scan the File System

You can enumerate themes directly from the file system by locating all theme.json files within the themes directory.

List all theme directories:

ls skills/web-video-presentation/themes/

Display the metadata for every installed theme:

for f in skills/web-video-presentation/themes/*/theme.json; do
  echo "----- $(basename $(dirname $f)) -----"
  cat "$f"
done

For a concise list of theme IDs only:

find skills/web-video-presentation/themes -mindepth 2 -maxdepth 2 -name theme.json \
  -exec dirname {} \; | xargs -n1 basename

This outputs the directory names (such as indigo-porcelain and warm-keynote) which serve as the canonical theme identifiers.

Method 3: Parse theme.json Programmatically

For applications that need structured data, parse the theme.json files directly. Each JSON file contains fields such as id, name, description, mood, bestFor, and a preview object with color hex codes.

Here is a complete Python helper to extract theme information:

import json
from pathlib import Path

THEME_ROOT = Path("skills/web-video-presentation/themes")

def list_themes():
    themes = []
    for theme_dir in THEME_ROOT.iterdir():
        json_path = theme_dir / "theme.json"
        if json_path.is_file():
            data = json.loads(json_path.read_text())
            themes.append({
                "id": data["id"],
                "name": data["name"],
                "description": data["description"],
                "preview": data["preview"]
            })
    return themes

if __name__ == "__main__":
    for t in list_themes():
        print(f"{t['id']}: {t['name']}\n  {t['description']}\n  Preview: {t['preview']}\n")

Running this script against the ConardLi/garden-skills repository produces output similar to:

indigo-porcelain: Indigo Porcelain
  Deep-indigo ink on porcelain white — the indigo IS the ink...
  Preview: {'shell': '#e4e8ec', 'surface': '#f1f3f5', 'text': '#0a1f3d', 'accent': '#1e3a8a'}

Understanding Theme File Structure

When listing themes programmatically, understanding the schema helps determine what data is available for each theme.

The theme.json file defines:

• id – The URL-safe identifier matching the directory name
• name – Human-readable display title
• description – Detailed explanation of the visual style
• mood – Tags describing the emotional tone (e.g., "professional", "warm")
• bestFor – Recommended use cases for the theme
• preview – Dictionary of color codes for UI rendering

The companion tokens.css file in each theme directory contains the actual CSS custom properties (such as --color-shell and --color-accent) that the skill uses at render time. While theme.json provides the metadata needed to list and select themes, tokens.css provides the implementation details.

Summary

• Themes are stored in subdirectories under skills/web-video-presentation/themes/ in the ConardLi/garden-skills repository.
• The skills/web-video-presentation/references/THEMES.md file provides a human-readable list of all available themes.
• Each theme contains a theme.json file with metadata (id, name, description, preview colors) and a tokens.css file with style definitions.
• Use shell commands to list theme directories or Python scripts to parse JSON metadata for programmatic enumeration.
• Theme IDs correspond directly to folder names, making filesystem traversal the most reliable discovery method.

Frequently Asked Questions

What file contains the human-readable list of available themes?

The file skills/web-video-presentation/references/THEMES.md maintains the official list. It describes each theme (such as Indigo Porcelain and Warm Keynote) with brief explanations of their visual characteristics and intended use cases.

How do I access theme metadata programmatically?

Parse the theme.json file inside each theme directory. According to the source code in skills/web-video-presentation/themes/, every theme directory contains this JSON file with fields like id, name, description, and preview colors. You can read these files using any JSON parser in Python, Node.js, or other languages.

What is the difference between theme.json and tokens.css?

The theme.json file contains descriptive metadata about the theme (its name, description, and color preview), while tokens.css contains the actual CSS custom properties that define the color palette. When listing themes, you only need theme.json; when rendering videos, the skill uses tokens.css to apply the visual styles.

Can I create custom themes for the Web Video Presentation skill?

Yes, the directory structure suggests you can add custom themes by creating a new subdirectory under skills/web-video-presentation/themes/ containing both a theme.json file with valid metadata and a tokens.css file defining your color tokens. Ensure your theme ID in theme.json matches the directory name for consistency with the enumeration scripts.

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