skills.rest
BintzGavin
BintzGavinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/BintzGavin/helios --skill create-composition
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
BintzGavinBintzGavin
94

example-canvas

Drive canvas animations with Helios timing and the HTML5 Canvas API.

Community
Intermediate
BintzGavinBintzGavin
94

example-pixi

Drive PixiJS display object properties from Helios subscription callbacks.

Community
Intermediate
BintzGavinBintzGavin
94

example-react

Integrate Helios timelines into React applications with hooks and components.

Community
Intermediate
BintzGavinBintzGavin
94

example-lottie

Synchronize Lottie animations with the Helios timeline using goToAndStop.

Community
Intermediate