Communitygithub.com

remocn コンポーネント追加

Remotionプロジェクトに1つのremocnコンポーネントをインストールし、その使用方法を説明します:ドキュメントページを読み、shadcn addを実行し、適切な長さのSequence内に配置します。ユーザーがremocnコンポーネントの名前を指定した場合、または単一のアニメーション、トランジション、背景、UIプリミティブ(動画全体ではなく)をリクエストした場合に使用します。

remocn コンポーネント追加 とは?

このスキルは、Remotionベースの動画制作プロジェクトにremocn UIコンポーネントを1つ追加するプロセスを自動化します。ユーザーがコンポーネント名や「グリッチタイトル」「高速カット」などの説明を入力すると、remocnの公式コンポーネントリストから候補を提案し、ユーザーの選択を待ちます。選択されたコンポーネントのマークダウンドキュメントを取得し、propsや使用例、長さ、回避すべき注意点を確認した上で、プロジェクトに必要なセットアップ(setup.mjs)を一度だけ実行し、`npx shadcn add @remocn/<name>` でインストールします。インストール後は、ドキュメントの例に基づいた使用コードスニペットを、キャンバスサイズに合わせ、`<Sequence>` または `TransitionSeries` 内に配置して表示します。最後にTypeScriptの型チェックと静止画レンダリングで動作確認を行います。このスキールは主にClaude Code上で動作し、ユーザーのコード内で指定された場所にコンポーネントを正確に埋め込むことができます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Remocn/remocn/tree/HEAD/plugins/remocn/skills/add

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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

リクエスト: $ARGUMENTS

最初に remocn スキルをロードして、階層規則とキャンバスおよびタイミングを確認してください。

  1. 名前を解決します。 リクエストが正確なコンポーネント名の場合はそれを使用します。説明(「グリッチタイトル」「高速カット」など)の場合は、https://remocn.dev/llms-components.txt から候補を絞り込み、最適な2〜3個をそれぞれの Use for 行と長さと共に提示します。選択を待ちます。
  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. 使用します。 ドキュメントの例から作成した使用スニペットを、キャンバスサイズに合わせ、少なくとも Length にホールド時間を加えた <Sequence durationInFrames> 内に表示します。トランジションは TransitionSeries.Transition に presentation として配置し、linearTiming/springTiming を Length に設定します。ユーザーがコード内の場所を指定した場合はそこに配置し、それ以外の場合は配置場所を尋ねます。
  6. チェックします。 npx tsc --noEmit を実行し、次にモーションの終了フレームで静止画をレンダリング(npx remotion still <composition> out/<name>.png --frame=<n>)して確認します。

Individual skills in this repo

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

関連スキル