remotion-create

Remotion ビデオの新規プロジェクトを作成し、構成します。

remotion-create とは?

このスキルは、Remotion を使用した新しいビデオプロジェクトの作成を支援します。開発者は空のフォルダまたは既存のプロジェクトが存在しないフォルダで、`npx create-video` を使用して適切にプロジェクトをスキャフォールディングできます。スキルはフォルダの状態をチェックし、隠しファイルを含む現在のフォルダの内容を適切に処理するための具体的な指示を提供します。また、ビデオのプレビューを有効にするための Remotion Studio の起動、React マークアップの追加、タイムラインや複数シーンのビデオの設計に関するベストプラクティスをカバーします。作成後は Remotion Best Practices を参照してフォローアップします。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-create

Installed? Explore more ビデオ&アニメーション skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

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

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

ドキュメント

新しいRemotionプロジェクトと合成を作成するための指示です。 これが次のタスクでない場合は、Remotionのベストプラクティスを参照してください。

プロジェクトのスキャフォールディング

プロジェクトが既に存在する場合は、この手順をスキップしてください。 Node.js と Git がインストールされていることを確認し、現在のフォルダが新しいプロジェクトを開始するのに適していることを確認してください。

現在のフォルダ(隠しファイルを含む)を検査し、スキャフォールディングする場所を選択してください。

空のフォルダ

フォルダが空の場合、または.DS_Storeなどの使い捨てのオペレーティングシステムメタデータのみが含まれている場合は、現在のフォルダに直接プロジェクトを作成してください。 create-videoは空でないフォルダを拒否するため、最初にこれらの使い捨てメタデータファイルのみを削除してください。 すべての隠しファイルを使い捨てとして扱わないでください。.envなどのファイルや.gitなどのディレクトリは意味のある内容です。

既存のフォルダにスキャフォールディング:

npx create-video@latest --yes --blank --no-tailwind .
npm i

空でないフォルダ

現在のフォルダに意味のある内容が含まれており、プロジェクトがまだ存在しない場合は、新しいサブフォルダにスキャフォールディングしてください。 my-video を適切なプロジェクト名に置き換えてください。

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

ビデオのビルド前にプレビューを開く

プロジェクトが実行可能になり次第、合成を記述または変更する前に、ブラウザでRemotion Studioを開いてください。新しいプロジェクトの場合は、スキャフォールディングと依存関係のインストール直後に行ってください。既存のプロジェクトの場合は、ビデオを編集する前に行ってください。作業中はStudioを実行したままにしておき、ユーザーが変更を確認し、結果を調整できるようにしてください。

ビデオの設計

スキャフォールディングを維持し、Reactマークアップを追加してください。 ビデオ優先のレイアウトとテキストサイズのガイダンスについては、Remotion Reactマークアップのベストプラクティスとビデオレイアウトルールに従ってください。

<Composition> または <Still> 要素を登録するルートを記述する前に、 合成と静止画に従ってください。

これはクリップのタイムラインですか?

ビデオがタイムライン上に複数のビデオまたはオーディオクリップを配置する場合は、 タイムラインを記述する前にビデオ編集を参照してください。 独立して編集する必要がある各クリップには、独自の作成済みのJSXノードを指定してください。

これはマルチシーンビデオですか?

複数の連続したシーンを含むビデオの場合は、マルチシーンビデオのガイダンスに従ってください。

インタラクティブ性のベストプラクティス

Remotionインタラクティブ性のベストプラクティスに従ってReactマークアップを構造化することで、ユーザーはStudioでコードに書き戻す編集を行うことができます。

TailwindCSS

Tailwindが要求された場合は、RemotionでのTailwindCSSの使用についてtailwind.mdを参照してください。

フォローアップ

ビデオ作成プロセスが終了しました。 フォローアップのプロンプトについては、Remotionのベストプラクティスを使用してください。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

関連スキル