mcpField
H
helios-skills

helios-skills

github.com/bintzgavin创意与媒体0101 次安装3 周前更新
代码仓库

关于 helios-skills

helios-skills 是面向 Helios 的 Agent 技能集合；Helios 是用于程序化动画与渲染的浏览器原生视频引擎。内容涵盖项目设置、合成工作流、渲染、设计指导，以及框架和动画库集成。

主要功能

  1. 01Helios 设置与核心 API 指引
  2. 02合成与渲染工作流
  3. 03播放器与 Studio 使用指引
  4. 04引导式视频创作类型
  5. 05框架与动画库集成
  6. 06数据可视化与渲染技术

适用场景

  1. 01设置 Helios 项目
  2. 02创建并渲染视频合成
  3. 03构建基于框架的 Helios 集成
  4. 04规划宣传片或讲解视频

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/helios-skills确认已加载。

包含的文件

除 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

详细介绍

Helios 技能集合

此仓库包含适用于 Helios 的 Agent 技能。Helios 是一款浏览器原生的视频引擎，可用于程序化动画和渲染。

安装

这是一个包含多项技能的集合仓库。如需使用这些技能，请按路径安装各项技能：

# 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

可用技能

入门
  • skills/getting-started - 安装和快速入门指南。涵盖软件包安装、要求（Node.js、FFmpeg）、基本设置和初始合成结构。适用于设置新的 Helios 项目。
核心软件包技能
  • skills/core - Helios 视频引擎的核心 API。涵盖 Helios 类实例化、信号、动画辅助工具和 DOM 同步。
  • skills/renderer - 将 Helios 合成渲染为视频文件的服务端渲染工具。
  • skills/player - 可嵌入的视频播放器，支持合成播放和控制。
  • skills/studio - Helios 合成的可视化编辑器。
工作流技能
  • skills/workflows/create-composition - 创建新的 Helios 合成的工作流。
  • skills/workflows/render-video - 将合成渲染为视频的工作流。
  • skills/workflows/visualize-data - 数据可视化动画的工作流。
设计技能
  • skills/design/animated-video-philosophy - 动画视频的创作理念：以故事为先的运动、节奏、镜头、时序、构图、媒介专属语法、技术要求和反模式。在指导或评审动态效果和程序化视频时使用。
  • skills/design/cinematic-product-promo-plan - 一份约 45 秒、注重情感体验的电影感产品宣传片计划模板：从简报到交付、核心元素的旅程、视觉风格／动态效果／音频、交付物矩阵和无障碍性。可适用于任何产品类别。
视频创作指导技能
  • skills/guided/motion-design-rules - 动态设计框架：反幻灯片式架构、视觉分层、基于物理的缓动、编排和质量验证。所有视频创作指导技能都会参考此框架。
  • skills/guided/promo-video - 端到端的宣传／炒作视频。高能量、节拍同步、以 CTA 为导向。
  • skills/guided/explainer-video - 讲解／演示视频。具有叙事弧线、章节标题和适度的节奏。
  • skills/guided/product-demo - 产品演示／展示。包含功能标注、UI 放大和渐进式展示。
  • skills/guided/testimonial-video - 社会认同／用户评价视频。包含引言排版、客户品牌元素和信任信号。
  • skills/guided/launch-announcement - 产品发布／版本公告。包含倒计时元素和戏剧性揭晓。
  • skills/guided/social-clip - 短篇社交媒体视频（Reels/TikTok/Shorts）。竖屏 9:16、节奏明快、适合循环播放。
框架集成技能
  • skills/examples/react - React 集成模式
  • skills/examples/vue - Vue 集成模式
  • skills/examples/svelte - Svelte 集成模式
  • skills/examples/solid - Solid.js 集成模式
  • skills/examples/vanilla - 原生 JavaScript 模式
动画库技能
  • skills/examples/gsap - GSAP 动画集成
  • skills/examples/framer-motion - Framer Motion 集成
  • skills/examples/lottie - Lottie 动画播放
  • skills/examples/threejs - Three.js 3D 场景
  • skills/examples/pixi - PixiJS 2D 图形
  • skills/examples/p5 - p5.js 创意编程
数据可视化技能
  • skills/examples/d3 - D3.js 可视化
  • skills/examples/chartjs - Chart.js 动画图表
渲染技术技能
  • skills/examples/canvas - Canvas 2D 渲染
  • skills/examples/signals - 响应式信号模式
  • skills/examples/tailwind - Tailwind CSS 样式
  • skills/examples/podcast-visualizer - 音频可视化

适用场景

在以下情况下使用这些技能：

  • 创建程序化视频合成
  • 使用浏览器原生动画（CSS、WAAPI）
  • 构建视频渲染流水线
  • 将 Helios 集成到 React、Vue、Svelte 或其他框架中
  • 使用 GSAP、Framer Motion 或 Three.js 等动画库
  • 将数据可视化制作为视频
  • 设置 Helios 开发工作流
  • 在视频中贯彻一致的运动、节奏和视觉叙事理念
  • 规划或制作以情感为先的电影感产品宣传片（参见 design/cinematic-product-promo-plan）

仓库

在此查看所有技能和源代码：https://github.com/BintzGavin/helios-skills

评论

支持 Markdown