用途
该技能面向 Helios 动画项目的创建流程。Helios 合成是一个网页（HTML/JS），通过 @helios-project/core 库驱动动画。同一页面既可以在浏览器中直接查看，也可以嵌入 Player，或由 Renderer 渲染为视频。技能适用于两种情况：从零构建新的动画项目，以及把已有动画转换到 Helios 中运行。
主要能力
- 提供合成页面的基础 HTML 结构（全屏 canvas、引入入口脚本）。
- 指导初始化 Helios 引擎，配置宽高（示例为 1920×1080）、帧率（示例 30 fps）、时长（示例 10 秒）、输入 schema 与初始属性。
- 支持可选的输入 schema 定义，声明 title、color 等属性及其默认值。
- 通过 subscribe 订阅状态变化，在每帧回调中根据 currentFrame 与 inputProps 执行绘制。
- 支持 autoSyncAnimations 选项：启用后 Helios 会劫持文档时间线，将 CSS 动画与 Web Animations API（WAAPI）动画同步到当前帧，便于拖动时间轴时保持同步。
- 给出 React、Vue、Svelte 的封装指引（示例见 examples/react/SKILL.md、examples/vue/SKILL.md、examples/svelte/SKILL.md）。
使用方式
- 创建 composition.html 作为入口，包含 canvas 元素并以 module 方式引入 ./src/main.ts。
- 在脚本中从 @helios-project/core 导入 Helios，用 new Helios({...}) 创建实例，传入 duration、fps、width、height、schema、inputProps、autoSyncAnimations。
- 调用 helios.bindToDocumentTimeline() 绑定文档时间线（文档强调这对 Renderer/Player 至关重要）。
- 设置 window.helios = helios，暴露实例以便被检测。
- 定义 draw(frame, props) 渲染函数，按帧号计算时间与进度并绘制内容。
- 使用 helios.subscribe 订阅状态变化触发重绘，并在初始化时调用一次 getState() 完成首帧绘制。
检查清单包括：实例已创建、时间线已绑定、实例已挂载到 window、已订阅状态、Canvas/DOM 元素尺寸正确（通常为 100vw/100vh 或固定分辨率）。
适用场景
- 新建基于 canvas 的网页动画项目，并计划渲染为视频。
- 需要参数化输入（如标题、颜色）并在 Player 中预览的动画。
- 带 CSS 或 WAAPI 动画、需要逐帧同步的项目。
- 在 React、Vue、Svelte 项目中封装 Helios 动画逻辑。
限制
文档未说明该技能的安装方式、依赖版本要求、浏览器兼容性、渲染输出格式与性能限制，这些信息暂未提供。示例代码使用 TypeScript 语法，需在支持相应构建流程的环境中使用。