add

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add one remocn component

添加一个 remocn 组件

Requested: $ARGUMENTS

Load the

remocn

skill first for the tier conventions and Canvas & timing.

Resolve the name. If the request is an exact component name, use it. If it's a description ("a glitchy title", "a fast cut"), shortlist from
```
https://remocn.dev/llms-components.txt
```
and offer the best two or three, each with its
```
Use for
```
line and length. Wait for the pick.
Read its page. Fetch the
```
.md
```
docs URL the index gives for it. Note the props, the example,
```
Length
```
and any
```
Avoid for
```
note. If the avoid note matches what the user wants, say so and suggest the replacement it names.
Prepare the project once. If
```
components.json
```
has no
```
@remocn
```
registry, run
```
node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <project-root>
```
first (outside Claude Code:
```
../video/scripts/setup.mjs
```
from this skill's folder). Its JSON result says which files it wrote; relay any
```
warning
```
.
Install.
```
npx shadcn add @remocn/<name>
```
. Dependencies install transitively; list which files landed.
Use it. Show a usage snippet built from the docs example, sized to the canvas, inside a
```
<Sequence durationInFrames>
```
of at least its
```
Length
```
plus hold time. Transitions go into
```
TransitionSeries.Transition
```
as
```
presentation
```
with
```
linearTiming
```
/
```
springTiming
```
at their
```
Length
```
. If the user named a place in their code, put it there; otherwise ask where it goes.

Check.

npx tsc --noEmit

, then a still at the end of its motion (

npx remotion still <composition> out/<name>.png --frame=<n>

) and look at it.

请求的组件：$ARGUMENTS

首先加载

remocn

skill，以了解 tier 约定以及 Canvas 与时序。

解析名称。 如果请求中包含准确的组件名称，直接使用。如果请求中只有描述（“故障风标题”、“快速切换”），则从
```
https://remocn.dev/llms-components.txt
```
中筛选候选组件，并提供最合适的两个或三个选项，每个选项都附上其
```
Use for
```
说明和长度。等待用户选择。
阅读其页面。 获取索引提供的
```
.md
```
文档 URL。记录 props、示例、
```
Length
```
以及所有
```
Avoid for
```
注意事项。如果不适合用户的备注与用户需求相符，应明确说明，并建议其中指定的替代组件。
一次性准备项目。 如果
```
components.json
```
中没有
```
@remocn
```
registry，先运行
```
node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <project-root>
```
（在 Claude Code 之外运行时，从该 skill 所在目录执行
```
../video/scripts/setup.mjs
```
）。其 JSON 结果会说明写入的文件；如有任何
```
warning
```
，则进行转达。
安装。 运行
```
npx shadcn add @remocn/<name>
```
。依赖项会通过传递方式安装；列出新增的文件。
使用。 根据文档示例构建用法代码片段，调整其尺寸以适配画布，并将其放入
```
<Sequence durationInFrames>
```
中，时长至少为其
```
Length
```
加保持时间。转场应放入
```
TransitionSeries.Transition
```
中作为
```
presentation
```
，并按照其
```
Length
```
设置
```
linearTiming
```
/
```
springTiming
```
。如果用户指定了代码中的位置，则放在该位置；否则询问应放在哪里。
检查。 运行
```
npx tsc --noEmit
```
，然后在动画结束帧生成一张静态图片（
```
npx remotion still <composition> out/<name>.png --frame=<n>
```
）并检查效果。