create-composition

Initialize Helios composition workflows with HTML scaffolding and timeline binding.

94|6|Updated Aug 12, 2025

Search Tags:#workflow #TypeScript #composition #animation #bootstrap #web-standards #Helios

Ready to run

npx skills add https://github.com/BintzGavin/helios --skill create-composition

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-composition
Source: https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios/workflows/create-composition
Command: npx skills add https://github.com/BintzGavin/helios --skill create-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a repeatable workflow to bootstrap a Helios composition, eliminating manual setup when starting a new animation project or converting an existing one.

Core Features & Use Cases

Bootstrap HTML/Canvas scaffolding: Create the standard composition.html and canvas setup.
Helios Initialization & Binding: Initialize Helios and bind to the document timeline for playback and rendering.
Conversion & Reuse: Streamline converting existing animations to Helios-compatible workflows across Browser, Player, and Renderer contexts.

Quick Start

Create a new composition by laying out a minimal HTML scaffold, import the Helios core, initialize a Helios instance with a basic timeline, bind it to the document, expose it to the window, and implement a simple render loop that subscribes to input state.

Frequently Asked Questions about create-composition

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

FAQPage Schema

How do I bootstrap a Helios composition for a new animation project?▼

To bootstrap a Helios composition, create a standard entry HTML scaffold, initialize a Helios instance, bind it to the document timeline, and implement a render loop subscribing to input state.

Can I convert existing web animations to run within Helios across different contexts?▼

Yes, you can convert existing animations to Helios-compatible workflows, ensuring they run correctly across Browser, Player, and Renderer contexts by updating the timeline binding and render subscription.

What is document timeline binding in a Helios composition workflow?▼

Document timeline binding connects an initialized Helios instance to the document timeline, synchronizing playback and rendering so the composition accurately updates based on input state.

Do I need a specific HTML structure to initialize a Helios composition?▼

You need a standard composition.html file with a canvas setup to initialize Helios, which provides the required scaffolding for the instance creation and render loop.

What's the best way to standardize entry HTML for Helios animation projects?▼

The best way to standardize entry HTML is to use a repeatable workflow that scaffolds the composition.html, imports Helios core, and exposes the instance to the window object.

Why is a state-based render subscription needed when initializing Helios?▼

A state-based render subscription is needed to update the animation output dynamically, allowing the Helios instance to respond to input state changes during playback across rendering contexts.