anim-skill · エンドツーエンドアニメーション生成
テーマを入力すれば、動画が出力されます。画面はすべてコードで1フレームずつ描画（Remotion + React）され、素材ライブラリー、生成AI動画モデル、外部画像には一切依存しません。
スタイルはプラグイン、音声はプラグイン、フローは固定。 新しいスタイルを追加してもフローは変更不要、音声エンジンを変えてもフローは変更不要。
いつ使うか
- 「Xの解説アニメーションを作って」
- 「このドキュメント/教案を動画にして」
- 「この動画にナレーションをつけて」
- 「Xスタイルでリメイクして」
- 「この動画にちらつきや空シーンがないか確認して」
使わないケース：実写素材が必要な場合、人物の口元動画が必要な場合、3Dレンダリング（Blender系）が必要な場合。
入力：2つのモード、まず判定
| モード | トリガー条件 | 追加で行うステップ |
|---|---|---|
| A · テーマ駆動 | ユーザーがテーマ語または一文のみを指定 | 最初に調査（事実、数値、よくある誤解）を実施し、その後デザインへ |
| B · 文書駆動 | ユーザーがテーマ文書（教案、ホワイトペーパー、PPT原稿）をすでに提供 | 最初に精査と修正（データ補完、用語統一、視覚化不可能な段落のマーク）を実施し、その後デザインへ |
判定後はまず復唱してから着手：A/Bモード、N秒、どのスタイル、誰に向けて。この4つのうち不明な点が2つ以上あれば質問し、推測しない。
6つのフェーズ（順序はスキップ不可）
0 PREFLIGHT → 1 内容 → 2 絵コンテ → 3 構築 → 4 ナレーション → 5 検収・納品
↑ ↓
└── 手直し ←──────┘
0 · PREFLIGHT（一度だけ、2分）
node <skill>/scripts/preflight.mjs
node / npm / ffmpeg / ブラウザーを確認。利用可能な音声エンジンを表示。 いずれかが欠けている場合は事前に明確に説明し、レンダリング時に初めて気づかないようにする。
1 · 内容（A：調査 / B：精査）
出力：research.md：一文の主張、3～6つの裏付け事実、数字と出典、絶対に避けるべき誤った記述、視聴者の既知・未知。
- Aモード：事実確認が中心。すべての数字に出典が必要。見つからなければ「未確認」と明記し、決して捏造しない。
- Bモード：原文を優先し、補足のみ行い、修正はしない。原文で視覚化できない文は明示する（アニメーションは動作、比較、変化のみ描画可能）。
2 · 絵コンテ
出力：plan.md（形式は references/storyboard.md参照）：各カット1行——フレーム範囲、映像、動作プリミティブ、字幕。
必須条件（満たさない場合は書き直し）：
- 各カットには1つの主役があり、コンテンツ領域の高さの1/3以上を占める（グラフィック170px以上、大文字96px以上かつ1行300px以上）。
- 主役は最初または2番目のビートで登場。
- サイズは3段階のみ：主役≥170 / 脇役60–110 / 説明文22–30。
- 全編に1箇所以上の「ハイライト」（主張文、主役の登場、最後の決めの3択）を配置。装飾でごまかさない。
3 · 構築
node <skill>/scripts/scaffold.mjs <プロジェクトディレクトリ> --title "タイトル" --style <スタイルID>
スタイルのブリーフ（styles/index.json）に従って src/scenes/*.tsx を記述し、<Series> でシーンをつなぐ。
絶対ルール（違反するとレンダリングが破綻またはクラッシュします）：
- すべて
useCurrentFrame()から導出すること。Math.random()、Date.now()、setStateカウンターは禁止。 乱数が必要な場合は決定的に：hash(seed) = fract(sin(seed*127.1+311.7)*43758.5453)。 - すべての
interpolate()には必ず{extrapolateLeft:'clamp', extrapolateRight:'clamp'}を付けること。 1つでも欠けると、カット外のフレームが暴走します。 - CSS
transition/animation/@keyframesは禁止。アニメーションはinterpolateとspringのみ使用。 - 外部素材や重い依存（three.js / GSAP / 画像）はインポートしない。映像はSVGとCSSグラデーションで描く。
- SVGブラー関係のプリミティブは1フレームあたり12個以下、
filter: blur()要素は15個以下。それ以上だとレンダリングが10倍遅くなります。
4 · ナレーション（オプション）
node <skill>/scripts/srt.mjs <プロジェクトディレクトリ> # 絵コンテからSRTを生成
python <skill>/scripts/narrate.py <video> --provider edge|volc --voice <id>
- ナレーションがなくても納品可能（授業で先生が説明する場合など）。
- ナレーションをつける場合は先にSRTを出力してから合成。タイムラインはレンダリングフレーム番号から取得し、推定は行わない。
- エンジンはプラグイン。詳細は
references/voice.mdを参照。
5 · 検収と納品
python <skill>/scripts/qc.py <video> # 空シーン / オブジェクトサイズ
python <skill>/scripts/qc_flicker.py <video> # ちらつき / ハードカットの特定
2つのハード指標（詳細は references/qc.md）：
- 空シーン：コンテンツ領域内の最大オブジェクトが110px未満で45フレーム以上続く → 欠陥。80px未満 → 致命的。
- ちらつき：輝度の局所中央値からの偏差が6超（0/1のジャンプ） → 欠陥。
納品物リスト：<slug>.mp4、<slug>.srt、plan.md、research.md、src/（編集可能なプロジェクト）、README.md（変更方法、再レンダリング方法）。
スタイルプラグイン
styles/index.json に15種類のスタイルが組み込まれています。各スタイルは実行可能なブリーフ（背景色、墨色、7色、線幅、揺れ、発光、テクスチャ、フォント、雰囲気、投影時の可読性、適している用途）です。
呼び出し方：--style neon / --style paper / --style crayon …
新しいスタイルの追加：index.json に1エントリ追加し、styles/ にブリーフファイルを配置するだけで完了。フロー、スクリプト、テンプレートの変更は不要。 詳細は references/styles.md の拡張契約を参照。
スタイル選びのコツ：まず「投影時の可読性」（後ろの席から見えるか）で絞り、次に「雰囲気」で絞る。ペーパークラフト/クレヨンは幼児向け、ネオン/ミニマルはプロジェクターの映りが悪い教室向け。
音声プラグイン
内蔵2社：
| プロバイダー | 料金 | 必要なもの | 備考 |
|---|---|---|---|
edge | 無料 | なし | Microsoft Azure ニューラル音声、ややアナウンス調 |
volc | 0.0003 元/文字 | APPID + API Key | 豆包音声、より人間らしい。新規アカウントには無料枠あり |
新しいエンジンの追加：synthesize(text, voice) -> mp3 bytes を実装し、scripts/tts/<provider>.py に登録するだけ。narrate.py は変更不要。詳細は references/voice.md。
納品前自己チェック（1つずつチェック）
-
remotion renderの終了コードが0、ffprobeのフレーム数が設計フレーム数と一致 -
qc.pyに致命的項目なし。qc_flicker.pyで章のハードカット以外にスパイクなし - すべての
interpolateに clamp が設定されている（grep -c "interpolate("=grep -c "extrapolateLeft"） -
Math.random/Date.now/ CSS animation が存在しない - 字幕と映像が同期している（3箇所のビートフレームで確認）
- 中国語フォントがローカルに存在している（そうでなければレンダリングで文字化け）
クイックリファレンス
node scripts/preflight.mjs
node scripts/scaffold.mjs ./videos/my-film --title "タイトル" --style paper --seconds 20
cd videos/my-film && npm install
node <skill>/scripts/render.mjs . main out/my-film.mp4
node <skill>/scripts/srt.mjs .
python <skill>/scripts/narrate.py out/my-film.mp4 --provider volc --voice zh_female_cancan_uranus_bigtts
python <skill>/scripts/qc.py out/my-film-volc.mp4
詳細は references/ にある各ドキュメント：pipeline.md（各フェーズの展開）、storyboard.md（絵コンテテンプレート）、styles.md（スタイル一覧と拡張）、voice.md（音声と拡張）、qc.md（検収基準）、render-env.md（環境の落とし穴：Windows サンドボックス、TEMP、ブラウザーパス、ffmpeg パラメータ）。