Code Video

Code Video は何をしますか？

<skill> はこのSKILL.mdが格納されているフォルダです。エンジンは <skill>/template/ にあります:

• kit.js: 手描きの線、テキスト、キネティックタイポグラフィ、カメラ、トランジション、ピクセルスプライト、ミニキャラ、画像ピクセル化、ビデオクリップ、電話とカーソルのプロップ、モーションブラー、useFonts
• クレジットされた見た目とフォーマット用のスタイルモジュール: handdrawn.js、motion.js、sand.js、lyric.js、beat.js（それぞれオリジナルの特徴的な要素を描画）
• ルックモジュール arcade.js、terminal.js、thermal.js、transit.js、blueprint.js: 共通のシーンAPIと各ルック固有のフォーマットシーンを提供（references/looks.md）
• minis-ai.js: AI関連トピック（Claude、Codex、Gemini、DeepSeek、Grok、Qwen）向けの既製ミニキャラ
• render.mjs: ヘッドレスChromeを使用した並列レンダリング。audio.wav があればマルチプレクス
• main.js: シーンスケルトン

<skill>/scripts/audio.py は音楽と効果音を合成し、<skill>/scripts/beats.py は曲のビートグリッドを見つけ、<skill>/scripts/reference_sheet.py はクレジットされたオリジナルのフレームをあなたのフレームの上に重ねます。

必要なツール: node/npm、ffmpeg（libx264ビルド）、Google Chrome、uv。不足している場合は停止し、どれが不足しているかを伝えてください。

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. ルックとフォーマット、次に設定を尋ねる

ルックは描画スタイルのみを指し、フォーマットはストーリーの構造です。どのルックもどのフォーマットでも機能します。ただし、リリックフォーマットとビートフォーマットは、ユーザーが別のルックを指定しない限り、独自のルックを持ちます。最初に両方を2つの番号付きリストを含む短いメッセージで尋ねてください（1つの質問で収まるよりも多くの選択肢がある場合）。ユーザーが既に指定したものはスキップし、トピックからフォーマットを提案してください（比較はバーサスを、ラインナップはルートマップなどを提案）。

ルック:

ルック	雰囲気	デフォルトサウンド	ガイド	クレジット
1. Hand-drawn + 8-bit minis (デフォルト)	遊び心、スケッチブック	なし	styles/handdrawn.md	@nahiddotai
2. Brand motion graphics	クリーン、オフィシャル	なし	styles/motion.md	@digitalstrategyai
3. Sand art	温かみ、ストーリー性	音楽と効果音	styles/sand.md	@Michaelzsguo
4. 16-bit arcade	ゲーム的、エネルギッシュ	チップチューン風音楽とヒット音	looks.md	オリジナル
5. CRT terminal	開発者向け、レトロ	キークリック、ソフトパッド	looks.md	オリジナル
6. Thermal receipt	印刷、触感	プリンターのカチカチ音、スタンプ	looks.md	オリジナル
7. Transit map	図解、整然	チャイム、電車の音	looks.md	オリジナル
8. Blueprint	技術的、精密	製図音	looks.md	オリジナル

フォーマット（詳細は references/formats.md）:

フォーマット	構造	クレジット
1. Standard promo (デフォルト)	フック → タイトル → 手順 → 大きな数字 → エンディング	オリジナル
2. Versus	2つの選択肢間のラウンド、その後集計	オリジナル
3. Session	使い方を示すコマンドと出力	オリジナル
4. Receipt	項目別リスト、合計、スタンプ	オリジナル
5. Route map	ライン、駅、乗り換え	オリジナル
6. Spec sheet	パーツ、それぞれに1つのスペック	オリジナル
7. Lyric music video (独自ルック)	オリジナル曲、行ごとに1つの事実と1つの図	@goodside
8. Beat-synced footage (独自ルック)	曲のビートでカットされた実際のクリップ: 壁、カルーセル、電話	@twoclipping

