# How to Use the Web Video Presentation Skill in Garden-Skills

> Learn how to use the web video presentation skill in Garden-Skills to convert articles into cinematic 1080p videos with Vite, React, and TypeScript. Create high-quality video presentations easily.

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

---

**The web video presentation skill transforms written articles or narration scripts into a click-driven, cinematic 1920×1080 web presentation that can be recorded as high-quality video using a Vite + React + TypeScript stack.**

This skill, maintained in the **ConardLi/garden-skills** repository, provides a complete framework for converting text into step-by-step visual presentations. Each narration beat becomes a full-screen "step" within a themed, scalable stage that hides UI chrome during recording to ensure clean output.

## Core Architecture

The skill's engine is composed of several tightly coupled TypeScript components that manage the presentation lifecycle:

### Stage Rendering and Scaling

The **[`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx)** component ([`templates/src/components/Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/components/Stage.tsx)) enforces a 16:9 aspect ratio and scales the canvas to fit the viewport. All chapter content renders inside this container, ensuring consistent 1920×1080 output regardless of screen size.

### Step Navigation State

Navigation is handled by the **[`useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/useStepper.ts)** hook ([`templates/src/hooks/useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/hooks/useStepper.ts)). It manages the `(chapter, step)` cursor, persists the current position in `localStorage`, and exposes `next()` and `prev()` helpers that advance the presentation on click or keyboard events.

### Audio Synchronization

The **[`useAudioPlayer.ts`](https://github.com/ConardLi/garden-skills/blob/main/useAudioPlayer.ts)** hook ([`templates/src/hooks/useAudioPlayer.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/hooks/useAudioPlayer.ts)) loads per-step audio files and synchronizes playback with visual transitions. It integrates with the TTS provider contract to play synthesized narration when available.

### Project Scaffolding

The **[`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scaffold.sh)** script ([`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh)) automates project creation. It copies token files, creates the `presentation/` directory structure, installs dependencies, and applies a selected theme from the 23 available options in the `themes/` folder.

### Theme System

Each theme resides in `themes/*/` and supplies 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) file. These define semantic design tokens (colors, fonts, grid systems) that the presentation reads at runtime, allowing complete visual overhauls by swapping a single folder.

## Step-by-Step Workflow

According to the source code in [`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), the skill enforces a method-driven workflow:

1. **Identify input** – Convert your article into a structured narration script.

2. **Generate an outline** – Create [`outline.md`](https://github.com/ConardLi/garden-skills/blob/main/outline.md) and obtain agent approval before proceeding.

3. **Scaffold the project** – Run the scaffold script with your chosen theme to generate the Vite project structure.

4. **Synthesize audio (optional)** – Generate narration audio using the TTS provider scripts.

5. **Record the presentation** – Run the development server and record; UI controls (progress bars, auto-toggle) hide automatically unless hovered.

## Setting Up a New Presentation

To initialize a presentation, use the scaffold script from the repository root:

```bash

# Scaffold a new presentation with the paper-press theme

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

```

List all 23 built-in themes before deciding:

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

```

After scaffolding, install dependencies and start the development server:

```bash
cd presentation
npm install
npm run dev

```

The application boots from [`src/main.tsx`](https://github.com/ConardLi/garden-skills/blob/main/src/main.tsx), which registers the global step hook and loads the chapter registry from [`src/registry/chapters.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/registry/chapters.ts).

## Building Chapter Components

Chapters export React components that consume the stepper hook to advance the presentation. Here is the pattern used in [`src/chapters/01-example/Example.tsx`](https://github.com/ConardLi/garden-skills/blob/main/src/chapters/01-example/Example.tsx):

```tsx
import { useStepper } from '../hooks/useStepper';

export const Example = () => {
  const { next } = useStepper();
  return (
    <div onClick={next} className="stage-step">
      <h1>Hello, world!</h1>
      {/* Additional visual content for this narration beat */}
    </div>
  );
};

```

Register each chapter in [`src/registry/chapters.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/registry/chapters.ts) to include it in the presentation flow.

## Adding Narration Audio

The skill supports multiple TTS backends through a provider contract located in `templates/scripts/tts-providers/`. Supported providers include MiniMax, OpenAI, and ElevenLabs.

To synthesize audio for all steps:

```bash

# Requires API key configuration

bash skills/web-video-presentation/templates/scripts/synthesize-audio.sh

```

The `useAudioPlayer` hook automatically detects and plays the generated audio files when advancing steps, maintaining sync between narration and visuals.

## Summary

- The web video presentation skill uses a **Vite + React + TypeScript** stack to generate 1920×1080 cinematic presentations.
- Navigation is managed through the **`useStepper`** hook, which persists state and provides `next()`/`prev()` methods.
- The **[`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx)** component enforces 16:9 scaling while hiding UI elements during recording.
- Projects are initialized via **[`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scaffold.sh)**, which supports 23 built-in themes defined by [`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).
- Audio narration integrates via the **`useAudioPlayer`** hook and TTS provider scripts in `templates/scripts/tts-providers/`.

## Frequently Asked Questions

### What output resolution does the web video presentation skill support?

The skill outputs a fixed **1920×1080** (16:9) resolution. The [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx) component scales the canvas to fit the viewport while maintaining this aspect ratio, ensuring consistent HD video output regardless of the recording device's screen size.

### How do I navigate between steps during a presentation?

Navigation is handled by the `useStepper` hook in [`templates/src/hooks/useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/hooks/useStepper.ts). It exposes `next()` and `prev()` functions that advance or retreat through the `(chapter, step)` cursor. These can be triggered by click events, keyboard input, or programmatically within chapter components.

### Can I create custom themes for my presentations?

Yes. The theme system in `themes/*/` allows custom visual designs by creating a new folder containing a [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file for CSS variables and a [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) for semantic tokens. The presentation reads these at runtime, enabling complete visual overhauls without modifying component code.

### How do I add synthesized voice narration to steps?

Use the TTS provider scripts located in `templates/scripts/tts-providers/`. Run [`synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/synthesize-audio.sh) after configuring your API keys for MiniMax, OpenAI, or ElevenLabs. The [`useAudioPlayer.ts`](https://github.com/ConardLi/garden-skills/blob/main/useAudioPlayer.ts) hook automatically loads and plays the generated audio files corresponding to each step index.