Communitygithub.com

stanglivideo

Remotionを使ってコードでモーションデザインビデオを作成し、音楽に合わせてカットし、フレームに合わせた効果音を追加します。プロモ、ローンチフィルム、製品ビデオ、説明動画、ソーシャルカット、ランディングループなど、あらゆる「モーションデザインビデオ」の依頼に使用します。

stanglivideo とは?

stanglivideo は、AI エージェントが Remotion を使い、音楽のビートや音響効果に完全に同期した、プロフェッショナルなモーションデザインビデオをコードから生成するためのスキルです。このスキルは、製品のビジュアルデザイン、トーン、クレームを忠実に再現し、ユーザーが好む2~5本の参考動画を分析してスタイルを学習します。ワークフローは段階的に設計されており、各段階でユーザーの承認を得ながら進行します。具体的には、動画の分析、製品の調査、音楽の選定、ストーリーボードの承認、レンダリング、そして厳格な同期、ラウドネス、画質チェックを通過するまで完了と見なされません。このスキルは Claude Code などの AI エージェントを前提としており、Remotion の公式スキルセットと連携して動作します。また、ジェミニを使用した画像やフッテージの生成、メディアループ化ツールなどのオプションモードも提供します。

対応~Claude Code~Codex CLI✓Cursor✓Gemini CLI
npx skills add https://github.com/ilijachrchev/skills/tree/HEAD/skills/stanglivideo

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

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

ドキュメント

stanglivideo は何をしますか?

まるで製品自身が作ったかのような映像、ビートに合わせて動き、サウンドはすべて正しい位置に配置されます。すべての音は対応するフレームに、画面のすべてのテキストは読むのに十分な時間表示され、フレームの外には何もありません。コードで構築された Remotion 製で、いつでも編集可能です。

以下のパスは、特に映画プロジェクトのパスで始まらない限り、このスキルのフォルダを基準とします。$PY は doctor が出力する Python です(スキルの .venv)。

すべての実行はここから始まります

  1. Doctor。 初回実行(このフォルダに .venv または taste.md がない場合):node scripts/doctor.mjs --setup。これにより .venv が作成され、requirements.txt がインストールされ、taste.example.md から taste.md が作成されます。以降の実行:node scripts/doctor.mjs。Node 18+、numpy と scipy を備えた Python 3.10+、完全版 ffmpeg、および関連スキルをチェックします。Node 自体がない場合、doctor は実行できません。その旨を伝え、以下のインストールコマンドを表示します。

  2. 不足しているものをユーザーにわかりやすく伝えます。 すべての FAIL について、不足しているもの、その理由、システム上で修正するための正確なコマンドを1行で説明します。その後、ユーザーが完了したと言い、doctor を再度実行するまで停止します。

    不足理由WindowsMac
    Node 18+映像の構築とレンダリングwinget install --id OpenJS.NodeJS.LTS -ebrew install node
    Python 3.10 ~ 3.13音のスコアリングとチェックの実行winget install --id Python.Python.3.12 -ebrew install [email protected]
    ffmpeg(完全版)分析、エンコード、ラウドネスチェックwinget install --id Gyan.FFmpeg -ebrew install ffmpeg
    関連スキルRemotion API ルールnpx skills add remotion-dev/skills同左

    Node、Python、または ffmpeg をインストールした後、ユーザーは新しいターミナルを開いて PATH を通し、node scripts/doctor.mjs --setup を再度実行する必要があります。GEMINI_API_KEY はオプションです。生成画像やループが実際に必要な場合にのみ言及します。

  3. 必須の関連スキル。 remotion-best-practices(Remotion の公式スキル)。ここにはバンドルされていません。Remotion API に関する質問(メディア、フォント、キャプション、レンダリングオプション)に使用します。

  4. テイスト。 references/base-rules.md と taste.md(まだ存在しない場合は taste.example.md から作成)を読みます。これらはユーザーの不変のルールです。競合した場合は taste.md が優先されます。

絶対条件

  • ユーザーのデザインが優先されます。 色、タイポグラフィ、コンポーネント、ロゴ、トーン、クレームは製品から取得します。他の製品のテイスト(このスキルに含まれる、ユーザーのデザインと矛盾するものも含む)を持ち込まないでください。
  • すべてのフレームは時間の純粋関数です。 CSS トランジションやキーフレーム、タイマー、Date.now()、Math.random(シード付き rand を使用)、フレーム間で受け渡される状態は使用しません。
  • タイミング元は1つ。 各映像の src/films/<film>/cues.json がすべてのキュー時間を保持します。映像の TSX がこれをインポートし、スコア(sound/cues.py)がこれを読み取ります。どちらもリテラルな時間を保持しません。
  • 測定し、推測しない。 ビートはオーディオから、位置はデバッグオーバーレイから、色はデコードされたピクセルから取得します。
  • 誠実なクレーム。 製品が実際に行うことだけを表示します。禁止リストは、コピーを書く前にユーザーが承認します。
  • コミット、プッシュ、公開、有料 API 呼び出しの前に必ず確認します。
  • コピー、ファイル、メッセージに em ダッシュや en ダッシュを使用しないでください。

