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

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 component (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 hook (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 hook (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 script (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 and 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 and 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 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:

# 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 skills/web-video-presentation/scripts/scaffold.sh --list-themes

After scaffolding, install dependencies and start the development server:

cd presentation
npm install
npm run dev

The application boots from src/main.tsx, which registers the global step hook and loads the chapter registry from 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:

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 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:

# 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 component enforces 16:9 scaling while hiding UI elements during recording.
• Projects are initialized via scaffold.sh, which supports 23 built-in themes defined by tokens.css and 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 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. 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 file for CSS variables and a 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 after configuring your API keys for MiniMax, OpenAI, or ElevenLabs. The useAudioPlayer.ts hook automatically loads and plays the generated audio files corresponding to each step index.

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