JavaScript アニメーション（全てのフレームをコードで描画）
すべてのピクセルを計算によって生成する短編アニメーション動画を作成します。画像もフォントもライブラリも不要です。1つのHTMLファイルに全体を収め、ヘッドレスブラウザでフレームごとにシークしながらMP4にレンダリングします。
モデル
Claude Opus 5.5 で構築・テスト済みです。描画品質はモデルに大きく依存します。以下の自己チェックでは画像入力が必要です。現在のモデルが画像を見られない場合は、その旨をユーザーに伝え、視覚確認は未実施として扱ってください。他のモデルは未テストです。結果が粗い場合は、より強力なモデルを使うと改善する可能性があることを伝え、それが最高の結果であるとは主張しないでください。
デフォルトの流れ：確認のために止まらない
そのまま実行してください。適切なデフォルト値を選択し、納品時に代替案を提案します。開始前にユーザーに確認するのは、主題がまったくない場合のみです（例：「アニメーションを作って」のみ）。
- 依頼内容を読み解く。 形式（ストーリー、解説、詩、ループ、インタラクティブページ）、長さ（デフォルト15〜20秒。その時間内に主題を語れない場合のみ長くする）、アスペクト比（デフォルト1920x1080）をユーザーの発言から推測します。画面上のテキストはユーザーが依頼を書いた言語で書きます。バイリンガルにするのは、ユーザーが明示的に要求した場合か、視聴者が明らかに複数言語を使用する場合のみです。
references/forms.mdに各形式の短い構造が記載されています。 - 主題と視聴者から見た目とサウンドを計画する。 自分の言葉で説明します。その映像が何か、どのように見え、どのように聞こえ、なぜその主題と視聴者に適しているかを記述します。記入すべきリストはありません。
references/techniques.mdに材料が記載されており、スターターの値はプレースホルダーであって、ハウススタイルではありません。デフォルトでは、以前の作品の見た目やサウンドを再利用しないでください。異なる主題は異なる見た目とサウンドになるべきです。ユーザーが他の作品を参照した場合（「あのバイラル動画のように」）、その技法だけを借用し、キャラクター、ストーリー、構図は借用しないでください。 - ビートグリッド、ストーリーボード、ブロッキングをデータとして作成する（
references/storyboard.md）。まずテンポとセクションを決めます。次に、形式に合ったペースのショットリスト（references/storyboard.mdのペース表。各ショットにフレーミング、カメラワーク、アクション、該当するビート、サウンド、トランジションを含む）を作成します。次にブロッキング（ストーリーや解説の場合、一貫した世界のトラック）を設定します。これらをページにBPM、SECTIONS、SHOTS、EVENTSとして埋め込みます。シーン、カメラ、サウンドトラックはすべてこれらを読み取るため、映像と音声が構造的に同期します。ストーリーや解説の場合は、論理の整合性を確認します。すべてのビートが直前のビートによって引き起こされ、メタファーが映像に可視化されていることを確認します。 templates/starter.htmlから構築する。 このテンプレートはすでにストーリーボード駆動です。ワールド座標で描画される1つの世界、ショットごとのwithCamera、すべてのテキストと主要オブジェクトに対するclaim()が含まれています。プレースホルダーのパレットとデモワールドを置き換えます。コントラクトを維持します。draw(frame)はフレーム番号の純粋関数です。Math.randomやDateの代わりにrng(seed)/hash2()を使用します。- 自己チェックを行い、レンダリングする（次のセクション）。クリーンになるまで修正と再チェックを繰り返します。
- 納品する。 MP4 と HTML（ブラウザでライブ再生可能。クリックでサウンドが再生される）を納品します。その後、1〜2行で変更可能なオプションを提示します。別のルック、合成音楽ではなくAI音楽、異なる長さなど。
音楽には soundtrack スキルを使用します（デフォルト：Web Audio でページ内に合成。キーは不要）。
自己チェック（エージェントが実行。ユーザーは見ない）
node scripts/render.mjs piece.html sheet.jpg --sheet 1 # カット点を除いて毎秒1フレーム
node scripts/render.mjs piece.html shot --stills 90,300,610 # 特定の瞬間
node scripts/render.mjs piece.html piece.mp4 # フルレンダリング（＋サウンドトラック、ページにあれば）
node scripts/asset-audit.mjs piece.html # ゼロアセット証明：読み込みまたは埋め込みがあれば exit 1
node scripts/layout-check.mjs piece.html # テキスト同士の衝突、またはクレームされたオブジェクトとの重なりをチェック
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json # ビート上のカット、驚きなし
その後、references/qc.md に従って目視で2回のパスを実施します。
- ストーリーボード適合性：各ショットのアクションビートでの静止画を、その行と照合して確認します（アクターはブロッキングで指定された位置にいるか、指定されたアクションを実行しているか？）。
- ディレクターパス：毎秒2フレームのコンタクトシート（
--sheet .5）を、形式に対するペース、フレーミングの多様性、デッドフレーム、すべてのアクションにサウンドが付いているか、ルックが視聴者に合っているかで評価します。少なくとも2ラウンド実施します。変更したフレームは、毎回フルフィルムをレンダリングし直すのではなく、そのフレームの静止画をレンダリングします。
条件付きトリガー
| 状況 | 対応 |
|---|---|
| キャラクターが複数のシーンに登場する | シーンに入る前に、キャラクター単体（表情＋ポーズ）をレンダリングし、references/character.md に従って自分で確認する。キャラクターはアンカーポイント（口、手）を公開し、プロップがそれらにアタッチできるようにする。 |
| ユーザーが実在の人物、ペット、場所の写真を提供した | references/character.md の抽出方法を使って写真からキャラクターを構築する。写真はローカルに留める。決してアップロードしたり、公開物に含めたりしない。 |
| 実在人物作品であり、ユーザーがその場にいる | 納品時（それ以前ではない）に、主要なプロップや人物の写真を使って作品をより個人的なものにするオプションを提案する。 |
| 移動するキャラクターにテキストや吹き出しが追従する | placeFree(w, h, [above, right, left, below]) で配置し、既にクレームされているものから避ける。 |
| 画面上のテキストがラテン文字以外（中国語、日本語など） | CJKフォントスタックを使用する。すべてのグリフが正しくレンダリングされることを確認する（等幅フォントは欠落グリフを静かに置き換える。例：≈ が = になる）。 |
| ページがWebページとして公開される | HTMLを納品する。ライブプレビューループとクリック再生のオーディオを維持する。 |
よくある失敗を防ぐルール
- 時間の純粋関数。
requestAnimationFrameの状態、CSSアニメーション、物理演算の累積は禁止。各フレームをtだけから計算しないと、レンダリング結果とプレビューが一致しません。 - 手描きの線は「沸騰」し、ジッターしない。 フィルムが
LOOK.wobbleを設定する場合、うねりのシードは4フレームごとに変更します（LOOK.boil: 4）。毎フレーム変更するとノイズとして認識されます。毎秒約7.5回の変化は手描きとして認識されます。 - 体は丸みのある形状で構成する。 楕円や角丸長方形からフィギュアを構築します。頂点の少ない生のポリゴンは記号（五角形の手、箱型の胴体）として読まれます。
- ポーズが読み取れる角度を選ぶ。 横から見た長い胴体と短い手足は毛虫のように見えます。同じポーズを正面から見ると（短縮遠近法）、うつ伏せの赤ちゃんのように見えます。
- 後ろから前に向かって明示的に描く。 後ろ髪→体→首→顔→前髪。ほとんどの「何かが顔を隠している」バグは描画順序が原因です。
- カットとアクションのポイントを正確に合わせる。 すべてのカットとすべての目に見えるアクションは
EVENTS/CUESに含まれ、サウンドトラックはそれらに合わせて配置されます（soundtrackを参照）。 - テキストは決して衝突しない。 すべてのテキストボックスと主要オブジェクトをクレームします。
layout-checkは CLEAN を出力する必要があります。キャプションがモニターの端や顔に重なっていると粗雑に見え、コンタクトシートで目視しても見逃しがちです。
ファイル
templates/starter.html：描画ライブラリ（インク、イラスト、フラット/ブループリントプリミティブ、ラベル、ペーパー、フィルターレイヤー）、withCamera、claim/placeFree、およびストーリーボード駆動の2ショットスケルトン。scripts/render.mjs：MP4 / スチル / コンタクトシート。window.CUESとwindow.SCOREはオプション。フルレンダリング時には<出力>.cues.jsonを書き出し、SCOREサウンドトラックを多重化します（SCOREがない場合は無音のMP4）。キャンバスサイズは偶数である必要があります。scripts/asset-audit.mjs：読み込まれたり埋め込まれたりするものがないか、静的スキャン＋ライブネットワークチェックを実行。scripts/layout-check.mjs：フィルム全体のwindow.LAYOUTを読み取り、テキストの衝突とその時刻をリストアップ。references/storyboard.md：ビートグリッド、ショットリスト、ブロッキング、連続性、ストーリーの論理。references/techniques.md：テスト済みの描画技法（インク、スポットカラープリント、単線彫刻、言葉を形に、マーカーフィル、イラスト形状）。references/forms.md：形式ごとの構造メモ。references/character.md：キャラクターがいる場合のみ使用。references/qc.md：自己チェックリスト。
要件：Node 18以降、ffmpeg、Chrome（または npx playwright install chromium）、およびスクリプトを実行するフォルダ（スキルフォルダではなく、あなたのプロジェクト）に npm i playwright-core がインストールされていること。