create-composition
Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.
Best use case
create-composition is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.
Teams using create-composition should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/create-composition/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How create-composition Compares
| Feature / Agent | create-composition | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Create Composition Workflow
A Helios composition is a web page (HTML/JS) that uses the `@helios-project/core` library to drive animations. This page can be viewed in the Browser, embedded in the Player, or rendered to video by the Renderer.
## 1. Basic Structure
Create a `composition.html` file. This is the entry point.
```html
<!DOCTYPE html>
<html>
<head>
<title>My Composition</title>
<style>
body { margin: 0; overflow: hidden; background: black; }
canvas { display: block; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
```
## 2. Initialize Helios
In your script (`main.ts` or inline), initialize Helios and set up the render loop.
```typescript
import { Helios } from '@helios-project/core';
// 1. Config
const width = 1920;
const height = 1080;
const fps = 30;
const duration = 10; // seconds
// 2. Define Input Schema (Optional but recommended)
const schema = {
type: 'object',
properties: {
title: { type: 'string', default: "Hello World" },
color: { type: 'string', default: "#ff0000" }
}
};
// 3. Setup Canvas
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 4. Initialize Engine
const helios = new Helios({
duration,
fps,
width,
height,
schema, // Pass schema
inputProps: { title: "Hello World", color: "#ff0000" }, // Initial props
autoSyncAnimations: true // Optional: Sync CSS/WAAPI
});
// 5. Bind to Document Timeline (CRITICAL for Renderer/Player)
helios.bindToDocumentTimeline();
// 6. Expose to Window (CRITICAL for detection)
// @ts-ignore
window.helios = helios;
// 7. Define Render Function
function draw(frame: number, props: any) {
// Clear
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, width, height);
// Calculate time/progress
const time = frame / fps;
const progress = time / duration;
// Draw something using props
const x = progress * width;
ctx.fillStyle = props.color;
ctx.font = '100px sans-serif';
ctx.fillText(props.title, x, height/2);
}
// 8. Subscribe to State Changes
helios.subscribe((state) => {
draw(state.currentFrame, state.inputProps);
});
// 9. Initial Draw
const state = helios.getState();
draw(state.currentFrame, state.inputProps);
```
## Checklist
- [ ] **Instance Created:** `new Helios(...)` called with duration/fps/props.
- [ ] **Timeline Bound:** `helios.bindToDocumentTimeline()` called.
- [ ] **Window Exposed:** `window.helios = helios` set.
- [ ] **State Subscribed:** `helios.subscribe(...)` used to trigger renders.
- [ ] **Canvas/DOM Ready:** Elements are sized correctly (usually 100vw/100vh or fixed resolution).
## Auto-Sync Animations
If you are using CSS animations or Web Animations API (WAAPI), set `autoSyncAnimations: true` in the constructor. Helios will automatically hijack the document timeline and sync these animations to the current frame when scrubbing.
## Frameworks
For React, Vue, or Svelte, wrap this logic in a component or hook.
See `examples/react/SKILL.md`, `examples/vue/SKILL.md`, or `examples/svelte/SKILL.md`.Related Skills
helios-skills
Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
workflow-visualize-data
Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.
render-video
Workflow for rendering a Helios composition to a video file. Use when you need to automate video production or export a high-quality animation.
helios-studio
Studio tool for developing and previewing Helios compositions. Use when you want to launch the interactive development environment or manage assets.
helios-renderer
Renderer API for generating video/image output from Helios compositions. Use when you need to programmatically render a composition to a file using Node.js.
helios-player
Player API for embedding Helios compositions in web pages. Use when you need to display a composition with playback controls, enable client-side exporting, or support Picture-in-Picture.
guided-testimonial-video
End-to-end guided workflow for creating a social proof or testimonial video. Extracts brand identity from the repo, generates a warm soundtrack, and produces a trust-building motion.dev composition rendered via Helios CLI. Use when making customer testimonial, review highlight, or social proof videos.
guided-social-clip
End-to-end guided workflow for creating a short-form social media clip (Reels, TikTok, Shorts). Extracts brand identity from the repo, generates a punchy soundtrack, and produces a vertical 9:16 motion.dev composition rendered via Helios CLI. Use when making Instagram Reels, TikTok videos, YouTube Shorts, or other vertical short-form content.
motion-design-rules
Motion design framework for programmatic video. Defines anti-slideshow architecture, visual layering, physics-based easing, choreography rules, and quality validation. Reference this skill from any guided video skill.
guided-launch-announcement
End-to-end guided workflow for creating a product launch or release announcement video. Extracts brand identity from the repo, generates a cinematic soundtrack, and produces a reveal-driven motion.dev composition rendered via Helios CLI. Use when making launch announcements, release videos, or product reveals.
guided-explainer-video
End-to-end guided workflow for creating an explainer or walkthrough video. Extracts brand identity from the repo, generates a measured soundtrack, and produces a narrative-driven motion.dev composition rendered via Helios CLI. Use when making how-it-works, feature walkthrough, or educational videos.