| 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, 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:
npx skills add BintzGavin/helios-skills/skills/getting-started
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
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
npx skills add BintzGavin/helios-skills/skills/design/animated-video-philosophy
npx skills add BintzGavin/helios-skills/skills/design/cinematic-product-promo-plan
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
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
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.
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.
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
- 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 and source code at: https://github.com/BintzGavin/helios-skills
