workflow-preview-composition

Preview and iterate Helios video compositions in the browser via the Studio.

94|6|Updated Aug 12, 2025
One-click install
npx skills add https://github.com/BintzGavin/helios --skill workflow-preview-composition
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: workflow-preview-composition
Source: https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios/workflows/preview-composition
Command: npx skills add https://github.com/BintzGavin/helios --skill workflow-preview-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This workflow guides you through launching the Helios Studio to preview, debug, and iterate on your video composition in the browser.

Core Features & Use Cases

  • Preview and iterate Helios compositions directly in the browser using the Studio.
  • Live editing with hot reload to see changes instantly without restarting the preview.
  • Manage timing and props with a built-in timeline and a Props Panel for dynamic adjustments.

Quick Start

Run npx helios studio from your project root to start the Studio. A local server is launched (typically at http://localhost:5173). Open the URL in your browser to view the Video Preview, Timeline, and Controls. Use the Timeline to Play/Pause with Space, scrub, step frames with Arrow keys, and toggle Looping with L. Changes you make in your code are hot-reloaded in real time, preserving the current frame. If your composition uses inputProps defined in a schema, adjust values via the Props Panel to see immediate effects.

Frequently Asked Questions about workflow-preview-composition

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview a Helios video composition in the browser?

Run npx helios studio from your project root to launch a local Vite server and open the provided localhost URL to access the Studio for previewing your Helios video composition directly in the browser.

Does Helios Studio support hot reload for live editing video timelines?

Yes, Helios Studio supports hot reload for live editing timelines. Code changes are hot-reloaded in real time, preserving the current frame so you can see instant updates without restarting the preview server or losing your playback position.

Can I test inputProps dynamically when previewing Helios compositions?

Yes, you can test inputProps dynamically when previewing Helios compositions. If your composition uses a schema, the Studio's Props Panel allows you to adjust input values and see immediate effects on the video preview without manual code changes.

What are the keyboard controls for timeline playback in Helios Studio?

The keyboard controls for timeline playback in Helios Studio include pressing Space to Play or Pause, using Arrow keys to step through frames, and pressing L to toggle Looping. You can also scrub through the timeline manually with your mouse.

Do I need any dependencies installed to run the Helios Studio preview?

You do not need any specific dependencies installed beforehand to run the Helios Studio preview. The command npx helios studio executes the tool directly without requiring a global installation or manual local server setup in your project.