How to Scaffold a Presentation with the Blueprint Theme Using garden-skills

Execute the scaffold.sh script with the --theme=blueprint flag to generate a Vite + React + TypeScript presentation project pre-configured with Blueprint design tokens.

The garden-skills repository ships a ready-made web-video-presentation skill that provides a Vite-based scaffold for creating React slide decks. To scaffold a presentation with the Blueprint theme, you run a single bash command that copies boilerplate templates and injects the theme's CSS token file into your new project structure.

Step-by-Step: Scaffolding with the Blueprint Theme

1. Clone the Repository

First, clone the garden-skills repository and navigate to the project root.

git clone https://github.com/ConardLi/garden-skills.git
cd garden-skills

2. Run the Scaffold Script

The skills/web-video-presentation/scripts/scaffold.sh entry point creates a new presentation directory and copies the Blueprint theme assets into it. By default, the script uses the midnight-press theme, but you override this with the --theme parameter.

bash skills/web-video-presentation/scripts/scaffold.sh ./my-presentation --theme=blueprint

The script performs several actions atomically: it validates that the target directory does not exist (aborting if it finds a non-empty folder to prevent overwrites), copies the Vite + React + TypeScript boilerplate from the templates/ directory, and injects themes/blueprint/tokens.css into src/styles/tokens.css in your generated project.

3. Install Dependencies and Start Development

After scaffolding completes, enter the new directory and launch the development server.

cd my-presentation
npm install
npm run dev

The Vite dev server starts on http://localhost:5174 by default. The Blueprint theme's color variables are immediately active in the browser preview.

Blueprint Theme Architecture

Theme Metadata Configuration

The Blueprint theme is defined in skills/web-video-presentation/themes/blueprint/theme.json. This JSON file specifies the theme's unique identifier, display name, color palette descriptors, and metadata tags indicating best-use cases (such as technical documentation or architectural diagrams).

CSS Design Tokens

The visual styling is controlled by skills/web-video-presentation/themes/blueprint/tokens.css. This file contains CSS custom properties (variables) for colors, spacing, and typography. When you scaffold with --theme=blueprint, the script copies this file into your project's src/styles/tokens.css, making these tokens available to all React components.

Customizing Your Presentation

Registering New Chapters

After scaffolding, the project includes an example chapter at src/chapters/01-example/ containing a component, styles, and narration file. To add your own content:

1. Create new directories under src/chapters/ for each slide chapter.
2. Import and register each chapter component in src/registry/chapters.ts.
3. Restart the dev server to see your changes.

Swapping Themes Post-Scaffold

You can change themes later by simply replacing src/styles/tokens.css with another theme's token file from the themes/ directory. This swap requires no code changes to your React components because all styling references the same CSS variable names.

Summary

• Scaffold command: Use bash skills/web-video-presentation/scripts/scaffold.sh ./<folder-name> --theme=blueprint to create a new project.
• Theme files: Blueprint configuration lives in themes/blueprint/theme.json and themes/blueprint/tokens.css.
• Safety check: The script aborts if the target directory already exists and contains files.
• Development workflow: Run npm run dev after scaffolding, then edit chapters in src/chapters/ and register them in src/registry/chapters.ts.

Frequently Asked Questions

Can I change the theme after I have already scaffolded the presentation?

Yes. According to the garden-skills source code, you can swap themes by copying a different tokens.css file from the themes/ directory into your project's src/styles/tokens.css. This hot-swaps the color palette without requiring any changes to your React components or chapter logic.

What happens if the target directory already exists?

The scaffold.sh script checks for existing files and aborts immediately if it detects a non-empty directory. This safety mechanism prevents accidental overwrites of existing work. You must either specify a new folder name or manually delete the existing directory before running the scaffold command again.

How do I add new chapters to my presentation?

Create a new folder under src/chapters/ containing your React component, CSS module, and narration files. Then import and register the chapter in src/registry/chapters.ts. The presentation framework dynamically loads registered chapters, so you only need to restart the dev server to see new slides appear in the navigation.

What is the Blueprint theme best used for?

According to the metadata in themes/blueprint/theme.json, the Blueprint theme is optimized for technical documentation, architectural diagrams, and structured content that requires a clean, professional aesthetic. The color palette emphasizes readability and contrast suitable for code-heavy presentations.

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