# Web Presentation Workflow Phases: A 4-Step Pipeline for Creating Click-Driven 16:9 Demos > Master web presentation workflow phases with a 4-step pipeline. Transform articles into click-driven 16:9 demos using a fixed stage and theme-driven architecture for engaging content. - Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills) - Tags: how-to-guide - Published: 2026-08-31 --- **The web-video-presentation skill implements a four-phase pipeline with three mandatory checkpoints that transforms raw articles into screen-ready web demos using a fixed 1920×1080 stage and theme-driven architecture.** This workflow, defined in the ConardLi/garden-skills repository, provides a reproducible method for converting written content into interactive, click-driven presentations. By enforcing hard checkpoints between phases, the workflow ensures script-theme alignment and visual consistency before generating the final screen-recording artifact. ## The 4-Phase Web Presentation Workflow According to the [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) in `skills/web-video-presentation/`, the pipeline is divided into four distinct phases with three hard checkpoints that force user confirmation. ### Phase 1: Content Preparation and Scripting The initial phase breaks down into three sub-steps that handle content transformation: **Phase 1.1 – Identify Input**: Determine the source material, whether it is a raw article or an existing script. **Phase 1.2 – Article → Narration Script**: Convert the article into a narration-friendly script. This step triggers **Checkpoint A1**, where you must review the generated script, agree on a theme, and draft an asset plan before proceeding. **Phase 1.3 – Script + Article → Outline**: Combine the script and source article to produce an [`outline.md`](https://github.com/ConardLi/garden-skills/blob/main/outline.md) file that drives the visual flow. This requires **Checkpoint A2**, where you approve the outline and decide on the development mode (prototype or full build). ### Phase 2: Build the Presentation In this phase, the system scaffolds a **Vite + React + TypeScript** project using [`skills/web-video-presentation/scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/scripts/scaffold.sh). The selected theme is applied immediately, and each step of the outline is implemented as a full-screen scene within the fixed 1920×1080 coordinate system. The phase concludes with **Checkpoint B**, which asks whether to synthesize audio for the presentation. This optional step allows you to proceed with or without generated narration. ### Phase 3: Optional Audio Synthesis If enabled at Checkpoint B, this phase runs the pluggable TTS (Text-to-Speech) pipeline via [`templates/scripts/synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/templates/scripts/synthesize-audio.sh). The script provider architecture in `templates/scripts/tts-providers/` allows swapping between different TTS backends (such as [`minimax.sh`](https://github.com/ConardLi/garden-skills/blob/main/minimax.sh) or [`openai.sh`](https://github.com/ConardLi/garden-skills/blob/main/openai.sh)) without modifying the core workflow. ### Phase 4: Recording and Post-Production The final phase involves recording the 1920×1080 stage using a screen-recorder, then applying post-production tweaks such as trimming and encoding. The fixed aspect ratio ensures consistent output dimensions suitable for video platforms. ## Key Technical Implementation Details The workflow enforces specific constraints that distinguish it from traditional slide-based presentations. **Fixed 16:9 Stage**: All scenes are authored in a stable 1920×1080 coordinate system defined in the skill contract ([`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)). This guarantees a clean recording canvas regardless of the display device. **Theme-Token Architecture**: Selecting a theme early (during Checkpoint A1) propagates token values for colors, typography, and motion throughout the build. The `themes/` directory contains 23 pre-built theme folders, each defining these token contracts, making visual redesign inexpensive. **One-Step, One-Idea Navigation**: Each click advances a single narration beat, preventing "slide-bullet" overload and maintaining tight visual narrative control as outlined in [`references/PRINCIPLES.md`](https://github.com/ConardLi/garden-skills/blob/main/references/PRINCIPLES.md). ## Getting Started: Scaffold Your First Presentation To execute the workflow phases locally, use the CLI helpers provided in the repository: ```bash # Scaffold a new presentation with a specific theme (e.g., "paper-press") bash skills/web-video-presentation/scripts/scaffold.sh ./my-presentation --theme=paper-press # List all 23 available themes bash skills/web-video-presentation/scripts/scaffold.sh --list-themes # Start the development server cd my-presentation && npm install && npm run dev ``` After completing Phase 2 (Build), optionally run Phase 3 audio synthesis: ```bash # Generate narration audio using the default Minimax provider bash skills/web-video-presentation/templates/scripts/synthesize-audio.sh ./my-presentation ``` ## Core Files and Architecture The following files implement the phased workflow in the ConardLi/garden-skills repository: - **[`skills/web-video-presentation/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/SKILL.md)**: The canonical contract that defines when and how the skill is invoked, including the three hard checkpoint requirements. - **[`skills/web-video-presentation/README.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/README.md)**: Human-readable overview documenting the workflow phases and checkpoint logic (lines 44-59). - **[`skills/web-video-presentation/references/PRINCIPLES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/PRINCIPLES.md)**: Core design rules governing the video-like presentation format. - **[`skills/web-video-presentation/scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/scripts/scaffold.sh)**: CLI helper that creates the Vite project structure and applies theme tokens. - **[`skills/web-video-presentation/templates/scripts/synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/templates/scripts/synthesize-audio.sh)**: Provider-agnostic runner for Phase 3 audio generation. - **`skills/web-video-presentation/templates/scripts/tts-providers/`**: Directory containing individual TTS backend implementations. - **`skills/web-video-presentation/themes/`**: Collection of 23 pre-built theme folders defining token contracts for colors, typography, and motion. ## Summary - The **web-video-presentation** skill uses a **four-phase pipeline** (Content Preparation, Build, Audio Synthesis, Recording) with **three mandatory checkpoints** (A1, A2, and B) to ensure quality control. - Each phase produces specific artifacts: narration scripts, [`outline.md`](https://github.com/ConardLi/garden-skills/blob/main/outline.md), Vite/React code, optional audio files, and final screen recordings. - The **fixed 1920×1080 stage** and **theme-token architecture** ensure consistent visual output across all presentations. - Audio synthesis is **pluggable and optional**, supporting multiple TTS providers through the `tts-providers/` directory structure. - The workflow is implemented in the ConardLi/garden-skills repository using shell scripts, React components, and markdown-based outline files. ## Frequently Asked Questions ### What are the hard checkpoints in the web presentation workflow? The workflow enforces three hard checkpoints that pause execution for user confirmation. **Checkpoint A1** occurs after converting an article to a narration script, requiring theme selection and asset planning. **Checkpoint A2** follows outline generation, requiring approval of the visual flow and development mode decision. **Checkpoint B** appears after building the presentation, asking whether to proceed with optional audio synthesis. ### How does the theme system work in the web-video-presentation skill? The theme system uses a **token-based architecture** where selecting a theme during Checkpoint A1 propagates values for colors, typography, and motion throughout the entire build. The `themes/` directory contains 23 pre-built themes, and the [`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scaffold.sh) script applies these tokens when creating the Vite + React + TypeScript project, making global style changes inexpensive. ### Can I use different text-to-speech providers for audio generation? Yes, the audio synthesis phase supports **pluggable TTS backends**. The [`templates/scripts/synthesize-audio.sh`](https://github.com/ConardLi/garden-skills/blob/main/templates/scripts/synthesize-audio.sh) script acts as a provider-agnostic runner, while individual providers (such as [`minimax.sh`](https://github.com/ConardLi/garden-skills/blob/main/minimax.sh) or [`openai.sh`](https://github.com/ConardLi/garden-skills/blob/main/openai.sh)) reside in the `templates/scripts/tts-providers/` directory. You can swap providers by selecting different scripts or adding new ones without modifying the core workflow logic. ### What resolution and aspect ratio does the workflow target? All scenes are authored in a **fixed 16:9 stage with a 1920×1080 coordinate system**. This fixed canvas, defined in the skill contract, guarantees consistent recording dimensions suitable for video platforms and prevents responsive layout issues during screen recording.