ルックとフォーマットをリストするときは、クレジットされた各オリジナルソースをそのリンクと共に名前を挙げてください。

その後、1回のAskUserQuestion呼び出しで設定を尋ねてください。ユーザーが既に言ったことはスキップし、推奨オプションを最初に置いてください。

• 長さ: 30 秒 / 15 秒 / 45 秒 / 60 秒
• フレーム: 16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• キャラクター: ロゴマスコット + トピックミニキャラ / ユーザー指定ミニキャラ / ロゴマスコットのみ / なし
• 画面内言語: この会話の言語 / 英語 / 両方

キャラクターはルックの形態を取ります: 8ビットスプライト、砂のシルエット、ピクセルヒーロー、またはフラットアイコン。ミニキャラはトピックに合ったサポートキャストです。ユーザーがキャストを指定した場合はそれを使用します。そうでなければ、調査からキャストを選び、計画で提案してください（references/storyboard.mdの「ミニキャラ」参照）。

尋ねなかった項目には以下のデフォルトを使用し、計画で明記してください:

• 30 fps（ビートフォーマットではモーションブラー付き60 fps）、H.264 MP4、最大10 MB/30秒（サウンドがある場合は少し大きめ）
• サウンドはルックに記載された通り。リリックフォーマットとビートフォーマットは常に音楽があります。歌によるボーカルはありません。

すべてのルックとフォーマットのルール

• クレジットされたルックはオリジナルを再現します。 計画を立てる前に、ガイドを開き、その参照フレーム <skill>/docs/styles/<key>.jpg をReadツールで確認してください。ガイドのSignatureテーブル内のすべてのアイテムが画面上に表示されなければなりません。そのテーブルは要件であり、メニューではありません。追加の要素はSignatureの後に来ます。決してSignatureの代わりにはなりません。
• 言語: 画面上のすべてのテキストは、ラベル、HUD、歌詞、レシート、ターミナル出力、エンドカードを含め、画面内言語の設定に従います。
• 調査によるテーマ: カラーパレットはブランドの実際の色（CIページ、サイトCSS、ロゴピクセル）から、フォントは可能な限りブランドから取得します。パレットを16進数値とそのソースと共に計画で示してください。固定の素材やフィールド（砂、暗いモーションフィールド、ターミナルグリーン、感熱紙、ブループリントブルー）を持つルックはそれを維持し、ロゴ、1つのアクセントカラー、エンドカードでブランドを表現します。
• 数字: すべての数字にはソースがあります。設立日から年数や「N年」を計算し、サイトから古い「N年」の行をコピーしないでください。UIの読み出しや例の統計を発明しないでください。実在の値を使用するか、省略してください。
• クレジット: クレジットされたルックとフォーマットは、そのアイデアを採用したクリエイターの名前を明記します。ガイドを変更する場合もこれらのクレジットを維持してください。
• 自分の作業を待つ。 レンダリングは長いBashタイムアウト（最大600000 ms）でフォアグラウンドで実行します。バックグラウンドでエージェントやコマンドを開始した場合、あなたのターンを終了する前にその結果を待ちます。非インタラクティブ実行では何もあなたを再度起動しません。

1. 調査

references/research.md に従ってください。

• バランスを保つこと: 1分未満のビデオの場合、約10個のソース付き事実とブランドアセットで十分です。読み取り専用エージェントに1つの狭いブリーフ（質問、サイト、約15回のフェッチの上限）を与え、独立した検索を並行して実行します。
• 見出しの数字は自身で元の文と照らし合わせて確認してください。
• ソース間で数字が矛盾する場合は、どちらを使用するかユーザーに尋ねてください。

2. 計画承認

作業フォルダを作成する前に、以下を表示して承認を得てください:

