Communitygithub.com

Remocn/remocn

向 Remotion 项目添加一个 remocn 组件并演示其用法:读取文档页面、运行 shadcn add,然后以正确的时长将其放入 Sequence 中。当用户指定要添加的 remocn 组件,或要求某个动画、过渡、背景或 UI 原语而非完整视频时使用。

remocn 是什么?

该技能用于向 Remotion 项目添加单个 remocn 组件。它首先解析组件名称(若用户提供描述则从组件索引中匹配最佳候选),然后读取该组件的 Markdown 文档以获取 props、示例、时长和避免使用说明。之后自动配置项目(必要时运行 setup 脚本),通过 `npx shadcn add` 安装组件,最后展示一个适配到画布的用法代码片段,并放置在适当的 `<Sequence>` 或 `TransitionSeries` 内。完成后会进行类型检查和截图验证。技能支持 Claude Code、Cursor 等 AI 代理平台,主要面向需要快速添加预构建动画或 UI 元素的 Remotion 开发者,省去手动查阅文档和配置的麻烦。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Remocn/remocn/tree/HEAD/plugins/remocn/skills/add

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

添加一个 remocn 组件

请求内容:$ARGUMENTS

请先加载 remocn 技能以了解层级约定、画布和时序。

  1. 解析名称。 如果请求是准确的组件名称,直接使用。如果是描述性语言(如“一个故障风格标题”、“一个快速切换”),则从 https://remocn.dev/llms-components.txt 中筛选候选,并给出最佳的两到三个选项,每个带 Use for 行和时长。等待用户选择。
  2. 读取其页面。 抓取索引中给出的 .md 文档 URL。记录 props、示例、Length 以及任何 Avoid for 备注。如果避免备注与用户需求匹配,则指出并建议它命名的替代组件。
  3. 一次性准备项目。 如果 components.json 中没有 @remocn 注册表,先运行 node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <项目根目录>(在 Claude Code 之外:从本技能文件夹运行 ../video/scripts/setup.mjs)。其 JSON 结果说明写入了哪些文件;传递任何 warning。
  4. 安装。 npx shadcn add @remocn/<名称>。依赖项会传递安装;列出哪些文件被放置。
  5. 使用它。 显示一个基于文档示例的用法代码片段,适配画布大小,放在一个 <Sequence durationInFrames> 内,时长至少为其 Length 加上保持时间。过渡放入 TransitionSeries.Transition 中作为 presentation,并使用 linearTiming/springTiming 设置其 Length。如果用户在代码中命名了位置,放在那里;否则询问放置位置。
  6. 检查。 npx tsc --noEmit,然后在动画结束时生成静态帧(npx remotion still <composition> out/<名称>.png --frame=<n>)并查看。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能