# Web-Video-Presentation Skill Working Directory Structure Explained

> Explore the web-video-presentation skill working directory structure in ConardLi/garden-skills. Understand metadata, scripts, Vite+React template, and themes for cinematic web presentations.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: architecture
- Published: 2026-09-01

---

**The web-video-presentation skill employs a rigorously organized directory structure under `skills/web-video-presentation/` that separates metadata, scaffolding scripts, a reusable Vite+React template, and 23 distinct visual themes to enable rapid generation of cinematic web presentations.**

The [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills) repository hosts the `web-video-presentation` skill, which provides a complete framework for building web-based video presentations. Its working directory follows a clear segregation of concerns, partitioning documentation, automation scripts, application boilerplate, and design assets into discrete, navigable folders.

## Top-Level Directory Layout

The root of `skills/web-video-presentation/` contains seven primary entries that define the skill's interface and assets:

- **[`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json)** — Machine-readable metadata for the skill registry, declaring name, version, category, and compatibility with agent back-ends.
- **[`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)** — Formal skill specification containing metadata, version, and canonical checkpoints.
- **[`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md)** / **[`README.zh-CN.md`](https://github.com/ConardLi/garden-skills/blob/main/README.zh-CN.md)** — Human-readable overviews with usage instructions and theme galleries.
- **`references/`** — Design contracts and documentation anchors, including [`PRINCIPLES.md`](https://github.com/ConardLi/garden-skills/blob/main/PRINCIPLES.md), [`CHAPTER-CRAFT.md`](https://github.com/ConardLi/garden-skills/blob/main/CHAPTER-CRAFT.md), [`OUTLINE-FORMAT.md`](https://github.com/ConardLi/garden-skills/blob/main/OUTLINE-FORMAT.md), [`SCRIPT-STYLE.md`](https://github.com/ConardLi/garden-skills/blob/main/SCRIPT-STYLE.md), [`THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/THEMES.md), [`AUDIO.md`](https://github.com/ConardLi/garden-skills/blob/main/AUDIO.md), and [`RECORDING.md`](https://github.com/ConardLi/garden-skills/blob/main/RECORDING.md).
- **`scripts/`** — Automation utilities, primarily [`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scaffold.sh) for project generation.
- **`templates/`** — A complete, boilerplate Vite + React + TypeScript project that serves as the presentation engine.
- **`themes/`** — A collection of 23 pre-built visual themes, each containing [`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).

## The Templates Directory

The `templates/` folder contains the full application source that powers every generated presentation. When [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh) executes, it copies this directory into the user's target folder.

### React Architecture and Core Hooks

The template implements a component-based React architecture centered on presentation logic:

- **[`src/App.tsx`](https://github.com/ConardLi/garden-skills/blob/main/src/App.tsx)** — Root component that mounts the presentation `Stage` and manages global state.
- **[`src/hooks/useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/hooks/useStepper.ts)** — Manages slide progression and navigation logic.
- **[`src/hooks/useStageScale.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/hooks/useStageScale.ts)** — Handles responsive scaling of the presentation canvas.
- **[`src/hooks/useAudioPlayer.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/hooks/useAudioPlayer.ts)** — Orchestrates audio narration playback synchronized with slides.
- **[`src/hooks/useAutoMode.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/hooks/useAutoMode.ts)** — Enables automatic, timed progression through chapters.

### UI Components

Visual primitives reside in `src/components/` and consume semantic design tokens:

- **[`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx)** — Primary rendering surface for slides.
- **[`MaskReveal.tsx`](https://github.com/ConardLi/garden-skills/blob/main/MaskReveal.tsx)** — Transition component for cinematic reveal effects.
- **[`ProgressBar.tsx`](https://github.com/ConardLi/garden-skills/blob/main/ProgressBar.tsx)** — Navigation indicator showing presentation progress.
- **[`AutoStartGate.tsx`](https://github.com/ConardLi/garden-skills/blob/main/AutoStartGate.tsx)** — Modal gate controlling auto-play initiation.
- **[`AutoToggle.tsx`](https://github.com/ConardLi/garden-skills/blob/main/AutoToggle.tsx)** — UI control for enabling/disabling auto-mode.

### Chapter Registry System

Content organization follows a strict registry pattern:

- **[`src/registry/types.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/registry/types.ts)** — TypeScript interfaces defining chapter contracts.
- **[`src/registry/chapters.ts`](https://github.com/ConardLi/garden-skills/blob/main/src/registry/chapters.ts)** — Central registration file importing all presentation chapters.
- **`src/chapters/01-example/`** — Template chapter demonstrating file structure, containing [`Example.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Example.tsx), [`Example.css`](https://github.com/ConardLi/garden-skills/blob/main/Example.css), and [`narrations.ts`](https://github.com/ConardLi/garden-skills/blob/main/narrations.ts).

## The Themes Directory

Located at `themes/`, this directory houses 23 self-contained visual design systems. Each subdirectory—such as `midnight-press/`, `warm-keynote/`, `newsroom/`, or `bauhaus-bold/`—contains exactly two files:

- **[`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css)** — Maps semantic variables (colors, typography, spacing) to concrete CSS values.
- **[`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json)** — Human-readable metadata describing the theme's mood, intended use case, and design philosophy.

During scaffolding, [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh) copies the selected theme's [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) into the generated project's [`src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/src/styles/tokens.css), establishing the visual identity.

## The References Directory

The `references/` folder serves as the skill's knowledge base, containing formal contracts that agents consult to ensure generated content adheres to methodology:

- **[`PRINCIPLES.md`](https://github.com/ConardLi/garden-skills/blob/main/PRINCIPLES.md)** — Core design philosophy and constraints.
- **[`CHAPTER-CRAFT.md`](https://github.com/ConardLi/garden-skills/blob/main/CHAPTER-CRAFT.md)** — Checklist for creating cohesive narrative chapters.
- **[`OUTLINE-FORMAT.md`](https://github.com/ConardLi/garden-skills/blob/main/OUTLINE-FORMAT.md)** — Specification for outline structure.
- **[`SCRIPT-STYLE.md`](https://github.com/ConardLi/garden-skills/blob/main/SCRIPT-STYLE.md)** — Guidelines for narration scriptwriting.
- **[`AUDIO.md`](https://github.com/ConardLi/garden-skills/blob/main/AUDIO.md)** — Contract for the audio synthesis pipeline.
- **[`RECORDING.md`](https://github.com/ConardLi/garden-skills/blob/main/RECORDING.md)** — Technical specifications for recording output.

## Scaffolding Workflow

The [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh) utility orchestrates project creation by integrating the directory components:

1. Accepts a `TARGET` directory path and optional `--theme` parameter.
2. Clones `templates/` contents into `TARGET/src/`.
3. Injects the specified theme's [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) into [`TARGET/src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/TARGET/src/styles/tokens.css).
4. Registers npm scripts (`extract-narrations`, `synthesize-audio`) in [`TARGET/package.json`](https://github.com/ConardLi/garden-skills/blob/main/TARGET/package.json).
5. Writes a `.theme` marker file to record the initial theme selection.

### Scaffolding Commands

Generate a new presentation with the default theme:

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

```

Specify a theme explicitly:

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

```

List available themes:

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

```

### Running the Generated Project

After scaffolding, navigate to the target directory and execute:

```bash
npm run dev

```

This starts the Vite development server (typically at `http://localhost:5174`).

### Audio Pipeline Commands

The generated project includes automation for narration handling:

Extract narration metadata from all chapter files:

```bash
npm run extract-narrations

```

Synthesize audio using the default Minimax provider:

```bash
npm run synthesize-audio

```

## Key Configuration Files

Several files define the skill's integration and build behavior:

- **[`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json)** — Declares compatibility with Claude, Cursor, and other agent back-ends for automatic discovery.
- **[`templates/vite.config.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/vite.config.ts)** — Vite configuration for the generated React application.
- **[`templates/src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/styles/tokens.css)** — Runtime CSS variables that theme files populate.
- **[`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)** — Formal specification used by agents to understand skill phases and checkpoints.

## Summary

- The `web-video-presentation` skill resides at `skills/web-video-presentation/` and separates concerns across seven top-level directories.
- **`templates/`** provides a complete Vite+React application with hooks like `useStepper` and components like [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx).
- **`themes/`** contains 23 theme packages, each with [`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 visual design systems.
- **[`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh)** automates project creation by copying templates and injecting selected themes.
- **`references/`** stores design contracts including [`CHAPTER-CRAFT.md`](https://github.com/ConardLi/garden-skills/blob/main/CHAPTER-CRAFT.md) and [`OUTLINE-FORMAT.md`](https://github.com/ConardLi/garden-skills/blob/main/OUTLINE-FORMAT.md) to guide content generation.
- **[`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json)** enables machine discovery of the skill by the Opencode platform.

## Frequently Asked Questions

### What file defines the visual appearance of a generated presentation?

The visual appearance is controlled by [`src/styles/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/src/styles/tokens.css) in the generated project, which is copied from the selected theme's [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) during scaffolding. This file maps semantic CSS variables to concrete values for colors, fonts, and spacing.

### How does the scaffold script know which theme to apply?

When running [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh), you pass the `--theme=<name>` flag to specify one of the 23 directories under `themes/`. If omitted, it uses a default theme. The script also writes a `.theme` file to the generated root to record the selection for future reference.

### What is the purpose of the `references/` directory?

The `references/` directory contains mandatory design contracts and guidelines ([`PRINCIPLES.md`](https://github.com/ConardLi/garden-skills/blob/main/PRINCIPLES.md), [`CHAPTER-CRAFT.md`](https://github.com/ConardLi/garden-skills/blob/main/CHAPTER-CRAFT.md), [`AUDIO.md`](https://github.com/ConardLi/garden-skills/blob/main/AUDIO.md), etc.) that agents consult to ensure generated presentations follow the skill's methodology for structure, style, and audio integration.

### Can I modify the default React components after scaffolding?

Yes. The `templates/src/components/` files—including [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx), [`ProgressBar.tsx`](https://github.com/ConardLi/garden-skills/blob/main/ProgressBar.tsx), and [`MaskReveal.tsx`](https://github.com/ConardLi/garden-skills/blob/main/MaskReveal.tsx)—are copied into your generated project and can be freely modified. These components consume the CSS tokens, so changes to styling remain centralized in [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css).