helios-skills

# Helios Skills Collection

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

## Installation

This is a **collection repository** containing multiple skills. To use these skills, install individual skills by their path:

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

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

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

# Guided video creation
npx skills add BintzGavin/helios-skills/skills/guided/motion-design-rules
npx skills add BintzGavin/helios-skills/skills/guided/promo-video
npx skills add BintzGavin/helios-skills/skills/guided/explainer-video
npx skills add BintzGavin/helios-skills/skills/guided/product-demo
npx skills add BintzGavin/helios-skills/skills/guided/testimonial-video
npx skills add BintzGavin/helios-skills/skills/guided/launch-announcement
npx skills add BintzGavin/helios-skills/skills/guided/social-clip

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

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

## Available Skills

### 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.

### Guided Video Creation Skills

- **skills/guided/motion-design-rules** - Motion design framework: anti-slideshow architecture, visual layering, physics-based easing, choreography, and quality validation. Referenced by all guided video skills.
- **skills/guided/promo-video** - End-to-end promotional / hype video. High energy, beat-synced, CTA-driven.
- **skills/guided/explainer-video** - Explainer / walkthrough video. Narrative arc, section headers, measured pacing.
- **skills/guided/product-demo** - Product demo / showcase. Feature callouts, UI zoom-ins, progressive reveals.
- **skills/guided/testimonial-video** - Social proof / testimonial video. Quote typography, customer branding, trust signals.
- **skills/guided/launch-announcement** - Product launch / release announcement. Countdown motifs, dramatic reveal.
- **skills/guided/social-clip** - Short-form social clip (Reels/TikTok/Shorts). Vertical 9:16, punchy, loop-friendly.

### 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

## Repository

View all skills and source code at: https://github.com/BintzGavin/helios-skills