mcpField
A
add

add

github.com/remocn创意与媒体1.7k176 次安装5 天前更新
代码仓库

关于 add

add 是一项用于向项目添加单个 remocn 组件的技能。它协助确定组件并查阅文档、配置注册表、安装组件、生成用法示例和检查结果。

主要功能

  1. 01确定指定组件或筛选候选项
  2. 02查阅组件属性、示例、时长和注意事项
  3. 03为项目配置 remocn 注册表
  4. 04使用 shadcn 安装组件
  5. 05编写用法示例并检查结果

适用场景

  1. 01向项目添加指定的 remocn 组件
  2. 02为描述的视觉效果选择组件
  3. 03检查 Remotion 项目中的组件实现

安装

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

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

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

详细介绍

添加一个 remocn 组件

请求：$ARGUMENTS

先加载 remocn 技能，了解分级约定以及 Canvas 和时长。

  1. 确定名称。 如果请求是确切的组件名称，就使用该名称。如果请求是描述（“一个故障风格的标题”“一个快速切镜”），就从 https://remocn.dev/llms-components.txt 中筛选，并提供最合适的两三个选项，以及每个选项的 Use for 行和时长。等待用户选择。
  2. 阅读组件页面。 获取索引中提供的 .md 文档 URL。记录 props、示例、Length 和任何 Avoid for 说明。如果用户的需求符合避用说明，就告知用户，并建议其中提到的替代组件。
  3. 配置项目一次。 如果 components.json 中没有 @remocn registry，先运行 node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <project-root>（在 Claude Code 外部：从此技能文件夹运行 ../video/scripts/setup.mjs）。其 JSON 结果会说明写入了哪些文件；转达其中的任何 warning。
  4. 安装。 npx shadcn add @remocn/<name>。依赖会随之安装；列出新增的文件。
  5. 使用组件。 根据文档示例提供一个用法代码片段，使其适配画布尺寸，并放在 <Sequence durationInFrames> 中，时长至少为组件的 Length 加上停留时间。转场应作为 presentation 放入 TransitionSeries.Transition，并使用 linearTiming/springTiming，时长设为其 Length。如果用户指定了代码中的位置，就放在那里；否则询问组件应放在哪里。
  6. 检查。 运行 npx tsc --noEmit，然后截取动画结束时的静帧（npx remotion still <composition> out/<name>.png --frame=<n>）并查看。

评论

支持 Markdown