# Web-Video-Presentation Skill Development Modes: Live Development vs. Production Recording > Explore web video presentation skill development modes. Learn live development for rapid iteration and production recording for optimized static builds. Master both with ease. - Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills) - Tags: deep-dive - Published: 2026-08-30 --- **The web-video-presentation skill provides two distinct development modes: an interactive Live Development Mode for rapid iteration via `npm run dev`, and a Production (Recording) Mode for creating optimized static builds via `npm run build` and `npm run preview`.** The **web-video-presentation** skill in the `ConardLi/garden-skills` repository is a specialized toolchain for creating cinematic, slide-driven video presentations using React and Vite. Understanding the available **development modes** is essential for efficiently authoring content and producing final recordings. Each mode serves a specific purpose in the presentation workflow documented in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) and [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md). ## Live Development Mode Live Development Mode provides an interactive authoring environment with instant feedback and hot-reloading capabilities. This mode is initiated by running `npm run dev` inside a scaffolded presentation directory. According to [`skills/web-video-presentation/scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/scripts/scaffold.sh) (line 194), the Vite development server starts on **localhost:5173** by default, automatically selecting the next available port if that address is occupied. The UI renders a full-screen 16:9 stage with progress controls hidden until hovered—ideal for iterating on presentation steps, themes, and motion graphics. This workflow corresponds to *Checkpoint A2* in the repository's workflow diagram referenced in [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) (line 51) and is explicitly mentioned in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) (lines 275 and 358). ## Recording (Production) Mode Recording Mode generates a stable, optimized static bundle suitable for screen capture or deployment. When your presentation is ready for final output, execute `npm run build` to create a production-ready bundle in the `dist/` directory. The build process disables hot-reload functionality and optimizes assets to ensure clean, consistent UI behavior during recording. You can verify the final output locally using `npm run preview` before capturing. This stage aligns with "Phase 4: Recording and post-production" as described in the workflow documentation within [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md). ## Triggering the Development Modes Both modes rely on the same scaffolded Vite + React + TypeScript project structure. The transition between modes is controlled by standard npm scripts. ### 1. Project Scaffolding First, generate a new presentation using the provided script: ```bash bash skills/web-video-presentation/scripts/scaffold.sh ./my-talk --theme=paper-press ``` This creates a standard project structure with dependencies pre-configured. ### 2. Activating Live Development Mode Navigate to your project directory and start the development server: ```bash cd my-talk npm install npm run dev ``` The terminal will display the local URL (typically `http://localhost:5173`). Use this environment to refine content, adjust timing, and preview themes by swapping [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) files from different theme directories. ### 3. Switching to Production/Recording Mode When ready to capture or deploy: ```bash npm run build npm run preview ``` The `build` command compiles the React source code from `templates/src/` into optimized static assets. The `preview` command serves these assets locally for final validation before you initiate screen recording. ## Key Configuration Files The development modes are defined by the interaction between several critical files in the repository: - **[`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh)**: Generates the Vite project structure and contains the port selection logic (line 194) that enables automatic port fallback during `npm run dev`. - **[`templates/vite.config.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/vite.config.ts)**: The shared Vite configuration that supports both development server settings and production build optimizations. - **[`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)**: Documents the development server location and workflow phases, specifically referencing `localhost:5173` and the transition to recording mode. - **`themes/*/tokens.css`**: Theme-specific design tokens that can be swapped during live development to instantly preview different visual styles without rebuilding. ## Summary - **Live Development Mode** uses `npm run dev` to start a hot-reloading server on `localhost:5173` (or next available port) for interactive authoring. - **Production/Recording Mode** uses `npm run build` followed by `npm run preview` to generate optimized static bundles suitable for screen capture. - Both modes share identical React/TypeScript source code in `templates/src/` and are controlled through standard Vite CLI commands. - Theme switching is accomplished by swapping CSS token files during development, while the scaffold script ([`scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scaffold.sh)) handles initial project setup and port configuration. ## Frequently Asked Questions ### What port does the web-video-presentation skill development server use? The development server defaults to **port 5173** on localhost. According to the implementation in [`scripts/scaffold.sh`](https://github.com/ConardLi/garden-skills/blob/main/scripts/scaffold.sh) (line 194), if port 5173 is occupied, Vite automatically selects the next available port to prevent conflicts. ### Can I change themes while in Live Development Mode? Yes. During Live Development Mode, you can swap the [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file from any theme directory (located in `themes/*/`) into your project. The hot-reloading dev server will instantly update the visual styling without requiring a rebuild, allowing rapid theme comparison. ### Is the source code different between development and production modes? No. Both modes utilize the identical React and TypeScript source code located in `templates/src/`. The only difference is the Vite command executed—`npm run dev` enables hot-reload and debugging features, while `npm run build` creates an optimized, minified bundle with those features disabled. ### How do I prepare a presentation for screen recording? Run `npm run build` to generate a production bundle, then serve it with `npm run preview` or any static file server. This ensures the UI is clean, stable, and free from development overlays or hot-reload indicators that might appear during `npm run dev`.