Agent skill

Helios Getting Started

Installation and quick start guide for Helios video engine. An agent skill from BintzGavin/helios.

Apache-2.0Auto-check passedMedia & Creative

Install Helios Getting Started

skills CLI

$ npx skills add BintzGavin/helios --skill helios-getting-started -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install BintzGavin/helios helios-getting-started --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/helios-skills/skills/getting-started .claude/skills/helios-getting-started && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "helios-getting-started" agent skill from https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios-skills/skills/getting-started into .claude/skills/helios-getting-started/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "helios-getting-started", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios-skills/skills/getting-started

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add BintzGavin/helios --skill helios-getting-started -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install BintzGavin/helios helios-getting-started --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/helios-skills/skills/getting-started .agents/skills/helios-getting-started && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "helios-getting-started" agent skill from https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios-skills/skills/getting-started into .agents/skills/helios-getting-started/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "helios-getting-started", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add BintzGavin/helios --skill helios-getting-started -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install BintzGavin/helios helios-getting-started --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/helios-skills/skills/getting-started .cursor/skills/helios-getting-started && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "helios-getting-started" agent skill from https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios-skills/skills/getting-started into .cursor/skills/helios-getting-started/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "helios-getting-started", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/BintzGavin/helios.git --path .agents/skills/helios-skills/skills/getting-started

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add BintzGavin/helios --skill helios-getting-started -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install BintzGavin/helios helios-getting-started --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/helios-skills/skills/getting-started .gemini/skills/helios-getting-started && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "helios-getting-started" agent skill from https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios-skills/skills/getting-started into .gemini/skills/helios-getting-started/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "helios-getting-started", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install BintzGavin/helios helios-getting-started

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add BintzGavin/helios --skill helios-getting-started -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/helios-skills/skills/getting-started .github/skills/helios-getting-started && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "helios-getting-started" agent skill from https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios-skills/skills/getting-started into .github/skills/helios-getting-started/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "helios-getting-started", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add BintzGavin/helios --skill helios-getting-started -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install BintzGavin/helios helios-getting-started --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/helios-skills/skills/getting-started .opencode/skills/helios-getting-started && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "helios-getting-started" agent skill from https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios-skills/skills/getting-started into .opencode/skills/helios-getting-started/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "helios-getting-started", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: helios-getting-started
GitHub stars: 118
Token cost: ~1.8k tokens
SKILL.md length: 510 words
Files: 1
Skills in repo: 16
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Installation and quick start guide for Helios video engine. An agent skill from BintzGavin/helios.

Works in 5 steps: Create a Composition File → Initialize Helios → Use Standard CSS Animations → …
Setting up a new Helios project
SKILL.md covers Requirements, Installation, Basic Setup and Framework Integration, plus 3 more sections
Calls npm and npx

What it does

Helios Getting Started is an agent skill from BintzGavin/helios. Installation and quick start guide for Helios video engine. Use when setting up a new Helios project, installing packages, or creating your first composition. Covers package installation, requirements, basic setup, and initial composition structure.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering Video production. It works with FFmpeg. The repository describes itself as: Programmatic video creation with web technologies you already know. CSS animations just work. The licence is Apache-2.0.

When your agent uses it

Setting up a new Helios project
Installing packages
Creating your first composition

Example prompts

“/helios-getting-started”

Requirements

Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Create a Composition File
Initialize Helios
Use Standard CSS Animations
Render to Video
Preview with the Player (Optional)

What it can do on your machine

Read from SKILL.md and the folder at commit 0fb7335. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
- npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Helios Getting Started loads about 1.8k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 510 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~68
When it runs · the whole SKILL.md, loaded when a task matches: ~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from BintzGavin/helios at commit 0fb7335, republished under its Apache-2.0 licence (© BintzGavin). 510 words, ~1,788 tokens.

