helios-skills
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.
About this skill
This entry offers a comprehensive collection of AI agent skills specifically designed for the Helios video engine, a powerful browser-native platform for programmatic animation and rendering. Agents can leverage these skills to automate complex video production tasks, from generating dynamic animations to crafting full video compositions. The modular nature allows for installing specific capabilities tailored to immediate needs. The skills cover a broad spectrum of functionalities. Core skills manage the Helios renderer, player, and studio environments, while workflow skills enable agents to create compositions, render videos, or visualize data programmatically. Additionally, it includes guided video creation skills for producing specific content types like promotional videos, explainer videos, product demos, and testimonials. Ideal for developers, content creators, and marketing professionals, these skills empower AI agents to dramatically accelerate and scale video content generation. By integrating with Helios, agents can produce high-quality, browser-native video assets efficiently, making it invaluable for automated content pipelines or dynamic web experiences.
Best use case
The primary use case is the automated, programmatic creation and manipulation of video content and animations using an AI agent within the Helios ecosystem. This benefits developers building dynamic web applications, marketing teams needing to rapidly generate video assets, and content creators aiming to scale their video production through AI-driven workflows.
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.
Users should expect a programmatically generated video, animation, or Helios composition file, or a successful update/operation within the Helios environment, driven by their AI agent.
Practical example
Example input
Agent, using the `helios-skills/workflows/create-composition` skill, generate a basic 10-second video composition. It should feature a bouncing text animation of 'Hello Helios' on a simple gradient background, set to a 16:9 aspect ratio.
Example output
Successfully created a Helios composition file named 'hello_helios_composition.json' in the specified output directory. This composition features 'Hello Helios' with a bouncing text animation against a gradient background, ready for rendering.
When to use this skill
- When an AI agent needs to programmatically create or edit video content.
- For automating browser-native animations or Helios video compositions.
- To scale video production for marketing, social media, or web applications.
- When integrating dynamic, AI-generated video into web frameworks like React or Vue.
When not to use this skill
- If the task does not involve video, animation, or the Helios engine.
- When manual, desktop-based video editing is preferred.
- For tasks requiring offline rendering of non-browser-native video formats.
- If your agent cannot execute external CLI commands (e.g., `npx`).
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/helios-skills/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How helios-skills Compares
| Feature / Agent | helios-skills | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
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.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
AI Agent for Product Research
Browse AI agent skills for product research, competitive analysis, customer discovery, and structured product decision support.
AI Agent for SaaS Idea Validation
Use AI agent skills for SaaS idea validation, market research, customer discovery, competitor analysis, and documenting startup hypotheses.
SKILL.md Source
# 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
Related Skills
web-skills-protocol
Auto-discover and use Web Skills Protocol (WSP) skills when interacting with websites. Use this skill whenever the user asks you to interact with, use, or perform actions on a website or web service — such as searching a site, placing an order, deploying an app, or calling a web API. Before scraping HTML or guessing at interfaces, check if the site publishes a skills.txt or agents.txt file that teaches you how to use it properly. If a website has complex elements (e.g., heavy JavaScript, interactive UIs), activating this skill can also help you understand the site's purpose and capabilities. Do NOT use for local file operations or non-web tasks.
agent-autonomy-kit
Stop waiting for prompts. Keep working.
Meeting Prep
Never walk into a meeting unprepared again. Your agent researches all attendees before calendar events—pulling LinkedIn profiles, recent company news, mutual connections, and conversation starters. Generates a briefing doc with talking points, icebreakers, and context so you show up informed and confident. Triggered automatically before meetings or on-demand. Configure research depth, advance timing, and output format. Walking into meetings blind is amateur hour—missed connections, generic small talk, zero leverage. Use when setting up meeting intelligence, researching specific attendees, generating pre-meeting briefs, or automating your prep workflow.
obsidian
Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli. And also 50+ models for image generation, video generation, text-to-speech, speech-to-text, music, chat, web search, document parsing, email, and SMS.
Obsidian CLI 探索记录
Skill for the official Obsidian CLI (v1.12+). Complete vault automation including files, daily notes, search, tasks, tags, properties, links, bookmarks, bases, templates, themes, plugins, sync, publish, workspaces, and developer tools.
📝 智能摘要助手 (Smart Summarizer)
Instantly summarize any content — articles, PDFs, YouTube videos, web pages, long documents, or pasted text. Extracts key points, action items, and insights. Use when you need to quickly digest long content, create meeting notes, or extract takeaways from any source.
Customer Onboarding
Systematically onboard new clients with checklists, welcome sequences, milestone tracking, and success metrics. Reduce churn by nailing the first 90 days.
CRM Manager
Manages a local CSV-based CRM with pipeline tracking
Invoice Generator
Creates professional invoices in markdown and HTML
Productivity Operating System
You are a personal productivity architect. Your job: help the user design, execute, and optimize their daily system so they consistently ship high-impact work while protecting energy and avoiding burnout.
Product Launch Playbook
You are a Product Launch Strategist. You guide users through planning, executing, and optimizing product launches — from pre-launch validation through post-launch growth. This system works for SaaS, physical products, services, marketplaces, and content products.
Procurement Manager
You are a procurement specialist agent. Help teams evaluate vendors, manage purchase orders, negotiate contracts, and optimize spend.