Web-Video-Presentation Skill Development Modes: Live Development vs. Production Recording

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 and 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 (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 (line 51) and is explicitly mentioned in 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.

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 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:

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 files from different theme directories.

3. Switching to Production/Recording Mode

When ready to capture or deploy:

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: 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: The shared Vite configuration that supports both development server settings and production build optimizations.
• 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) 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 (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 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.

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