mcpField
A
add

add

github.com/remocnクリエイティブ・メディア1.7k176 回インストール5 日前に更新
リポジトリ

add について

addは、プロジェクトにremocnコンポーネントを1つ追加するスキルです。コンポーネントの特定とドキュメント確認、レジストリの準備、インストール、使用例の作成、結果の確認を支援します。

主な機能

  1. 01指定名の特定または候補の絞り込み
  2. 02Props、例、長さ、注意点の確認
  3. 03remocnレジストリ用のプロジェクト準備
  4. 04shadcnによるコンポーネントのインストール
  5. 05使用例の作成と動作チェック

活用シーン

  1. 01指定したremocnコンポーネントの追加
  2. 02説明された視覚効果に合うコンポーネント選び
  3. 03Remotionプロジェクトでの実装確認

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/addを入力して読み込まれたか確認します。

詳細

remocn コンポーネントを 1 つ追加する

リクエスト：$ARGUMENTS

ティアの規約と Canvas とタイミングを確認するため、まず remocn スキルを読み込んでください。

  1. 名前を特定する。 リクエストが正確なコンポーネント名なら、それを使用します。「グリッチのあるタイトル」「高速カット」などの説明の場合は、https://remocn.dev/llms-components.txt から候補を絞り込み、Use for の行と長さを添えて最適な候補を 2、3 個提示します。選択を待ちます。
  2. ページを読む。 インデックスに記載された .md ドキュメント URL を取得します。props、使用例、Length、Avoid for の注意書きを確認します。注意書きがユーザーの希望に当てはまる場合は、その旨を伝え、記載された代替案を提案します。
  3. プロジェクトを一度だけ準備する。 components.json に @remocn レジストリがない場合は、まず 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. 使用する。 ドキュメントの使用例をもとに、Canvas に合わせて調整したコードスニペットを提示します。<Sequence durationInFrames> の中に配置し、その長さは Length にホールド時間を加えた値以上にします。トランジションは TransitionSeries.Transition に presentation として配置し、Length に合わせて linearTiming／springTiming を使用します。ユーザーがコード内の配置場所を指定した場合はそこに配置し、指定がなければ配置場所を尋ねます。
  6. 確認する。 npx tsc --noEmit を実行し、モーションの終了時点の静止画を作成します（npx remotion still <composition> out/<name>.png --frame=<n>）。作成した画像を確認します。

コメント

Markdown 対応