mcpField
P
publish-element

publish-element

github.com/remotion-dev开发68.6k129 次安装今天更新
代码仓库

关于 publish-element

用于发布已完成脚手架搭建的 Remotion Element 的技术工作流技能，涵盖就绪检查、图库登记、测试、预览渲染和审核关卡。

主要功能

  1. 01检查 Element 就绪情况与指南
  2. 02审核元数据和预览设置
  3. 03将 Element 登记到图库路由
  4. 04运行格式化和 Element 测试
  5. 05渲染预览以供审核
  6. 06要求明确的视觉审批

适用场景

  1. 01发布已完成的 Remotion Element
  2. 02将 Element 加入图库
  3. 03准备预览以进行视觉审核

安装

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

$npx skills add https://github.com/remotion-dev/remotion --skill publish-element

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

详细介绍

发布 Remotion 元素

设计与质量标准的权威来源是 Element 指南。进行任何更改前，请完整阅读。如果此技能与指南中的验收标准不一致，请以指南为准。

此技能负责技术发布流程。流程从 scaffold-element 技能创建的元素脚手架开始，不负责创建初始开发脚手架。

1. 确认元素已准备就绪

确认以下文件及 packages/docs/src/components/Elements/element-definitions.ts 中的对应条目均已存在：

  • packages/docs/elements/<category>/<slug>/index.mdx
  • packages/docs/elements/<category>/<slug>/<slug>.tsx

不要通过此技能启动 Studio。继续之前，必须要求开发者明确确认：他们已在文档 Remotion Studio 中目视检查 element-<category>-<slug>，并确认其效果正确。不要根据测试已完成或 Agent 自行检查推断已获批准。如果开发者尚未批准，或仍需进行视觉开发，请提供以下命令并停止发布流程：

bun run build
cd packages/docs
bun run remotion

2. 执行发布审核

根据 Element 指南以及 scaffold-element 技能中的技术要求，审核已完成的源文件、MDX 页面和中央定义。处理占位内容，并最终确定描述、显示名称、贡献者、尺寸、时长、installationMode、声明的依赖项、预览内边距、海报帧和 preview 对象。

确认 posterUrl 和 videoUrl 使用扁平路径 https://remotion.media/elements/<category>-<slug>-preview.png 和 .mp4。预览素材会合成到标准背景上，并使用 MP4，以确保广泛兼容浏览器、社交卡片和嵌入场景，即使元素本身支持透明度也不例外。这些明确指定的 URL 是发布时的唯一信息来源。

如果元素包含可在 Studio 中编辑的控件，也请使用交互最佳实践技能进行审核。

如果元素导入了 packages/docs 中不可用的包，请将其添加到 packages/docs/package.json，运行 bun install，并包含 bun.lock。

3. 将其添加到图库

  • 确认 packages/docs/src/components/Elements/element-definitions.ts 中的条目会将元素放入生成的总览和分类库中。
  • 将 '<category>/<slug>/index' 添加到 packages/docs/elements-sidebars.ts 中对应的分类。

保留侧边栏现有的排序方式。不要向分类索引手动添加链接：可视图库和原始 Markdown 库均由中央定义生成。如果任务明确新增了分类，请创建一个渲染经过筛选的 ElementLibrary 的索引，并在此步骤中添加该分类的侧边栏分组。

在确认图库注册完成前，请验证元素已显示在总览页面、对应分类页面以及生成的原始 Markdown 路由中。

不要编辑 packages/docs/src/remotion/Root.tsx；元素合成由中央定义生成。

4. 格式化并测试

仅格式化有更改的 TypeScript 和 TSX 文件。对于常见文件：

bunx oxfmt \
  packages/docs/elements/<category>/<slug>/<slug>.tsx \
  packages/docs/src/components/Elements/element-definitions.ts \
  packages/docs/elements-sidebars.ts \
  --write

cd packages/docs
bun test src/test/elements.test.ts

5. 渲染并检查预览

按照 Element 指南的要求验证预览。仅渲染新 Element，并使用 element-definitions.ts 中的 posterFrame：

cd packages/docs
mkdir -p .element-previews/<category>/<slug>
bunx remotion still \
  src/remotion/entry.ts \
  element-<category>-<slug> \
  .element-previews/<category>/<slug>/preview.png \
  --frame=<poster-frame> --gl=angle --overwrite
bunx remotion render \
  src/remotion/entry.ts \
  element-<category>-<slug> \
  .element-previews/<category>/<slug>/preview.mp4 \
  --codec=h264 --crf=23 --image-format=png --pixel-format=yuv420p \
  --gl=angle --muted --overwrite
cd ../..

不要在没有 Element 筛选条件的情况下运行 render-element-previews，因为这会渲染所有 Element 并清除全部预览输出。若之后明确要求上传，请使用：

cd packages/docs
bun run render-element-previews --element=<category>/<slug> --upload
cd ../..

筛选后的命令只会清除并重新生成该 Element 的嵌套本地审核输出，然后使用其显式元数据 URL 作为公开位置和 R2 密钥。

检查 packages/docs/.element-previews/<category>/<slug>/preview.png 和 preview.mp4，然后将这两个路径提供给开发者进行视觉审核。停止并等待开发者明确确认两个预览都正确。在获得批准之前，不要运行最终仓库检查或完成发布工作流。

除非明确要求上传且有维护者的 R2 凭据，否则不要提交被忽略的输出，也不要上传预览。

6. 运行最终仓库检查

bun run build
bun run stylecheck
git diff --check
git status --short

完成之前，请确认页面已列入生成的总览和分类库、生成的原始 Markdown 以及侧边栏；所有检查均已通过；且变更仅包含预期文件。报告运行的命令、结果以及检查过的预览文件。

评论

支持 Markdown