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

> Scaffold a Vite React TypeScript presentation using the Blueprint theme with garden-skills. Execute scaffold.sh with theme blueprint for pre-configured design tokens.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-08-29

---

**Execute the [`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/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.

```bash
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`](https://github.com/ConardLi/garden-skills/blob/main/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
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`](https://github.com/ConardLi/garden-skills/blob/main/themes/blueprint/tokens.css) into [`src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/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.

```bash
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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/themes/blueprint/theme.json) and [`themes/blueprint/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file from the `themes/` directory into your project's [`src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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.