mcpField
H
helios-skills

helios-skills

github.com/bintzgavinCreative & media0101 installsUpdated 3w ago
Repository

About helios-skills

helios-skills is a collection of agent skills for Helios, a browser-native video engine for programmatic animation and rendering. It covers setup, composition workflows, rendering, design guidance, and integrations with frameworks and animation libraries.

Key features

  1. 01Helios setup and core API guidance
  2. 02Composition and rendering workflows
  3. 03Player and studio guidance
  4. 04Guided video creation formats
  5. 05Framework and animation integrations
  6. 06Data visualization and rendering techniques

Use cases

  1. 01Setting up a Helios project
  2. 02Creating and rendering a video composition
  3. 03Building framework-based Helios integrations
  4. 04Planning animated promos or explainers

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/bintzgavin/helios-skills --skill helios-skills

After installing, type/helios-skillsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

LICENSE
README.md
package.json
.gitignore
.agents/plugins/
marketplace.json
.claude-plugin/
marketplace.json
plugins/helios/
.mcp.json
mcp.json
plugin.json
plugins/helios/.claude-plugin/
plugin.json
plugins/helios/.codex-plugin/
plugin.json
plugins/helios/skills/make-video/references/
music.md
pages.md
skills/design/animated-video-philosophy/
philosophy.md
skills/design/cinematic-product-promo-plan/
production-plan.md

Details

From the project README

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:

# 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

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

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

Comments

Markdown supported