ワークフローと承認ゲート

各 STOP はハードゲートです。ユーザーに質問(AskUserQuestion)し、回答を待ち、その回答をプロジェクトの BRAND.md に記録します。

  1. インテーク(必須)。 ユーザーが好きな動画を2~5本尋ね、それぞれについて、音を含め、好きな点を1行で尋ねます。node scripts/intake/intake.mjs <project>/intake <videos...> を実行し、すべてのシートを読みます。references/intake.md を参照してください。
  2. 発見。 製品について学習します:ルールファイル、トークン(ライトとダーク)、コンポーネント、ロゴ、ランディングページ、実際のスクリーンショットとコピー、クレーム。references/discovery.md を参照してください。
  3. インタビュー。 ブリーフと材料。references/interview.md を参照してください。その後:
    • STOP: ライトまたはダーク。 複数の映像がある場合は映像ごとに決定します。製品に両方のテーマがある場合はセットで両方を使用できます。
    • STOP: 禁止クレーム。 映像が主張する内容と、決して言ってはならないことのリスト(コード、サイト、ユーザーから)を表示します。両方のリストの承認を待ちます。
  4. ブランドキット。 templates/BRAND.md をプロジェクトに書き込みます。すべてのルールはその出典を明記します。
  5. 音楽。 候補を調査し測定します。STOP: 音楽選択。 references/music.md を参照してください。
  6. ストーリー。 templates/film-prompt.md に記入します。ビートプランを cues.json として記述します。references/story.md と references/ingredients.md を参照してください。
  7. プロジェクト。 node scripts/new-project.mjs <dir>、npm install。src/kit/ に1つのキット、映像ごとに1つのフォルダ。references/engine.md を参照してください。
  8. ストーリーボード。 シーンを構築し、映像ごとに5~8枚のスチルをレンダリング(プロジェクト内:node scripts/stills.mjs)し、タイル表示します。STOP: 全レンダリング前にストーリーボードの承認。 references/review.md を参照してください。
  9. レンダリング。 プロジェクト内:node scripts/render.mjs <Composition> out/<film>.mp4(安全性が組み込まれています)。コンタクトシート、確認、修正。
  10. スコアリング。 プロジェクト内:cues.json から sound/scores/<film>.py を作成。$PY sound/render.py <film> を実行。references/sound-rules.md を参照してください。
  11. ゲート(必須)。 プロジェクト内:$PY scripts/gate.py <film>。これを通過するまで完了とは呼びません。references/render.md を参照してください。
  12. 納品。 パス、長さ、ラウドネス、ピーク、ゲート結果、変更点。すべてのバージョンを保持します。

同期ゲート

  • ウィッシュ音は、動きの最速フレーム の ピーク に配置します(align="peak"。kit/speed.ts がカメラ移動の最速フレームを見つけます。E.out エントランスは開始時、E.exit リーブは終了時が最速です)。
  • ポップ音は、要素が着地するフレーム に配置します。チン音は、最終的な数字が表示されるフレームに配置します。
  • ライザー音は、ヒットで終了 します(align="end")。
  • すべての音には、対応する画面上のイベントを示すラベルが付けられます。
  • すべてのミックスの後:sound/check.py(映像変更前の音がないことを確認)、scripts/final-check.py(-14 LUFS を 1 LU 以内で、トゥルーピーク -2 dBFS 以下、ラウドネスレンジ 4 LU 以上、無音なし、無音レンダリングと同一の画像、同じ長さ)、および scripts/verify.py を実行します。これらはすべて scripts/gate.py によって実行されます。フラグは、音(またはキュー)を移動することで修正します。そのシートを確認せずに免除することは決してありません。

テイストの記憶

  • references/base-rules.md はスキルに付属しています。実際の映像からの修正点を一般的なルールとしてまとめたものです。
  • taste.md(git-ignored、taste.example.md から作成)はこのマシンのものです。ユーザーから新しい修正指示があった場合、映像を修正する前に、その問題をどの映像でも防止できたであろう一般的なルールとしてここに記述します。 毎回の実行開始時に読みます。
  • 複数の映像にわたって有効なルールは、このスキルへのプルリクエストによって base-rules.md に昇格させることができます。サイレント編集は禁止です。

