# How to Scaffold a New Presentation with Garden Skills: Complete Guide

> Learn how to scaffold a new presentation with garden skills using the web-video-presentation script. Generate a Vite React TypeScript project with themed styling and audio pipelines quickly.

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

---

**Use the `web-video-presentation` skill's [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh) entry point to generate a production-ready Vite + React + TypeScript project with themed styling, audio pipelines, and a 1920×1080 recording stage in a single command.**

The garden-skills repository by ConardLi provides modular capabilities for AI agents and developers, with the `web-video-presentation` skill offering a self-contained scaffold for creating professional video presentations. This guide explains how to scaffold a new presentation with garden skills using the built-in automation scripts, 23 pre-baked visual themes, and the structured workflow defined in the skill's [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) and [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) files.

## What is the Web Video Presentation Skill?

The `web-video-presentation` skill is a complete scaffolding system designed for AI agents or developers to spin up presentation projects. Located within the `ConardLi/garden-skills` repository, this skill provides a Bash-based entry point at [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh) that automates project creation, theme injection, and helper script configuration.

The skill architecture consists of:

- **[`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh)** – The primary Bash entry point that handles argument parsing, Vite bootstrapping, and file generation.
- **`templates/`** – Contains minimal Vite configuration, starter React components, custom hooks, and CSS token files that replace default Vite boilerplate.
- **`themes/`** – Houses 23 pre-baked theme folders (such as `paper-press`), each exposing a [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) and [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) defining colors, fonts, and motion signatures.
- **`templates/scripts/`** – Audio-pipeline helpers including [`extract-narrations.ts`](https://github.com/ConardLi/garden-skills/blob/main/extract-narrations.ts) and [`synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/synthesize-audio.sh), plus a pluggable TTS provider directory.

## Prerequisites and Installation

Before scaffolding, ensure you have:

- **Bash** shell environment
- **Node.js** and **npm** installed (for Vite bootstrapping and dependency installation)
- The `garden-skills` repository cloned locally

The skill requires no global installation; it operates directly from the repository path using relative script references.

## The Scaffolding Process

When you invoke [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh), the skill executes a seven-step automation sequence:

1. **Parse arguments** – Accepts a target directory (default `presentation`) and optional `--theme=<id>` flag; supports `--list-themes` to display available options.
2. **Bootstrap Vite template** – Runs `npm create vite@latest` with the `react-ts` template to establish the TypeScript React foundation.
3. **Replace boilerplate** – Overwrites default Vite files with the skill's skeleton, including [`templates/src/main.tsx`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/main.tsx), stage components, and base styles.
4. **Inject theme tokens** – Copies the selected theme's [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) into [`src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/src/styles/tokens.css) to establish the visual language.
5. **Install dependencies** – Adds `tsx` for running extraction scripts and installs the project's npm dependencies.
6. **Configure npm scripts** – Injects `extract-narrations` and `synthesize-audio` commands into the generated project's [`package.json`](https://github.com/ConardLi/garden-skills/blob/main/package.json).
7. **Type-check wiring** – Runs TypeScript compilation to verify all imports and configurations are correct.

## Selecting and Applying Themes

The skill provides 23 built-in themes located in the `themes/` directory. Each theme folder contains:

- **[`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css)** – CSS custom properties defining the color palette, typography, and animation timing.
- **[`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json)** – Metadata including theme ID, display name, and description.

To view available options before scaffolding:

```bash
bash skills/web-video-presentation/scripts/scaffold.sh --list-themes

```

To scaffold with a specific theme (for example, `paper-press`):

```bash
bash skills/web-video-presentation/scripts/scaffold.sh ./my-talk --theme=paper-press

```

The script copies [`themes/paper-press/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/themes/paper-press/tokens.css) to [`src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/src/styles/tokens.css) in the generated project, ensuring consistent styling across the 1920×1080 recording stage.

## Post-Scaffold Development Workflow

After scaffolding completes, the generated directory contains a conventional Vite project. Navigate to your project directory and execute:

```bash
cd my-talk
npm run dev            # Starts dev server at http://localhost:5174

```

