SuperAPI AI 工具集

new-element

前端与建站

查看项目

更新于 10-16 07:58

技能介绍

用途:为 Remotion 文档仓库创建一个新的 Remotion Element 开发脚手架,并配置好可在 Remotion Studio 中预览的 composition。以 Element 贡献者指南为唯一事实来源,本技能与指南冲突时以指南为准;本技能仅准备开发脚手架,Element 准备好进入画廊时应使用 publish-element 技能。

主要流程:1) 规划预览,选择已有分类和 kebab-case slug,确定 composition 的宽高、fps、时长,Element 固定宽高或两者为 null,预览内边距和临时海报帧,先查看 packages/docs/elements-template/ 以及同分类的至少一个已有 Element,除非任务明确要求否则不要新建分类。2) 从仓库根目录复制模板并重命名文件: cp -R packages/docs/elements-template packages/docs/elements/<category>/<slug> mv packages/docs/elements/<category>/<slug>/element.tsx packages/docs/elements/<category>/<slug>/<slug>.tsx 并调整 index.mdx,导入 elementDefinitions、使用 '<category>/<slug>' 条目、设置 sourceFile="./<slug>.tsx"。

  1. 在 packages/docs/src/components/Elements/element-definitions.ts 中导入并注册组件,不要编辑 packages/docs/src/remotion/Root.tsx。若组件依赖 packages/docs 中不存在的包,需加入 packages/docs/package.json,运行 bun install 并包含 bun.lock。

  2. 检查脚手架,格式化改动文件并运行聚焦测试: bunx oxfmt packages/docs/elements/<category>/<slug>/<slug>.tsx packages/docs/src/components/Elements/element-definitions.ts --write cd packages/docs && bun test src/test/elements.test.ts && cd ../..

  3. 交接开发:本技能不启动 Studio,告知开发者运行 bun run build,然后进入 packages/docs 运行 bun run remotion,打开 elements 文件夹选择 element-<category>-<slug> 开始开发,并报告创建的文件、composition ID、聚焦测试结果,以及下一步为 publish-element 技能。

限制:本技能不添加分类索引或侧边栏条目,不渲染最终预览资源;其他未在资料中说明的细节暂未提供。