remotion-best-practices (remotion-dev/skills)
Remotion の作業を、動画作成、マークアップ、地図、マルチメディア、インタラクティブ性の各ガイドへ振り分けます。
Remotion スキル：映像品質はスキルなしや、そのルールの一文版と同じで、トークンは 1.4 倍です。
Codex CLI · gpt-6-astra
22.9 / 30
スキルなしに対するリフト：-0.01 · 状況次第 · 18 実行
状況次第：リフト -0.01 が +1.0 未満。推奨には合計 22/30、出力品質 3.5、リフト +1.0 が必要です。
SOTA
合格Codex でテスト済み。
カバー対象 Codex, Claude Code
Codex CLI 0.166（SOTA ティア）：採点対象 18 実行。当ティアのルールでは、ここでの合格は Claude Code もカバーします。第2ティアについては何も述べません。
スコア
各ディメンションは 0〜5 点で、6 つの合計が 30 点満点の合計スコアになります。すべてのディメンションで 5 が最良です。コスト 5 は低コストで高速、インストール 5 は簡単であることを意味します。
- トリガーの信頼性
- 5.0
- スキルなしに対するリフト
- 2.0
- 出力品質
- 4.9
- トークンと時間のコスト
- 3.0
- インストールと移植性
- 4.0
- 安全性
- 4.0
セキュリティレビュー
安全静的スキャン：CRITICAL 13 / HIGH 16 / MEDIUM 0。手動レビュー：実行しても安全（ネットワーク無効のサンドボックス）。クリーンなスキャン結果はスキルの安全性を証明しません。
インストール
npx skills@latest add remotion-dev/skills --skill remotion-best-practices
固定コミット: 30d4553ecd46fbc5212fd0ff006ae43af522158b
テスト済み: 2026-11-02
テスト内容
- 15 秒の商品ティザー — この Remotion プロジェクト（React コンポーネントは src/、コンポジション ID は 'Main'、npx remotion render src/index.ts Main でレンダリング）で、毎月届く海藻スナックのサブスクリプション Tidepool の 15 秒・1920x1080・30 fps の商品ティザーを作ってください。画面に表示する必須テキスト: …
- 20 秒の棒グラフ解説アニメーション — この Remotion プロジェクト（React コンポーネントは src/、コンポジション ID は 'Main'、npx remotion render src/index.ts Main でレンダリング）で、20 秒・1920x1080・30 fps のアニメーション解説を作ってください。月次売上の棒グラフ（8月 $42k、9月 $58k、10月 $71k）。タイトル 'Reven…
- 30 秒の縦型字幕付きショート — この Remotion プロジェクト（React コンポーネントは src/、コンポジション ID は 'Main'、npx remotion render src/index.ts Main でレンダリング）で、焼き込み字幕付きの 30 秒・縦型 1080x1920・30 fps のソーシャルショートを作ってください。字幕は順番に、それぞれ約 5 秒…
長所
- スキルは名前を出さずとも採用されました：スキルあり群 6/6 実行でスキルファイルが読み込まれました。
- スキルありの絶対品質は高水準：5 点中 4.91。
短所
- スキルなしに対する有意なリフトなし（-0.01、ノイズの範囲内）。
- 一文プロンプトは 4.89、スキルありは 4.91（+0.02）。
- 対照群はすでに 4.91 点：天井効果のため、テストでリフトを示せません。
- タスク・群ごとに n=2。1 ポイント未満の差はノイズです。
レビュー
Mac テストマシン上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。環境: プロジェクトテンプレート（コンポジション ID が Main の Remotion プロジェクト）は全群で同じです。サンドボックスにはネットワークも Remotion ツールもないため、どの群も Studio を起動したりレンダリングしたりできず、ソースのみを書きました。その後、各プロジェクトを別のオフラインマシンで Remotion 4.0.539 によりレンダリングしました。スキルの「まずプレビューを開く」ステップは実行できませんでした。
3群の比較
| 群 | 平均スコア（0〜5） | 1実行あたりのトークン |
|---|---|---|
| スキルなし | 4.91 | 159k |
| 一文プロンプト | 4.89 | 156k |
| スキルあり | 4.91 | 217k |
Codex CLI で 18 実行を計測し、LLM 判定なしのルールベースのチェックで採点。合計 22.9 / 30、判定は 状況次第。
判定：状況次第（22.9 / 30）。 出典：remotion-dev/skills、skills/remotion-best-practices、コミット 30d4553 に固定。インストール：npx skills@latest add remotion-dev/skills --skill remotion-best-practices。ライセンス： Remotion License（3 人超の会社での利用には有償ライセンスが必要。評価のみ）。
概要
remotion-best-practices スキル。Remotion の公式スキルセットのルーターです（remotion-dev/skills、バージョン 4.0.539、Remotion License）。SKILL.md（約 600 語）はエージェントをサブスキルへ誘導します：動画の作成、マークアップのベストプラクティス（アニメーションは useCurrentFrame() と interpolate() で駆動、fps は useVideoConfig() から取得、CSS トランジションや Tailwind のアニメーションクラスは使わない）、マップ、キャプション、スタジオ、レンダリングなど。Markdown のサブスキルが約 12 個と、小さなローカル .mjs スクリプトが 2 つ。また、エージェントに Remotion Studio のプレビューを開くよう指示し、求められない限りレンダリングしないよう伝えます。
テスト方法
Mac テストマシン上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。
環境：プロジェクトテンプレート（コンポジション ID Main の Remotion プロジェクト）は全群で同じです。サンドボックスにはネットワークも Remotion ツールもないため、どの群も Studio を起動したりレンダリングしたりできず、ソースを書くだけでした。その後、別のオフラインマシンで Remotion 4.0.539 を使って全プロジェクトをレンダリングしました。スキルの「まずプレビューを開く」手順は実行できませんでした。
- 15 秒の商品ティーザー — この Remotion プロジェクト（src/ に React コンポーネント、コンポジション ID 'Main'、
npx remotion render src/index.ts Mainでレンダリング）で、Tidepool（毎月の海藻スナックサブスクリプション）の 15 秒・1920x1080・30 fps の商品ティーザーを作成してください。画面上の必須テキスト：… - 20 秒のアニメーション棒グラフ解説 — この Remotion プロジェクト（src/ に React コンポーネント、コンポジション ID 'Main'、
npx remotion render src/index.ts Mainでレンダリング）で、20 秒・1920x1080・30 fps のアニメーション解説を作成してください：月間売上の棒グラフ（Aug $42k、Sep $58k、Oct $71k）。タイトル 'Reven… - 30 秒の縦型キャプション付きショート — この Remotion プロジェクト（src/ に React コンポーネント、コンポジション ID 'Main'、
npx remotion render src/index.ts Mainでレンダリング）で、焼き込みキャプション付きの 30 秒・縦型 1080x1920・30 fps のソーシャルショートを作成してください。キャプションは順番に、それぞれ約 5 秒間画面に表示…
採点はプログラム的（隠しテスト／仕込み問題の検出／制約チェック／該当する場合はレンダリング+OCR）で、実行ごとに 0〜5 点。スコアはどの LLM 判定者も決めていません。
結果
第 3 群に与えた一文プロンプト：「すべてのアニメーションを useCurrentFrame() と interpolate()/spring() で駆動する（CSS の transition/animation は使わない）。fps は useVideoConfig() から取得し、それで秒をフレームに変換する。動画はコンポジション内で <Sequence>/<Series> のシーンとして構成する。」
| タスク | 対照群スコア | 一文プロンプト | スキルあり | 対照群のトークン | 一文プロンプトのトークン | スキルありのトークン | スキル読み込み |
|---|---|---|---|---|---|---|---|
| t1-teaser | 5.0 | 4.93 | 5.0 | 230k | 168k | 254k | 2/2 |
| t2-chart | 4.74 | 4.73 | 4.71 | 121k | 168k | 198k | 2/2 |
| t3-vertical | 5.0 | 5.0 | 5.0 | 124k | 129k | 197k | 2/2 |
平均スコア：スキルなし 4.91 に対しスキルあり 4.91（差 -0.01）。1実行あたりのトークン：159k 対 217k（1.36x）。時間：161s 対 177s。一文プロンプト群：4.89（一文プロンプトに対するスキルの上積み：+0.02。一文プロンプト自身のスキルなしに対する上積み：-0.03）。一文プロンプトのトークンは 1実行あたり 156k なので、スキルは一文プロンプトの 1.39 倍のコストになります。
何が起きたか
- 動画の品質は同じでした。18 プロジェクトすべてが正しいサイズ、長さ、フレームレートでレンダリングされ、OCR は各プロジェクトで必要なテキスト（名前、タグライン、$14 / box、締めの一文、チャートのタイトル、キャプション）をすべて見つけました。平均スコアはスキルなし 4.91、ルールの一文版のみ 4.89、スキルあり 4.91。全群で失点したのは、長時間静止する棒グラフ解説（モーションのあるフレームが 15〜23%）と、48〜52% の 2 つの一文ティーザーだけです。
- 3 群すべてのティーザーのコンタクトシートを見ました：すべて完成した商品広告のように見え（クリーム色とダークグリーンのシーン、パウチのイラスト、価格のエンドカード）、順位を付けられませんでした。
- スキルの主要な具体的ルールは、あってもなくても守られていました。ソースを読むと：スキルなしの 6 プロジェクトではどれも
useVideoConfig()を呼ばず（30 fps をハードコード）、スキルと一文プロンプトの全 6 プロジェクトでは使われ、どの群のプロジェクトも CSS トランジションやキーフレームを使っていません。つまり、一文が同じルールを運び、エージェントは促されなくてもすでにuseCurrentFrame()とinterpolate()でアニメーションします。 - スキルは毎回読み込まれ（スキルあり群 6/6 実行）、コストも高いです：1実行あたり 217k トークン。スキルなし 159k（1.36x）、一文プロンプト 156k（1.39x）。コマンドは 14 回、他は 9 回。これはテストした 3 つの動画系スキルの中で最も小さいオーバーヘッドです。
- 一部は実行できませんでした。スキルの最初の指示は、構築前に Remotion Studio を起動してプレビューを開くことです。ネットワークもツールもないためそれは実現せず、結果はスキルのテキストのみです。
評価項目スコア
| 評価項目 | スコア | 理由 |
|---|---|---|
| 1_output_quality | 4.91 | スキルありの平均スコアは 5 点中 4.91（プログラム的チェック。タスク別の表を参照）。 |
| 2_lift_vs_no_skill | 1.99 | スキルなしの 4.91 に対し -0.01 点（タスクごとに n=2。約 1 点未満の差はノイズ）。 |
| 3_trigger | 5.0 | スキルあり群 6/6 実行でスキルファイルが読み込まれました。 |
| 4_instructions_portability | 4 | 多数のサブスキルファイルを持つルータースキル。「まず Studio を開く」ルールはブラウザと稼働中の dev サーバーを必要とし、多くのエージェントサンドボックスにはありません。 |
| 5_efficiency | 3 | トークン 1.36x（1実行あたり 217k 対 159k）、時間 1.10x（177s 対 161s）。 |
| 6_safety_hygiene | 4 | Markdown とローカルの .mjs スクリプト 2 つ（ネットワークなし、exec なし）。スキャナのヒットはドキュメント例の .env/process.env（Mapbox、ElevenLabs キー）。Remotion License は 3 人超の会社に有償ライセンスを必要とします。 |
このテストの限界
- サンドボックスには Studio プレビューもレンダーも Remotion CLI もないため、スキルのワークフローは部分的にしか検証できませんでした。
- コードで描く 3 つのタスク（ティーザー、棒グラフ、縦型キャプションショート）。実写映像、音声、音声からのキャプション、マップ、Lottie、3D、SaaS レンダリング機能はテストしていません。
- レンダリングはソフトウェア GL の Linux 上で行い、モーションのチェックは粗いフレーム差分の閾値です。チャートタスクは全群で失点します。
useVideoConfigのカウントはソースを読んで得たもので、0〜30 のスコアには含まれません。- Remotion License：個人と 3 人までの会社は無料、それ以上は有償。我々は評価しただけで再配布はしていません。
- タスクごとに各群 n=2。約 1 点未満の差はノイズです。
- ルールベースの採点はチェックが見られるものだけを測ります。好みや、結果が可能な限り最善かどうかは判断できません。
セキュリティ
security.md を参照。スキャン：CRITICAL 13 / HIGH 16 / MEDIUM 0。判定：実行しても安全（ネットワーク無効のサンドボックス）。クリーンなスキャン結果はスキルの安全性を証明しません。
結論
一度きりのコード描画動画では、このスキルは測定可能な差を生みませんでした。エージェントはすでに健全な Remotion コードを書き、スキルの主要ルールの一文がその小さな構造的効果を約 0.7x のコストで再現しました。Remotion プロジェクトを頻繁に作るなら、インストールしたままでも問題ない安さです（サブスキルは我々がテストしなかったマップ、キャプション、レンダリングをカバーします）。しかし、シンプルな動画を改善するという証拠はここにはありません。
トランスクリプト
実行ログ：remotion-best-practices (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 列：タスク、群-回、スコア（0-5）、トークン、秒、合格したチェック、エージェントが開いたスキルファイル。 t1-teaser control-1: スコア 5.0, トークン 258594, 秒 285.6, チェック 5/5, 開いたファイルなし t1-teaser control-2: スコア 5.0, トークン 202623, 秒 189.4, チェック 5/5, 開いたファイルなし t1-teaser oneliner-1: スコア 4.94, トークン 218510, 秒 266.6, チェック 5/5, 開いたファイルなし t1-teaser oneliner-2: スコア 4.92, トークン 118109, 秒 174.8, チェック 5/5, 開いたファイルなし t1-teaser treatment-1: スコア 5.0, トークン 217450, 秒 209.8, チェック 5/5, 開いたファイル remotion-best-practices t1-teaser treatment-2: スコア 5.0, トークン 291582, 秒 227.3, チェック 5/5, 開いたファイル remotion-best-practices t2-chart control-1: スコア 4.73, トークン 130647, 秒 112.9, チェック 4/5, 開いたファイルなし t2-chart control-2: スコア 4.74, トークン 112740, 秒 110.9, チェック 4/5, 開いたファイルなし t2-chart oneliner-1: スコア 4.73, トークン 140990, 秒 152.9, チェック 4/5, 開いたファイルなし
18 実行、21 成果物
サンプル出力
SOTA · With the skill: src/Tidepool.tsx (t1-teaser, run 1, Codex)
import React from 'react'; import {AbsoluteFill, Sequence, interpolate, Easing, useCurrentFrame, useVideoConfig} from 'remotion'; const cream = '#F6F1DF', ink = '#123E36', lime = '#D9EF79', orange = '#FF8552'; const serif = 'Georgia, "Times New Roman", serif'; const easing = {extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const, easing: Easing.bezier(.16, 1, .3, 1)}; const Enter: React.FC<{children: React.ReactNode; delay?: number; style?: React.CSSProperties}> = ({children, delay = 0, style}) => { const f = useCurrentFrame(); return <div style={{...style, opacity: interpolate(f, [delay, delay + 18], [0, 1], easing), translate: `0 ${interpolate(f, [delay, delay + 23], [60, 0], easing)}px`}}>{children}</div>; }; const Wave = ({color = ink, bottom = -100}: {color?: string; bottom?: number}) => { const f = useCurrentFrame(); return <svg width="2200" height="300" viewBox="0 0 2200 300" style={{position: 'absolute', left: -100, bottom, translate: `${Math.sin(f / 65) * 65}px 0`}}><path d="M0 95 Q275 -15 550 95 T1100 95 T1650 95 T2200 95 V300 H0Z" fill={color}/><path d="M0 60 Q275 -50 550 60 T1100 60 T1650 60 T2200 60" fill="none" stroke={color} strokeWidth="2"/></svg>; }; const Pouch = () => { const f = useCurrentFrame(); return <div style={{width: 420, height: 610, position: 'relative', rotate: `${-7 + Math.sin(f / 40) * 1.5}deg`, translate: `0 ${Math.sin(f / 28) * 9}px`, filter: 'drop-shadow(18px 25px 0 rgba(18,62,54,.13))'}}> <svg width="420" height="610" viewBox="0 0 420 610" style={{position: 'absolute'}}> <path d="M26 5 H394 L382 55 L407 573 Q411 600 380 604 H40 Q9 600 13 573 L38 55Z" fill={lime} stroke={ink} strokeWidth="3"/> <path d="M29 18 H391 M32 29 H388 M35 43 H385 M22 577 H398 M22 587 H398" stroke={ink} strokeWidth="2" opacity=".35"/> <path d="M22 472 Q120 427 210 477 T399 477 L404 571 H16Z" fill={ink}/> <path d="M25 455 Q120 410 210 460 T397 460" fill="none" stroke={ink} strokeWidth="3"/> </svg> <div style={{position: 'absolute', top: 77, width: '100%', textAlign: 'center', color: ink}}> <div style={{fontSize: 65, fontFamily: serif, letterSpacing: -4}}>Tidepool</div> <div style={{fontSize: 15, letterSpacing: 4, marginTop: 15}}>SEAWEED SNACKS</div> <svg width="190" height="210" viewBox="0 0 190 210" fill="none" style={{marginTop: 18}}><path d="M96 203 C67 143 135 95 96 12 M96 164 C28 163 29 115 45 100 C48 138 85 116 96 164 M99 118 C157 119 163 70 143 59 C143 89 108 79 99 118 M100 71 C57 74 55 36 66 24 C72 49 94 37 100 71" stroke={ink} strokeWidth="9" strokeLinecap="round"/></svg> <div style={{fontSize: 18, letterSpacing: 3, marginTop: 9}}>A LITTLE OCEAN JOY</div> </div> <div style={{position: 'absolute', top: 513, width: '100%', textAlign: 'center', color: cream, fontSize: 20, letterSpacing: 3}}>CRISP • SAVORY • SEAWEED</div> </div>; }; const Chip = ({x, y, angle, index}: {x: number; y: number; angle: number; index: number}) => { const f = useCurrentFrame(); return <svg width="340" height="260" viewBox="0 0 260 200" style={{position: 'absolute', left: x, top: y, rotate: `${angle + Math.sin(f / 35 + index) * 6}deg`, translate: `0 [... excerpt: first 3200 of 8030 characters]