The development server presents a fixed 1920×1080 coordinate system suitable for screen recording. Navigation operates via a global step cursor—click anywhere on the stage managed by [`templates/src/components/Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/components/Stage.tsx) to advance narration beats.

For audio integration:

```bash
npm run extract-narrations   # Parses src/chapters/ files via extract-narrations.ts

npm run synthesize-audio     # Executes synthesize-audio.sh with configured TTS provider

```

The `extract-narrations` script ([`templates/scripts/extract-narrations.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/scripts/extract-narrations.ts)) scans chapter files for narration metadata, while [`synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/synthesize-audio.sh) interfaces with providers in `templates/scripts/tts-providers/` (including built-in [`minimax.sh`](https://github.com/ConardLi/garden-skills/blob/main/minimax.sh) and [`openai.sh`](https://github.com/ConardLi/garden-skills/blob/main/openai.sh) implementations).

To extend your presentation, append new chapter files under `src/chapters/` and register them in [`src/registry/chapters.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/registry/chapters.ts).

## Key Files and Architecture

Understanding these core files helps when customizing your scaffolded presentation:

- **[`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh)** – The Bash orchestration script that handles the seven-step scaffolding process.
- **[`templates/src/components/Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/components/Stage.tsx)** – Core React component implementing the 16:9 (1920×1080) canvas with click-to-advance functionality.
- **[`templates/src/hooks/useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/hooks/useStepper.ts)** – Global step cursor logic that synchronizes narration timing with visual state.
- **[`templates/src/hooks/useAudioPlayer.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/hooks/useAudioPlayer.ts)** – Audio playback helper that coordinates with extracted narration data.
- **[`templates/src/styles/base.css`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/styles/base.css)**, **[`templates/src/styles/animations.css`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/styles/animations.css)**, **[`templates/src/styles/fonts.css`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/styles/fonts.css)** – Base CSS assets shared across all themes.
- **`themes/*/tokens.css`** – Theme-specific design tokens (e.g., [`themes/paper-press/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/themes/paper-press/tokens.css)) injected during scaffolding.
- **[`templates/scripts/extract-narrations.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/scripts/extract-narrations.ts)** – TypeScript utility that compiles narration arrays from chapter source files.
- **[`templates/scripts/synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/templates/scripts/synthesize-audio.sh)** – Entry point for text-to-speech generation using configured provider scripts.

## Summary

- **Single-command scaffolding** via [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh) creates a complete Vite + React + TypeScript project structure.
- **23 pre-built themes** provide immediate visual styling through the [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) and [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) system.
- **Integrated audio pipeline** includes narration extraction and TTS synthesis scripts ready for `minimax` or `openai` providers.
- **Fixed 1920×1080 stage** with step-based navigation ([`useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/useStepper.ts)) ensures consistent recording dimensions and timing control.
- **Modular chapter system** allows content addition through `src/chapters/` with registration in [`src/registry/chapters.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/registry/chapters.ts).

## Frequently Asked Questions

### How do I list available themes before scaffolding?

Run the scaffold script with the `--list-themes` flag: `bash skills/web-video-presentation/scripts/scaffold.sh --list-themes`. This displays all 23 available theme IDs and metadata defined in each theme's [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file.

### What port does the development server use?

The scaffolded Vite project defaults to `http://localhost:5174`, though this may vary if the port is already occupied. The stage is optimized for recording at this resolution with a fixed 1920×1080 coordinate system implemented in [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx).

### How do I add new chapters to my presentation?

Create new chapter files in the `src/chapters/` directory, then import and register them in [`src/registry/chapters.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/registry/chapters.ts). Run `npm run extract-narrations` afterward to update the narration manifest for audio synthesis.

### Can I customize the text-to-speech provider after scaffolding?

Yes. The scaffolded project includes TTS provider scripts in `scripts/tts-providers/` (such as [`minimax.sh`](https://github.com/ConardLi/garden-skills/blob/main/minimax.sh) and [`openai.sh`](https://github.com/ConardLi/garden-skills/blob/main/openai.sh)). You can modify [`scripts/synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/synthesize-audio.sh) to target a different provider or add new provider scripts following the established interface pattern.