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

Use the web-video-presentation skill's 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 and 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 that automates project creation, theme injection, and helper script configuration.

The skill architecture consists of:

• 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 and theme.json defining colors, fonts, and motion signatures.
• templates/scripts/ – Audio-pipeline helpers including extract-narrations.ts and 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, 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, stage components, and base styles.
4. Inject theme tokens – Copies the selected theme's tokens.css into 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.
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 – CSS custom properties defining the color palette, typography, and animation timing.
• theme.json – Metadata including theme ID, display name, and description.

To view available options before scaffolding:

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

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

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

The script copies themes/paper-press/tokens.css to 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:

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 to advance narration beats.

For audio integration:

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) scans chapter files for narration metadata, while synthesize-audio.sh interfaces with providers in templates/scripts/tts-providers/ (including built-in minimax.sh and openai.sh implementations).

To extend your presentation, append new chapter files under src/chapters/ and register them in src/registry/chapters.ts.

Key Files and Architecture

Understanding these core files helps when customizing your scaffolded presentation:

• scripts/scaffold.sh – The Bash orchestration script that handles the seven-step scaffolding process.
• 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 – Global step cursor logic that synchronizes narration timing with visual state.
• templates/src/hooks/useAudioPlayer.ts – Audio playback helper that coordinates with extracted narration data.
• templates/src/styles/base.css, templates/src/styles/animations.css, 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) injected during scaffolding.
• templates/scripts/extract-narrations.ts – TypeScript utility that compiles narration arrays from chapter source files.
• templates/scripts/synthesize-audio.sh – Entry point for text-to-speech generation using configured provider scripts.

Summary

• Single-command scaffolding via scripts/scaffold.sh creates a complete Vite + React + TypeScript project structure.
• 23 pre-built themes provide immediate visual styling through the tokens.css and 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) ensures consistent recording dimensions and timing control.
• Modular chapter system allows content addition through src/chapters/ with registration in 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 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.

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. 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 and openai.sh). You can modify scripts/synthesize-audio.sh to target a different provider or add new provider scripts following the established interface pattern.

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