helios-skills

---
name: helios-skills
description: 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.
---

# Helios Skills Collection

This catalog contains agent skills for [Helios](https://github.com/BintzGavin/helios), a browser-native video engine for programmatic animation and rendering. It lives in `skills/` of the Helios repository.

## Installation

This is a **collection** of skills. To use them, install individual skills by their path:

```bash
# Make a video (the entry skill, also shipped in the Helios agent plugin)
npx skills add BintzGavin/helios/plugins/helios/skills/make-video

# Getting started
npx skills add BintzGavin/helios/skills/getting-started

# Core skills
npx skills add BintzGavin/helios/skills/core
npx skills add BintzGavin/helios/skills/renderer
npx skills add BintzGavin/helios/skills/player
npx skills add BintzGavin/helios/skills/studio

# Workflows
npx skills add BintzGavin/helios/skills/workflows/create-composition
npx skills add BintzGavin/helios/skills/workflows/render-video
npx skills add BintzGavin/helios/skills/workflows/visualize-data
npx skills add BintzGavin/helios/skills/workflows/archive-broll

# Design / motion
npx skills add BintzGavin/helios/skills/design/animated-video-philosophy
npx skills add BintzGavin/helios/skills/design/cinematic-product-promo-plan
npx skills add BintzGavin/helios/skills/design/motion-styles

# Guided video creation
npx skills add BintzGavin/helios/skills/guided/motion-design-rules
npx skills add BintzGavin/helios/skills/guided/brand-video
npx skills add BintzGavin/helios/skills/guided/cartoon-short
npx skills add BintzGavin/helios/skills/guided/music-video
npx skills add BintzGavin/helios/skills/guided/video-recipes

# Framework examples
npx skills add BintzGavin/helios/skills/examples/react
npx skills add BintzGavin/helios/skills/examples/vue
npx skills add BintzGavin/helios/skills/examples/svelte

# Animation libraries
npx skills add BintzGavin/helios/skills/examples/gsap
npx skills add BintzGavin/helios/skills/examples/framer-motion
npx skills add BintzGavin/helios/skills/examples/threejs
```

## Available Skills

### Make a Video

- **plugins/helios/skills/make-video** - The entry point, kept with the Helios agent plugin in `plugins/helios/` (one level up from this catalog). One HTML page with `window.renderAt(t)`, rendered to MP4 with `npx @helios-project/cli render`, checked with stills and contact sheets, with a soundtrack. Start here when asked for a video drawn with code.

### Getting Started

- **skills/getting-started** - Installation and quick start guide. Covers package installation, requirements (Node.js, FFmpeg), basic setup, and initial composition structure. Use when setting up a new Helios project.

### Core Package Skills

- **skills/core** - Core API for Helios video engine. Covers Helios class instantiation, signals, animation helpers, and DOM synchronization.
- **skills/renderer** - Server-side rendering of Helios compositions to video files.
- **skills/player** - Embeddable video player with composition playback and controls.
- **skills/studio** - Visual editor for Helios compositions.

### Workflow Skills

- **skills/workflows/create-composition** - Workflow for creating a new Helios composition.
- **skills/workflows/render-video** - Workflow for rendering compositions to video.
- **skills/workflows/visualize-data** - Workflow for data visualization animations.
- **skills/workflows/archive-broll** - Find, preview, cut and credit public-domain and Creative Commons B-roll from the Internet Archive.

### Design Skills

- **skills/design/animated-video-philosophy** - Working philosophy for animated video: story-first motion, pacing, shots, timing, composition, medium-specific grammar, technical commitments, and anti-patterns. Use when directing or critiquing motion and programmatic video.
- **skills/design/cinematic-product-promo-plan** - Template plan for a ~45s feeling-first cinematic product promo: brief through ship, hero-element journey, look/motion/audio, deliverables matrix, accessibility. Adapt to any product category.
- **skills/design/motion-styles** - Opt-in library of established visual styles, each a style card with colour rules, motion grammar and a checkable signature list, plus a tested `renderAt(t)` demo. Load only when the user names a specific style or asks for style options; otherwise design an original look.

### Guided Video Creation Skills

- **skills/guided/motion-design-rules** - Motion design framework that holds in any style: anti-slideshow architecture, depth, one easing personality, choreography, transitions, timing to sound, and scripted checks. Style cards override it. Referenced by all guided video skills.
- **skills/guided/brand-video** - Promo, explainer, product demo, testimonial, launch and vertical social videos in one guided pipeline. Locks the format, randomizes the staging and designs an original look from a seed so videos don't repeat; known styles only on request. Optional beat-synced music and Internet Archive B-roll.
- **skills/guided/cartoon-short** - Hand-drawn cartoon short: a character rig you design, acted emotion changes, boiling ink-and-paint linework, storyboarding by reads. Includes a tested starter page.
- **skills/guided/music-video** - Lyric and karaoke music video: word timings by forced alignment, treatment and section storyboard, a timeline derived from lyrics and beats, karaoke recipes. Includes a tested karaoke page.
- **skills/guided/video-recipes** - Opt-in genre recipes with tested demos (scale dive, process explainer, era timeline, mechanism/proof, kinetic type, UI morph loop, pixel sprite), plus the video brief template and a gotcha list. Load only when the request is one of these genres.

### Framework Integration Skills

- **skills/examples/react** - React integration patterns
- **skills/examples/vue** - Vue integration patterns
- **skills/examples/svelte** - Svelte integration patterns
- **skills/examples/solid** - Solid.js integration patterns
- **skills/examples/vanilla** - Vanilla JavaScript patterns

### Animation Library Skills

- **skills/examples/gsap** - GSAP animation integration
- **skills/examples/framer-motion** - Framer Motion integration
- **skills/examples/lottie** - Lottie animation playback
- **skills/examples/threejs** - Three.js 3D scenes
- **skills/examples/pixi** - PixiJS 2D graphics
- **skills/examples/p5** - p5.js creative coding

### Data Visualization Skills

- **skills/examples/d3** - D3.js visualizations
- **skills/examples/chartjs** - Chart.js animated charts

### Rendering Technique Skills

- **skills/examples/canvas** - Canvas 2D rendering
- **skills/examples/signals** - Reactive signals patterns
- **skills/examples/tailwind** - Tailwind CSS styling
- **skills/examples/podcast-visualizer** - Audio visualization

## When to Use

Use these skills when:

- Creating programmatic video compositions
- Working with browser-native animations (CSS, WAAPI)
- Building video rendering pipelines
- Integrating Helios with React, Vue, Svelte, or other frameworks
- Using animation libraries like GSAP, Framer Motion, or Three.js
- Creating data visualizations as video
- Setting up Helios development workflows
- Applying a consistent philosophy to motion, pacing, and visual storytelling in video
- Planning or producing feeling-first cinematic product promos (see design/cinematic-product-promo-plan)

## Repository

View all skills at https://github.com/BintzGavin/helios/tree/main/skills and the plugin at https://github.com/BintzGavin/helios/tree/main/plugins/helios