How to Create Web Presentations from Articles Using Garden Skills

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. According to the rules defined in 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. 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 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, 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 constraints and outputs 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, producing 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 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 with your chosen provider from the tts-providers/ directory.

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

   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. To view available options before scaffolding:

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 (requiring mmx-cli) and openai.sh (requiring OPENAI_API_KEY).

Generate narration audio using:

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

This reads 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.

Essential Configuration Files

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

• 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 — Specifies the schema for outline.md, including step delimiters (---) and asset definitions.
• 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 — Documents the token system and lists all 23 available themes.
• skills/web-video-presentation/templates/scripts/tts-providers/ — Directory containing minimax.sh and 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, allowing instant restyling across 23 built-in options without code changes.
• Scaffolding occurs via 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, 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, you can swap themes by re-running 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, 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.

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