# How to Create Web Presentations from Articles Using Garden Skills

> Learn how to create web presentations from articles using Garden Skills. This Vite React TypeScript pipeline converts text into cinematic 16:9 videos effortlessly.

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

---

**Garden Skills converts written articles into cinematic 16:9 web presentations through a Vite + React + TypeScript pipeline defined in the `web-video-presentation` skill.**

The Garden Skills repository provides a structured framework for transforming static articles into interactive, screen-recordable web presentations. When you create web presentations from articles using Garden Skills, you engage a three-layer pipeline that enforces editorial controls through hard checkpoints. This methodical approach ensures the final output preserves your content's integrity while producing professional video-ready visuals at 1920×1080 resolution.

## The Three-Layer Presentation Pipeline

The `web-video-presentation` skill implements a strict workflow consisting of three architectural layers, each with defined inputs, outputs, and validation gates.

### Layer 1: Content to Narration Script

The pipeline begins by rewriting your source article into a narration script stored as [`script.md`](https://github.com/ConardLi/garden-skills/blob/main/script.md). According to the rules defined in [`skills/web-video-presentation/references/SCRIPT-STYLE.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/SCRIPT-STYLE.md), the system preserves at least 60% of the original information while removing "AI-taste" to produce natural-sounding narration suitable for platforms like Bilibili or YouTube. A self-check checklist embedded in the skill contract ensures quality compliance before proceeding to the next phase.

### Layer 2: Script to Visual Outline

Next, the script transforms into a visual blueprint using the schema defined in [`skills/web-video-presentation/references/OUTLINE-FORMAT.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/OUTLINE-FORMAT.md). The system splits the narration into discrete beats separated by `---` delimiters, with each beat representing one full-screen step in the final presentation. Hard checkpoints labeled **A1** and **A2** enforce human review before the outline finalizes, allowing you to approve the narrative flow and asset planning.

### Layer 3: Scaffold to Build

The final layer generates a production-ready Vite + React + TypeScript project. The [`skills/web-video-presentation/templates/scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/templates/scripts/scaffold.sh) CLI tool creates a 1920×1080 pixel stage with your selected theme applied. This stage renders at a 16:9 aspect ratio optimized for cinematic video recording. The scaffolding includes theme tokens from the 23 available options documented in [`skills/web-video-presentation/references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/THEMES.md), plus integration points for TTS providers located in `skills/web-video-presentation/templates/scripts/tts-providers/`.

## Step-by-Step Workflow to Generate Presentations

Follow this nine-step workflow to convert your article into a clickable web presentation:

1. **Identify input.** Provide the raw article in Markdown, HTML, PDF, or plain text format.

2. **Generate script.** The agent processes the article following [`SCRIPT-STYLE.md`](https://github.com/ConardLi/garden-skills/blob/main/SCRIPT-STYLE.md) constraints and outputs [`script.md`](https://github.com/ConardLi/garden-skills/blob/main/script.md) with platform-appropriate narration.

3. **Checkpoint A1.** Review the generated script, select a theme from the 23 token-driven options, and approve the asset plan.

4. **Create outline.** The system splits the script into steps using `---` separators per [`OUTLINE-FORMAT.md`](https://github.com/ConardLi/garden-skills/blob/main/OUTLINE-FORMAT.md), producing [`outline.md`](https://github.com/ConardLi/garden-skills/blob/main/outline.md) that maps each narration beat to visual elements.

5. **Checkpoint A2.** Approve the outline structure and select your development mode (full-code versus prototype).

6. **Scaffold project.** Execute the scaffolder to generate the Vite project:

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

   This creates a `my-presentation/` folder containing the configured React application with the `paper-press` theme tokens injected.

7. **Checkpoint B.** Decide whether to synthesize narration audio. If enabled, the system invokes [`synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/synthesize-audio.sh) with your chosen provider from the `tts-providers/` directory.

8. **Develop and preview.** Navigate to the project directory and start the development server:

   ```bash
   cd my-presentation
   npm install
   npm run dev
   ```

   The server launches at `http://localhost:5173` with a 1920×1080 stage. Edit sources under `src/` if customization is required.

9. **Record video.** Use OBS or native screen recording tools to capture the presentation. The interface hides UI elements to ensure clean video output without post-production editing.

## Configuring Themes and Audio Integration

The presentation's visual identity relies entirely on theme tokens, enabling instant restyling without code modifications.

### Selecting and Applying Themes

The 23 built-in themes follow a strict token contract documented in [`skills/web-video-presentation/references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/THEMES.md). To view available options before scaffolding:

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

```

To apply a theme during project creation, specify the `--theme` flag with the desired token set (e.g., `paper-press`, `dark-ledger`).

### Integrating Text-to-Speech Providers

The pipeline supports pluggable TTS backends through scripts in `skills/web-video-presentation/templates/scripts/tts-providers/`. Available providers include [`minimax.sh`](https://github.com/ConardLi/garden-skills/blob/main/minimax.sh) (requiring `mmx-cli`) and [`openai.sh`](https://github.com/ConardLi/garden-skills/blob/main/openai.sh) (requiring `OPENAI_API_KEY`).

Generate narration audio using:

```bash
bash scripts/synthesize-audio.sh --provider=minimax

```

This reads [`script.md`](https://github.com/ConardLi/garden-skills/blob/main/script.md), invokes the specified provider, and writes audio files to an `audio/` directory mapped to each presentation step. The generated React components automatically hook into these files through the `useAudio` hook as implemented in [`src/App.tsx`](https://github.com/ConardLi/garden-skills/blob/main/src/App.tsx).

## Essential Configuration Files

Understanding these core files ensures proper customization of the presentation pipeline:

- **[`skills/web-video-presentation/references/SCRIPT-STYLE.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/SCRIPT-STYLE.md)** — Defines narration style rules for specific platforms and mandates the 60% information retention threshold.
- **[`skills/web-video-presentation/references/OUTLINE-FORMAT.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/OUTLINE-FORMAT.md)** — Specifies the schema for [`outline.md`](https://github.com/ConardLi/garden-skills/blob/main/outline.md), including step delimiters (`---`) and asset definitions.
- **[`skills/web-video-presentation/templates/scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/templates/scripts/scaffold.sh)** — The CLI entry point for generating Vite projects with theme injection.
- **[`skills/web-video-presentation/references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/THEMES.md)** — Documents the token system and lists all 23 available themes.
- **`skills/web-video-presentation/templates/scripts/tts-providers/`** — Directory containing [`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) audio synthesis runners.

## Summary

- **Garden Skills** provides a `web-video-presentation` skill that transforms articles into 16:9 Vite + React presentations through a three-layer pipeline.
- **Hard checkpoints** (A1, A2, B) enforce human review at script, outline, and audio generation stages.
- **Theme tokens** drive all visual decisions according to [`THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/THEMES.md), allowing instant restyling across 23 built-in options without code changes.
- **Scaffolding** occurs via [`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scaffold.sh), generating a 1920×1080 stage ready for screen recording at `localhost:5173`.
- **TTS integration** supports MiniMax and OpenAI providers through pluggable shell scripts in the `tts-providers/` directory.

## Frequently Asked Questions

### What article formats does the Garden Skills presentation pipeline accept?

The `web-video-presentation` skill accepts Markdown, HTML, PDF, and plain text inputs. During the initial content analysis phase, the system extracts textual content and restructures it according to the constraints defined in [`SCRIPT-STYLE.md`](https://github.com/ConardLi/garden-skills/blob/main/SCRIPT-STYLE.md), regardless of the original formatting.

### How do the hard checkpoints prevent errors in the presentation workflow?

Hard checkpoints A1, A2, and B act as mandatory pause points where the pipeline requires explicit human approval. Checkpoint A1 verifies the narration script and theme selection, A2 validates the visual outline structure, and B confirms audio synthesis preferences. These gates prevent the automated system from proceeding with unverified content.

### Can I change the visual theme after scaffolding the project?

Yes. Since themes use a token-driven architecture defined in [`THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/THEMES.md), you can swap themes by re-running [`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scaffold.sh) with a different `--theme` parameter or by modifying the token imports in the generated `src/` directory. The visual styling updates instantly without requiring changes to presentation logic or step content.

### Does the generated presentation require internet connectivity to run?

The Vite + React application runs entirely client-side after `npm install` completes. However, if you enable TTS integration via [`synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/synthesize-audio.sh), the initial audio generation requires API connectivity to MiniMax or OpenAI. Once synthesized, audio files are stored locally in the `audio/` directory and playback functions offline.