helios-skills — 程序化视频创建 helios-skills, helios, community, 程序化视频创建, ide skills, Web技术, CSS动画, Svelte, helios-skills AI agent skill, helios-skills for Claude Code, Claude Code

v1.0.0
GitHub

关于此技能

非常适合需要使用 Web 技术（如 CSS 动画和 Helios 视频引擎）进行高级程序化动画和渲染的视频创建代理。 Helios Skills是一个程序化视频创建工具，使用Web技术和CSS动画

功能特性

程序化视频创建
Web技术集成
CSS动画支持
多种技能和工作流程
React、Vue和Svelte框架示例

# 核心主题

程序化视频创建 Web技术 CSS动画 Svelte helios-skills AI agent skill helios-skills for Claude Code
BintzGavin BintzGavin
[45]
[3]
更新于: 3/29/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 10/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution Quality floor passed for review
Review Score
10/11
Quality Score
53
Canonical Locale
en
Detected Body Locale
en

非常适合需要使用 Web 技术（如 CSS 动画和 Helios 视频引擎）进行高级程序化动画和渲染的视频创建代理。 Helios Skills是一个程序化视频创建工具，使用Web技术和CSS动画

核心价值

赋予代理创建复杂视频组合的能力，利用 Helios 技能，包括核心 API、服务器端渲染和视觉编辑，同时利用 Web 技术，如 CSS 动画、React、Vue 和 Svelte，以及 GSAP、Framer Motion 和 Three.js 等库。

适用 Agent 类型

非常适合需要使用 Web 技术（如 CSS 动画和 Helios 视频引擎）进行高级程序化动画和渲染的视频创建代理。

↓ 赋予的主要能力 · helios-skills

使用 Helios 技能自动化视频创建工作流程
使用引导式视频创建技能生成动态设计规则和促销视频
使用 Helios 渲染器和播放器技能调试和优化视频渲染
使用 Helios 工作流程和技能创建数据可视化动画
使用 Helios 工作室技能构建自定义视频编辑器

! 使用限制与门槛

  • 需要 Node.js 和 FFmpeg 安装
  • 仅限于浏览器原生视频引擎功能
  • 依赖于特定的 Helios 技能和工作流程来实现功能

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.

Source Boundary

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

实验室 Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

常见问题与安装步骤

以下问题与步骤与页面结构化数据保持一致，便于搜索引擎理解页面内容。

? FAQ

helios-skills 是什么？

非常适合需要使用 Web 技术（如 CSS 动画和 Helios 视频引擎）进行高级程序化动画和渲染的视频创建代理。 Helios Skills是一个程序化视频创建工具，使用Web技术和CSS动画

如何安装 helios-skills？

运行命令：npx killer-skills add BintzGavin/helios/helios-skills。支持 Cursor、Windsurf、VS Code、Claude Code 等 19+ IDE/Agent。

helios-skills 适用于哪些场景？

典型场景包括：使用 Helios 技能自动化视频创建工作流程、使用引导式视频创建技能生成动态设计规则和促销视频、使用 Helios 渲染器和播放器技能调试和优化视频渲染、使用 Helios 工作流程和技能创建数据可视化动画、使用 Helios 工作室技能构建自定义视频编辑器。

helios-skills 支持哪些 IDE 或 Agent？

该技能兼容 Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer。可使用 Killer-Skills CLI 一条命令通用安装。

helios-skills 有哪些限制？

需要 Node.js 和 FFmpeg 安装；仅限于浏览器原生视频引擎功能；依赖于特定的 Helios 技能和工作流程来实现功能。

↓ 安装步骤

  1. 1. 打开终端

    在你的项目目录中打开终端或命令行。

  2. 2. 执行安装命令

    运行：npx killer-skills add BintzGavin/helios/helios-skills。CLI 会自动识别 IDE 或 AI Agent 并完成配置。

  3. 3. 开始使用技能

    helios-skills 已启用，可立即在当前项目中调用。

! 参考页模式

此页面仍可作为安装与查阅参考，但 Killer-Skills 不再把它视为主要可索引落地页。请优先阅读上方评审结论，再决定是否继续查看上游仓库说明。

Imported Repository Instructions

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Supporting Evidence

helios-skills

Helios Skills是一个程序化视频创建工具，使用Web技术和CSS动画

SKILL.md
Readonly
Imported Repository Instructions
The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.
Supporting Evidence

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:

bash
1# Getting started
2npx skills add BintzGavin/helios-skills/skills/getting-started
3
4# Core skills
5npx skills add BintzGavin/helios-skills/skills/core
6npx skills add BintzGavin/helios-skills/skills/renderer
7npx skills add BintzGavin/helios-skills/skills/player
8npx skills add BintzGavin/helios-skills/skills/studio
9
10# Workflows
11npx skills add BintzGavin/helios-skills/skills/workflows/create-composition
12npx skills add BintzGavin/helios-skills/skills/workflows/render-video
13npx skills add BintzGavin/helios-skills/skills/workflows/visualize-data
14
15# Guided video creation
16npx skills add BintzGavin/helios-skills/skills/guided/motion-design-rules
17npx skills add BintzGavin/helios-skills/skills/guided/promo-video
18npx skills add BintzGavin/helios-skills/skills/guided/explainer-video
19npx skills add BintzGavin/helios-skills/skills/guided/product-demo
20npx skills add BintzGavin/helios-skills/skills/guided/testimonial-video
21npx skills add BintzGavin/helios-skills/skills/guided/launch-announcement
22npx skills add BintzGavin/helios-skills/skills/guided/social-clip
23
24# Framework examples
25npx skills add BintzGavin/helios-skills/skills/examples/react
26npx skills add BintzGavin/helios-skills/skills/examples/vue
27npx skills add BintzGavin/helios-skills/skills/examples/svelte
28
29# Animation libraries
30npx skills add BintzGavin/helios-skills/skills/examples/gsap
31npx skills add BintzGavin/helios-skills/skills/examples/framer-motion
32npx 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

相关技能

寻找 helios-skills 的替代方案 (Alternative) 或可搭配使用的同类 community Skill？探索以下相关开源技能。

查看全部

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

★ 333.8k
⑂ 0
AI

widget-generator

Logo of f
f

为prompts.chat的信息反馈系统生成可定制的插件小部件

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

React 框架

★ 138.4k
⑂ 0
浏览器

pr-review

Logo of pytorch
pytorch

Python中具有强大GPU加速的张量和动态神经网络

★ 98.6k
⑂ 0
开发者工具