• ソースリンク付きの調査サマリー
• ルックとフォーマット、およびそのガイドのパターンとタイミングを使用したシーンタイムライン
• クレジットされたルックまたはフォーマットの場合: 各アイテムを表示するシーンとそのSignatureテーブル
• パレット（16進数値と各色の出典）とフォント
• ルックまたはフォーマットにサウンドがある場合のサウンドプラン: テンポ、セクション、キュー
• 使用する数字と破棄する数字、アセットリスト（ロゴURL、フォント、キャラクター、クリップ、楽曲ライセンス）、作業フォルダの場所

ユーザーがシーンや重点を変更した場合、修正された流れを一度再提示し、その後進めてください。

3. ビルド

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # インストールされたスキルは読み取り専用の場合があり、cpはそのモードを保持する
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<公式ロゴURL>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html: window.VIDEO でサイズ、fps、長さを設定。ガイドが指定するフォントを @font-face で宣言（それらのみ）。クレジットされたルックまたはフォーマットのスタイルモジュール（handdrawn.js、motion.js、sand.js、lyric.js、beat.js）またはルック4～8のルックモジュールを読み込みます（フォントは useFonts(LOOK.fonts) で読み込まれます）。
• ルックモジュールを使用する場合、シーンAPIとフォーマットのシグネチャシーンからシーンを構築します（references/looks.md）。LOOK.colors にブランドカラーを設定します。
• main.js: THEME、シーン関数、boot()。APIは references/kit-api.md にあります。
• 実際のロゴとワードマークファイルを使用します。
• ロゴマスコットを drawPixels スプライトとして描画します（サンドルックの場合はシルエットとして）。
• MINIS にミニキャラを登録し、drawMini で描画します。AI関連トピックの場合は minis-ai.js を読み込み、不足しているキャラクターのみを描画します。
• 早い段階でキャラクターラインナップの静止画を1つユーザーに見せ、確認を得てください。
• コピーと数字は main.js の上部に定数として保持します。2つのバージョン（保留中の数字、2言語）の場合、1つのURLパラメータで分岐し、それぞれを QUERY=lang=ko node render.mjs video … でレンダリングします。
• サウンド: main.js と同じシーンタイムで audio.json を書き込み、その後 uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav を実行します。ビートフォーマットの場合は、最初に曲に対して beats.py を実行し、そのグリッドでカットします。

4. QA

references/qa-checklist.md に従ってください。

1. node render.mjs stills <ミッドシーンタイムと各トランジションの直前直後のタイム> でスチルをレンダリングします。
2. uv run --with pillow python <skill>/scripts/contact_sheet.py stills <temp-folder> でレビューシートを作成し、確認します。
3. 見つけた問題を修正します。
4. CRF=25 node render.mjs video <Name>.mp4 でビデオを1回レンダリングし、トランジションフレームと2秒ごとのフレームを抽出し、ファイルサイズを確認します。サウンドがある場合は、オーディオストリーム、ラウドネス、キューのタイミングを確認します。
5. クレジットされたルックまたはフォーマットの場合、uv run --with pillow python <skill>/scripts/reference_sheet.py <key> <Name>.mp4 <temp-folder>/ref.jpg を実行し、確認し、すべてのシグネチャアイテムにチェックを入れます。見逃しがあれば修正し、再度レンダリングします。

5. 納品

• QAレンダリングが納品ファイルです。修正後にのみ再度レンダリングします。サイズ目標を超える場合は、CRFを27に上げるか、boot({ noise }) を下げます。
• stills/ やログなどの中間ファイルを削除します。
• MP4を SendUserFile で送信し（render と表示）、以下を報告します:
  • スペック: ルック、フォーマット、長さ、解像度、fps、ファイルサイズ、サウンド
  • クレジットされたルックまたはフォーマットのオリジナルソース（リンク付き）、およびシグネチャチェックリストの結果
  • シーンリスト
  • 使用した事実とソースリンク
  • 破棄した数字とその理由、確認が必要な項目
  • 再レンダリングコマンド（作業フォルダ内で実行する必要があることを記載）