安全性(スクリプトに組み込み)

templates/project/scripts/safety.mjs。すべてのバンドルとレンダリングで使用されます。最初に空きディスク容量を確認し(最低10 GB)、同時に実行されるレンダリングは最大2つまで、一時バンドルはジョブごとに削除され、古いものはその前に削除されます。メモリが少ないマシンでは同時実行数1でレンダリングします。自分が開始したプロセスのみを停止します。

オプションモード

  • 生成メディア。 コードで描画できないものにのみ使用します:実際の写真、写真テクスチャ、切り抜き、およびユーザーが実際の撮影ルックを希望する場合の撮影済み背景(シルク、液体、光)。scripts/gemini/image.mjs は参照画像を受け取り、出力が選択されたルックに一致するようにします。アスペクト、サイズ、リサイズ、クロマキーも指定できます。scripts/gemini/video.mjs は、パレットが一致した最初のフレーム(またはネイティブループ)から Veo クリップを作成します。環境変数 GEMINI_API_KEY からのキーが必要です。すべての呼び出しはコストを表示し、ユーザーの承諾があった後にのみ実行されます。references/gemini.md を参照してください。
  • メディアツール(無料、任意のクリップ)。 scripts/media/loop.py はクリップをシームレスな背景ループに変換します(継ぎ目検索、正確なディゾルブ、映像のfpsへの補間、ループ+ポスター+静止画シーケンス+境界シートを出力)。キットの LoopBackground は、映像の cues.json からモーションレイヤーの下に配置します。scripts/media/clip.py はプローブ、プロジェクトのフォーマットへの再エンコード、エッジのクロップ、スチルまたはシートの抽出を行います。scripts/media/imgpost.py は画像のキーイングとリサイズを行います。
  • リフレッシュ。 ユーザーから依頼があった場合:新しいエントリを見つけるために prompt-motion.com、skillry.dev、awesome-opus5-5-videos リポジトリを再調査し、プルリクエストによる参照アップデートを提案します。references/refresh.md を参照してください。

品質の下限(常に)

  • 製品自身のサーフェス、色、境界線、シェーディングのみ。自作のパネルや色味は使用しません。
  • 納品サイズで読めること。少ない単語は小さい単語より優れています。読む必要のある行は、約 0.2 秒/ワードで表示され、2 秒以上保持されます。
  • すべてのカードとクロージングマークは、すべての動きのすべてのフレームで、完全にフレーム内に収まります。
  • 各ショットを 5 ~ 6 秒、1 回のゆっくりとしたプッシュで保持します。ごちゃごちゃしていると感じたら、速度を上げるのではなく、画面をカットします。
  • テキストがカーソルやチップで覆われることはなく、他のテキストと交差することもなく、構築中に再センタリングされることもありません。
  • すべてのビートで何かが起こります。シーンの境界は小節線上にあります。ループの最後のフレームは最初のフレームと等しくなります。
  • セット内では、2 つの映像が同じ構造を共有することはありません。並べて表示するものは、完全に中央に配置されます。
  • 製品の言語が使用しないエフェクトは使用しません:グロー、パーティクル、クリックリング、バウンシーイージング、シェーダー。

知識

実際に時間を浪費する罠

  • Remotion のスチルはコンソールログを転送しません。フレーム内に測定値を印刷します(kit/debug.tsx)。
  • npx remotion still は呼び出しごとに再バンドルします。scripts/stills.mjs(1 バンドル、複数フレーム)を使用します。
  • Remotion にバンドルされている ffmpeg には tmix、select、tile がありません。doctor が確認したシステムの ffmpeg を使用します。
  • カラーレンジ:すべての納品物のフレーム 0 をデコードして確認します(verify.py --bg)。リミテッドレンジのマスターをフルレンジとして読み取ると、暗い背景がグレーに持ち上げられます。
  • interpolateColors は color-mix() を解析できません。アニメーションするものには 16 進数を使用します。
  • 非同期イメージコンポーネントはフレーム内で空をレンダリングする可能性があります。Remotion の <Img> を使用します。
  • 時間から計算されたインデックスは、そのセクションの直前で -1 になります。クランプします(safeIndex)。
  • カメラが拡大縮小するものに will-change を設定すると、テキストがぼやけます。
  • マスクを使用したワードリビールは、パディングなしで最後の文字をクリップします。kit/components.tsx の WordReveal を使用します。
  • レンダリング内でのビデオデコードは信頼性が低いです。ループを画像シーケンスに変換します。

Individual skills in this repo

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

関連スキル