Download SKILL.mdSave it as .claude/skills/helios-getting-started/SKILL.md (or your agent's skills folder).

name: helios-getting-started
description: Installation and quick start guide for Helios video engine. Use when setting up a new Helios project, installing packages, or creating your first composition. Covers package installation, requirements, basic setup, and initial composition structure.

Helios Getting Started

Quick installation and setup guide for Helios, a browser-native video engine for programmatic animation and rendering.

Requirements

Before installing Helios, ensure you have:

Node.js: v18 or higher (recommended)
npm or yarn package manager
Chrome/Chromium: Required for rendering (automatically installed by Playwright)

FFmpeg (Automatically Included)

Good news: FFmpeg is automatically bundled with @helios-project/renderer via the @ffmpeg-installer/ffmpeg package. You don't need to install it manually!

The renderer package includes platform-specific FFmpeg binaries that work out of the box. If you prefer to use a system-installed FFmpeg instead, you can specify a custom path via the ffmpegPath option in the renderer configuration.

Installation

Helios is modular—install only what you need.

Core Package (Required)

The @helios-project/core package contains the engine logic, timing drivers, and animation helpers. This is required for any composition.

bash

npm install @helios-project/core

Renderer Package (Recommended)

The @helios-project/renderer package is a Node.js library for rendering compositions to video files (MP4, etc.) using Headless Chrome and FFmpeg. Most users want to create MP4 files, so this is the recommended second package.

bash

npm install @helios-project/renderer

Quick Install (Core + Renderer)

For most use cases—creating MP4 videos—install both core and renderer:

bash

npm install @helios-project/core @helios-project/renderer

Player Package (Optional - For Preview/Development)

The @helios-project/player package provides the <helios-player> web component for embedding compositions with playback controls. Useful for previewing compositions during development, but not required for rendering.

bash

npm install @helios-project/player

Basic Setup

1. Create a Composition File

Create an HTML file (e.g., composition.html) that will serve as your composition:

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.js"></script>
</body>
</html>

2. Initialize Helios

In your JavaScript file (src/main.js), import and initialize Helios:

typescript

import { Helios } from '@helios-project/core';

// Create a 10-second video at 30fps
const helios = new Helios({
  duration: 10,  // seconds
  fps: 30,
  width: 1920,
  height: 1080,
  autoSyncAnimations: true  // Sync CSS/WAAPI animations
});

// Bind to document timeline (CRITICAL for Renderer/Player)
helios.bindToDocumentTimeline();

// Expose to window (CRITICAL for detection)
window.helios = helios;

// Subscribe to frame updates
helios.subscribe((state) => {
  const { currentFrame, duration, fps } = state;
  const progress = currentFrame / (duration * fps);
  
  // Render your frame here
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  // Example: Draw something based on progress
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width * progress, canvas.height);
});

// Initial render
const state = helios.getState();
helios.subscribe((state) => {
  // Render logic here
})();

3. Use Standard CSS Animations

Your existing CSS animations work without modification:

css

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.my-element {
  animation: fadeIn 1s ease-out forwards;
}

When you call helios.seek(45), all CSS/WAAPI animations instantly update to frame 45.

4. Render to Video

This is the primary use case—most users want to create MP4 files from their compositions.

Use the CLI to render your composition:

bash

npx helios render ./composition.html -o output.mp4

Or use the Renderer package programmatically:

typescript

import { render } from '@helios-project/renderer';

await render({
  input: './composition.html',
  output: './output.mp4',
  width: 1920,
  height: 1080,
  fps: 30
});

Show full SKILL.md (211 more words)Show less

5. Preview with the Player (Optional)

If you installed the player package, use the <helios-player> web component for preview during development:

html

<helios-player src="./composition.html" width="1920" height="1080"></helios-player>
<script type="module" src="@helios-project/player"></script>

Framework Integration

Helios works with any framework or vanilla JavaScript:

React:

typescript

import { useVideoFrame } from '@helios-project/core/react';

function MyComponent() {
  const { currentFrame } = useVideoFrame();
  return <div>Frame: {currentFrame}</div>;
}

Vue:

typescript

import { useVideoFrame } from '@helios-project/core/vue';

const { currentFrame } = useVideoFrame();

Svelte:

typescript

import { videoFrame } from '@helios-project/core/svelte';

$: currentFrame = $videoFrame.currentFrame;

Vanilla JS:

typescript

helios.subscribe(state => {
  console.log(state.currentFrame);
});

Checklist

When setting up a new Helios composition, ensure:

Core package installed: npm install @helios-project/core
Renderer package installed (for MP4 output): npm install @helios-project/renderer
Helios instance created: new Helios({ duration, fps })
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

Next Steps

See helios/core skill for detailed API reference
See helios/workflows/create-composition for composition creation workflow
See helios/examples/react or helios/examples/vue for framework-specific patterns
See helios/renderer for rendering pipeline details

Troubleshooting

"Cannot find module '@helios-project/core'"

Ensure you've run npm install @helios-project/core
Check that your bundler (Vite, Webpack, etc.) is configured correctly

Animations not syncing

Ensure autoSyncAnimations: true is set in the Helios constructor
Call helios.bindToDocumentTimeline() after creating the instance

Renderer fails

FFmpeg is bundled with the renderer package, so no manual installation needed
Check that Chrome/Chromium is available (Playwright should install it automatically)
If you need to use a custom FFmpeg path, set ffmpegPath in renderer options

Player not detecting composition

Ensure window.helios = helios is set
Verify the composition HTML file path is correct

Files

Just SKILL.md in .agents/skills/helios-skills/skills/getting-started of BintzGavin/helios.

Open the folder on GitHubat commit 0fb7335

Compare with similar skills

