Web Video Presentation Skill: Core Principles for Cinematic React Presentations

The web video presentation skill is a method-driven framework in the ConardLi/garden-skills repository that transforms scripts into cinematic 16:9 web presentations using Vite, React, and TypeScript. This approach enforces a strict separation between content structure and visual delivery, ensuring every generated project adheres to motion-first design principles and video-ready output standards.

Fixed 16:9 Stage Architecture

Every presentation generated by this skill operates within a fixed 1920 × 1080 coordinate system that automatically scales to fit any browser viewport. This guarantees a consistent 16:9 aspect ratio essential for video recording and playback. In templates/src/components/Stage.tsx, the implementation maintains this stable canvas while handling responsive scaling, ensuring that visual elements remain positioned exactly as authored regardless of screen size.

Global Step Cursor and Navigation

The skill implements a single global cursor that tracks the current (chapter, step) pair across the entire presentation. This cursor persists locally, allowing presentations to resume exactly where users left off. State management lives in templates/src/store/useStep.ts, while templates/src/App.tsx orchestrates the cursor advancement through keyboard and click events.

import { useStep } from '@/store/useStep';

export default function ProgressBar() {
  const { step, nextStep } = useStep();
  return (
    <button onClick={nextStep}>
      ▶️ {step}
    </button>
  );
}

One Step, One Idea Content Strategy

Each interaction reveals a full-screen scene dedicated to a single concept, eliminating the visual clutter of traditional slide bullet points. This principle enforces tight alignment between narration and visuals—every script beat maps directly to a discrete step in the presentation flow. Static paragraphs are treated as a design anti-pattern; instead, the framework requires motion-rich visual anchors for every scene.

Cinematic UI Design Patterns

Hidden chrome ensures navigation controls appear only on hover, keeping recordings clean and free of UI distractions. This behavior is implemented in templates/src/components/MaskReveal.tsx, which manages the visibility state of control surfaces. The motion-first mandate requires every scene to contain animated elements, treating static layouts as errors to be corrected through dynamic visual components.

Visual consistency flows through semantic theme tokens defined in themes/*/theme.json and themes/*/tokens.css. This token system enables complete theme swaps—such as the built-in paper-press theme—without modifying component code, as design decisions reference abstract token values rather than hardcoded properties.

Pluggable Text-to-Speech Pipeline

Audio synthesis is provider-agnostic through a shell-script extension system. The skill ships with built-in support for MiniMax and OpenAI TTS providers, but custom implementations require only adding an executable script to the tts-providers/ directory. The scripts/synthesize-audio.sh entry point automatically discovers and invokes any provider scripts found in that folder.

# Scaffold a new presentation with a specific theme

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

# Install dependencies and start development

cd my-presentation
npm install
npm run dev

Hard Checkpoints in the Workflow

The skill contract enforces deliberate pause points that prevent accidental progression. The system requires explicit approval after script and theme alignment, after outline finalization, and before optional audio synthesis begins. These hard checkpoints ensure that architectural decisions receive proper review before the scaffolding generates the final Vite application structure.

Summary

• Fixed 16:9 stage: All content renders within a 1920 × 1080 coordinate system via templates/src/components/Stage.tsx for video-ready consistency.
• Global step cursor: A single (chapter, step) pair tracked in templates/src/store/useStep.ts with local persistence for session resumption.
• Motion-first mandate: Static layouts are prohibited; every scene must feature animated visual anchors.
• Pluggable TTS: Drop shell scripts into tts-providers/ to extend audio synthesis beyond the built-in MiniMax and OpenAI options.
• Semantic theming: Visual properties flow through themes/*/tokens.css, enabling theme swaps without component modifications.
• Hard checkpoints: Workflow pauses ensure deliberate approval at critical design milestones.

Frequently Asked Questions

How does the web video presentation skill handle responsive scaling?

The skill uses a fixed 1920 × 1080 logical canvas implemented in templates/src/components/Stage.tsx, which automatically scales to fit the browser viewport while maintaining the 16:9 aspect ratio. This approach guarantees that recordings capture consistent pixel-perfect layouts regardless of the viewer's screen dimensions.

Can I use custom text-to-speech providers with this skill?

Yes, the audio pipeline is fully extensible. Create an executable shell script in the tts-providers/ directory following the interface used by the built-in MiniMax and OpenAI providers. The scripts/synthesize-audio.sh utility automatically detects and executes any scripts placed in this folder during the synthesis phase.

What is the significance of the global step cursor in the architecture?

The global step cursor maintains a single source of truth for presentation state across the entire React application. Stored in templates/src/store/useStep.ts and consumed by components like templates/src/components/ProgressBar.tsx, this cursor ensures synchronized navigation while persisting progress to local storage, enabling seamless session continuity between visits.

How do theme tokens enable visual customization?

Theme tokens are defined in themes/*/theme.json and themes/*/tokens.css, establishing a semantic abstraction layer between design decisions and component implementations. This allows you to swap entire visual themes—such as changing from a corporate to a cinematic look—by modifying token values without touching the React components in templates/src/components/.

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