helios-skills

Category: Tools & Productivity | Uploader: BintzGavin | Downloads: 0 | Version: v1.0（Latest）

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.

Changelog: Source: GitHub https://github.com/BintzGavin/helios

Directory Structure

Current level: tree/main/.agents/skills/helios-skills/

📁 skills/
- 📁 core/
  - 📄 SKILL.md 11.9 KB
- 📁 examples/
  - 📁 canvas/
    
    📄 SKILL.md 1.7 KB
  - 📁 chartjs/
    
    📄 SKILL.md 1.5 KB
  - 📁 d3/
    
    📄 SKILL.md 1.7 KB
  - 📁 framer-motion/
    
    📄 SKILL.md 2.1 KB
  - 📁 gsap/
    
    📄 SKILL.md 1.9 KB
  - 📁 lottie/
    
    📄 SKILL.md 1.5 KB
  - 📁 p5/
    
    📄 SKILL.md 1.8 KB
  - 📁 pixi/
    
    📄 SKILL.md 1.8 KB
  - 📁 podcast-visualizer/
    
    📄 SKILL.md 3.0 KB
  - 📁 react/
    
    📄 SKILL.md 2.4 KB
  - 📁 signals/
    
    📄 SKILL.md 1.6 KB
  - 📁 solid/
    
    📄 SKILL.md 4.0 KB
  - 📁 svelte/
    
    📄 SKILL.md 5.0 KB
  - 📁 tailwind/
    
    📄 SKILL.md 1.5 KB
  - 📁 threejs/
    
    📄 SKILL.md 3.7 KB
  - 📁 vanilla/
    
    📄 SKILL.md 2.1 KB
  - 📁 vue/
    
    📄 SKILL.md 2.8 KB
- 📁 getting-started/
  - 📄 SKILL.md 7.0 KB
- 📁 guided/
  - 📁 explainer-video/
    
    📄 SKILL.md 6.6 KB
  - 📁 launch-announcement/
    
    📄 SKILL.md 7.1 KB
  - 📁 motion-design-rules/
    
    📄 SKILL.md 5.2 KB
  - 📁 product-demo/
    
    📄 SKILL.md 7.0 KB
  - 📁 promo-video/
    
    📄 SKILL.md 5.3 KB
  - 📁 social-clip/
    
    📄 SKILL.md 7.2 KB
  - 📁 testimonial-video/
    
    📄 SKILL.md 6.9 KB
- 📁 player/
  - 📄 SKILL.md 7.1 KB
- 📁 renderer/
  - 📄 SKILL.md 7.0 KB
- 📁 studio/
  - 📄 SKILL.md 3.4 KB
- 📁 workflows/
  - 📁 create-composition/
    
    📄 SKILL.md 3.4 KB
  - 📁 render-video/
    
    📄 SKILL.md 3.1 KB
  - 📁 visualize-data/
    
    📄 SKILL.md 1.8 KB
📄 .gitignore 208 B
📄 LICENSE 11.1 KB
📄 package.json 793 B
📄 README.md 4.6 KB
📄 SKILL.md 5.4 KB

SKILL.md

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

Comments 0

Latest | Hot

Please login before commenting.

Loading comments...

helios-skills

Directory Structure

SKILL.md

Report

Notice