Helios Getting Started next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Helios Getting Started compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Helios Getting Started this skillBintzGavin/helios	118	—	~1.8k	Automated safety check: Pass	Apache-2.0	yesterday
Video Understandcalesthio/OpenMontage	65k	—	~841	Automated safety check: Pass	AGPL-3.0	5 days ago
Video Shotseternityspring/reelbench-skills	868	2 repos	~1.8k	Automated safety check: Notes	Apache-2.0	17 days ago
HyperFrames Video Entry Pointheygen-com/hyperframes	59k	3 repos	~5.2k	Automated safety check: Pass	Apache-2.0	today
Mobile Demo Film Editorsuperset-sh/superset	15k	—	~1.8k	Automated safety check: Pass	Custom licence	today
Karaoke CaptionsAI-Builder-Club/skills	1.3k	1 repos	~850	Automated safety check: Pass	None	23 days ago

Similar skills

Video Understand
calesthio/OpenMontage
Understand video content locally using ffmpeg frame extraction and Whisper transcription.
65k GitHub stars~841 tokensUpdated 5 days ago
Media & CreativeAuto-check passed
Video Shots
eternityspring/reelbench-skills
拉片：把一条成片拆成逐镜头的分析表——每个镜头的时长、景别、类别、运镜、画面. An agent skill from eternityspring/reelbench-skills.
868 GitHub starsUsed in 2 repos~1.8k tokens
Media & CreativeAuto-check: notes
HyperFrames Video Entry Point
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
59k GitHub starsUsed in 3 repos~5.2k tokens
Media & CreativeAuto-check passed
Mobile Demo Film Editor
superset-sh/superset
Edits real mobile screen recordings into a configurable demo video with phone framing, title cards, cutaways and an end card, using a bundled renderer.
15k GitHub stars~1.8k tokensUpdated today
Media & CreativeAuto-check passed
Karaoke Captions
AI-Builder-Club/skills
Generate TikTok/Shorts-style karaoke captions using MLX Whisper, ASS subtitles, and FFmpeg libass.
1.3k GitHub starsUsed in 1 repo~850 tokens
Media & CreativeAuto-check passed
Video Scrub
eternityspring/reelbench-skills
把一条视频重建成「只有画面和声音」的干净文件——源片的元数据一概不搬： GPS、设备型号、账号 ID、创建时间、章节、GoPro 的遥测轨，全部留在原地。
868 GitHub starsUsed in 1 repo~1.3k tokens
Media & CreativeAuto-check: notes

Questions about Helios Getting Started

What does Helios Getting Started do?

Installation and quick start guide for Helios video engine. An agent skill from BintzGavin/helios. Helios Getting Started is an agent skill from BintzGavin/helios. Installation and quick start guide for Helios video engine.

When should I use Helios Getting Started?

Helios Getting Started fits situations like: setting up a new Helios project; installing packages; creating your first composition.

How do I install Helios Getting Started in Claude Code?

Run `npx skills add BintzGavin/helios --skill helios-getting-started -a claude-code`. Or copy the skill folder (.agents/skills/helios-skills/skills/getting-started in BintzGavin/helios) into .claude/skills/helios-getting-started in your project. Claude Code loads it when a task matches its description.

How do I install Helios Getting Started in Codex?

Run `npx skills add BintzGavin/helios --skill helios-getting-started -a codex`. Or copy the skill folder (.agents/skills/helios-skills/skills/getting-started in BintzGavin/helios) into .agents/skills/helios-getting-started in your project. Codex loads it when a task matches its description.

Can I use Helios Getting Started in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add BintzGavin/helios --skill helios-getting-started -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/helios-getting-started, .gemini/skills/helios-getting-started, .github/skills/helios-getting-started and .opencode/skills/helios-getting-started in your project.

What does Helios Getting Started need to run?

Going by SKILL.md and its folder, Helios Getting Started needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.

Does Helios Getting Started access the network?

SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Helios Getting Started safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Helios Getting Started use?

Helios Getting Started is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Helios Getting Started use?

About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Helios Getting Started?

Skills that share tags, products or a category with Helios Getting Started: Video Understand (calesthio/OpenMontage, 65k stars), Video Shots (eternityspring/reelbench-skills, 868 stars), HyperFrames Video Entry Point (heygen-com/hyperframes, 59k stars) and Mobile Demo Film Editor (superset-sh/superset, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Helios Getting Started?

BintzGavin (a GitHub user) maintains it in BintzGavin/helios, which has 118 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 7, 2026.

Source: BintzGavin/helios on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Helios Getting Started

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Helios Getting Started

Requirements

FFmpeg (Automatically Included)

Installation

Core Package (Required)

Renderer Package (Recommended)

Quick Install (Core + Renderer)

Player Package (Optional - For Preview/Development)

Basic Setup

1. Create a Composition File

2. Initialize Helios

3. Use Standard CSS Animations

4. Render to Video

5. Preview with the Player (Optional)

Framework Integration

Checklist

Next Steps

Troubleshooting

Files

Compare with similar skills

Similar skills

More from BintzGavin/helios

Related

Questions about Helios Getting Started