How the Fixed 1920x1080 Stage Works in the web-video-presentation Skill

The web-video-presentation skill renders every slide on a fixed 1920×1080 pixel stage that dynamically scales to fit any viewport while preserving its 16:9 aspect ratio, using a generated ID like I92OxIO8O and theme-driven CSS variables for consistent, pixel-perfect presentations.

The web-video-presentation skill in the ConardLi/garden-skills repository creates a cinematic presentation environment by anchoring all content to a fixed logical canvas. This fixed 1920x1080 stage ensures that slide elements maintain exact pixel coordinates regardless of the viewer's screen size, making it ideal for screen recording and video production workflows. Understanding this architecture requires examining the React scaling logic, CSS token system, and dynamic stage identification implemented in the source code.

Fixed Stage Architecture Overview

The stage system operates on a three-layer architecture that separates the logical coordinate system from the responsive rendering layer.

The 1920×1080 Logical Canvas

At the core of the system is a fixed logical size of 1920×1080 pixels (16:9 aspect ratio). This canvas is defined by the .stage-frame class in tokens.css, which sets explicit dimensions using CSS custom properties:

• --stage-w: 1920px
• --stage-h: 1080px
• --stage-ratio: calc(var(--stage-w) / var(--stage-h))

This fixed coordinate system allows designers to position elements using pixel-perfect measurements that remain constant across all viewports.

Dynamic Stage Identification

Each stage instance receives a unique identifier generated at runtime. In Stage.tsx, the component creates an ID using crypto.randomUUID().slice(0,9) prefixed with I (e.g., I92OxIO8O), which is assigned to the root <div id={stageId}>. This identifier enables isolated theming and debugging for individual presentation instances.

Responsive Scaling Implementation

While the logical canvas remains fixed, the visual presentation adapts to any screen size through a calculated scaling transformation.

Scale Calculation Logic

The Stage.tsx component computes the scaling factor using the viewport dimensions:

const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);

This calculation ensures the entire 1920×1080 canvas fits within the available screen space while maintaining the aspect ratio. The scale value is applied to the .stage-wrapper element via the --stage-scale CSS custom property.

Wrapper Transformation

The scaling implementation uses absolute positioning and CSS transforms to center the stage:

.stage-wrapper {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: top left;
}

The wrapper element tracks the computed scale value and updates dynamically on window resize events, ensuring smooth transitions when the viewport changes.

Theme-Driven Styling Architecture

The visual appearance of the stage is controlled through a token-based theming system that separates structural scaling from aesthetic presentation.

CSS Token Definitions

The tokens.css file in the theme directory declares all stage-related variables:

:root {
  --stage-w: 1920px;
  --stage-h: 1080px;
  --stage-pad-x: 96px;
  --stage-pad-y: 80px;
  --r-stage: 0;
  --shadow-stage: 0 6px 12px rgba(0,0,0,.2);
  --stage-border: none;
}

These variables define the fixed dimensions, internal padding, corner radius, and shadows while allowing themes to customize the visual presentation without modifying the scaling logic.

Theme Configuration

Concrete values for these tokens are provided in theme.json (located in skills/web-video-presentation/themes/warm-keynote/). The Stage.tsx component injects these values into document.documentElement.style during initialization, allowing runtime theme switching.

Stage Frame Implementation

The .stage-frame class applies the fixed dimensions and theme variables to create the actual presentation surface:

.stage-frame {
  width: var(--stage-w);
  height: var(--stage-h);
  padding: var(--stage-pad-y) var(--stage-pad-x);
  border-radius: var(--r-stage);
  box-shadow: var(--shadow-stage);
  border: var(--stage-border);
  background: var(--stage-bg, #fff);
}

Source Code Reference

The fixed stage implementation spans several key files in the ConardLi/garden-skills repository:

• templates/src/components/Stage.tsx: Implements the React component that generates the stage ID, calculates viewport scaling, and manages the resize event listeners.
• themes/warm-keynote/tokens.css: Defines the CSS custom properties for stage dimensions, padding, and visual styling.
• themes/warm-keynote/theme.json: Supplies the concrete values for theme variables consumed by the stage system.
• manifest.json: Declares the skill's asset structure and entry points.
• SKILL.md: Documents the fixed-stage workflow and usage guidelines.

Summary

• The fixed 1920x1080 stage provides a logical coordinate system that never changes, enabling pixel-perfect content positioning for video production.
• Dynamic scaling is handled by the Stage.tsx component, which calculates a scale factor based on viewport dimensions and applies it via CSS transforms to the .stage-wrapper element.
• Theme-driven styling separates visual appearance from structural logic through CSS variables defined in tokens.css and configured in theme.json.
• Each stage instance receives a unique generated ID (e.g., I92OxIO8O) created via crypto.randomUUID() to enable isolated theming and debugging.

Frequently Asked Questions

How does the stage maintain the 16:9 aspect ratio on different screen sizes?

The stage preserves its aspect ratio by calculating a uniform scale factor using Math.min(window.innerWidth / 1920, window.innerHeight / 1080) in Stage.tsx. This selects the smaller of the horizontal or vertical scaling ratios, ensuring the entire 1920×1080 canvas fits within the viewport without distortion. The scale is applied via CSS transform: scale() on the .stage-wrapper container.

Why does the stage use a fixed 1920x1080 resolution instead of relative units?

The fixed resolution creates a stable coordinate system where every element can be positioned using exact pixel values. This is essential for the web-video-presentation skill's primary use case: creating presentations that will be screen-recorded or exported as video. Relative units would cause layout shifts between different screen sizes, breaking the pixel-perfect consistency required for professional video production.

Where are the stage's visual styles (padding, shadows, borders) defined?

Visual styles are defined through CSS custom properties in tokens.css and populated with values from theme.json in the specific theme folder (e.g., themes/warm-keynote/). The Stage.tsx component injects these variables into the document root during initialization. Properties like --stage-pad-x, --stage-pad-y, --shadow-stage, and --r-stage control the internal spacing and visual appearance without affecting the core scaling logic.

What is the purpose of the generated ID like I92OxIO8O?

The generated ID serves as a unique stage token that identifies individual presentation instances. Created using crypto.randomUUID().slice(0,9) and prefixed with I, this ID is attached to the root stage element as both an HTML id attribute and potentially for theme scoping. It enables debugging, allows for instance-specific styling hooks, and ensures that multiple stages can coexist on the same page without ID collisions.

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