1仕組みと動作原理
中核となるのは「短編全体を1つの自己完結型HTMLに集約する」点です。画面の全ピクセルをコードで計算し、画像、フォントファイル、外部ライブラリを一切排除します。ヘッドレスブラウザでフレームごとにシークしてMP4化し、「各フレームはフレーム番号の純粋関数である」という前提から再現性を確保します。
skills/javascript-animation/SKILL.md
Make short animated films where every pixel is computed: no images, no fonts to load, no libraries. One HTML file holds the whole piece; a headless browser seeks it frame by frame into an MP4.
ここでの処理内容：ゼロアセット規約により、成果物形態（単一ファイル）、検証方法（シーク可能）、レンダリングパイプライン（フレームごとのスクリーンショット → ffmpeg）が同時に決定されます。
デフォルトのワークフローは意図的に「途中で質問して停止しない」設計です。形式・尺・アスペクト比を推論した後は一気に処理を完走させ、納品時に修正可能な項目を提示します。完全にテーマが存在しない場合にのみ事前に質問します。
skills/javascript-animation/SKILL.md
Run straight through. Pick sensible defaults and mention alternatives at delivery. Ask *before* starting only if there is no subject at all (e.g. "make an animation", nothing else).
ここでの処理内容：やりとりのコストを最小化します。その代償として、自動チェック用スクリプトと2回の人手による目視確認で品質を担保します。
映像と音声は同一データによって駆動されます。ビートグリッド、絵コンテ表、ステージングをページ内のBPM/SECTIONS/SHOTS/EVENTSとして事前定義し、シーン、カメラ、BGMが同時にこれを読み取ることで、構造的な音画同期を実現します。
skills/javascript-animation/SKILL.md
These go into the page as `BPM`, `SECTIONS`, `SHOTS`, `EVENTS`: the scenes, camera and soundtrack all read them, so picture and sound line up by construction.
ここでの処理内容：「絵コンテ」を静止したメモから実行可能なデータへと変換します。starter.htmlの骨格はすでに絵コンテ駆動（storyboard-driven）になっています。
描画ルールは手描きアニメーション特有の失敗パターンを防止します。純粋なフレーム番号関数（rAF状態/CSSアニメーション/累積物理演算の禁止）、毎フレームではなく4フレームごとにシードを変更するラインボイル（線の揺らぎ）、楕円や角丸長方形を用いた身体造形、ポーズが最も認識しやすいアングルからの構図取り、前後描画順の明示的な規定を徹底します。
skills/javascript-animation/SKILL.md
- **Boil, don't jitter.** Change the wobble seed every 4 frames (`BOIL`), not every frame. Every frame reads as noise; ~7.5 changes a second reads as hand-drawn.
ここでの処理内容：「コード描画がなぜ素人っぽく見えるのか」という根本原因のリストであり、各項目が具体的な症状に対応しています。
自動チェックはスクリプトによる関門と2回の人手目視を組み合わせます。まずasset-audit / layout-check / sync-checkを実行し、その後に絵コンテ準拠確認（storyboard conformance）とディレクターパス（2fpsのコンタクトシート採点）を実施します。
skills/javascript-animation/references/qc.md
Scripts first: `asset-audit` CLEAN, `layout-check` CLEAN, `sync-check` passing (a remaining STARTLE is acceptable only on a deliberate stinger you can name). Then the two passes by eye below.
ここでの処理内容：qc.mdによってチェック体制がチェックリスト化され、フレーム、造形、絵コンテ準拠度、演出、動き、事実確認、アセットに細分化されます。
テキストの重なりは目視ではなくツールで判定します。starterのclaim()/placeFree()で各テキスト枠と主要オブジェクトのバウンディングボックスを登録し、layout-checkがサンプリングされたフレームごとに重なりとその発生時刻を検出・報告します。
skills/javascript-animation/SKILL.md
- **Text never collides.** Claim every text box and key object; `layout-check` must print CLEAN. A caption overlapping a monitor edge or a face looks careless, and eyes on a contact sheet miss it.
ここでの処理内容：qc.mdに動機となる実例（ディスプレイの端に重なった「sent」ラベルが2回の目視確認で見落とされた件）が示されており、プログラムによる判定基準の導入理由となっています。
人物写真は「ローカルでの参照」のみに制限されます。特徴抽出手法を用いて被写体をスタイル化されたキャラクターとして描き、アップロード、埋め込み、配布物への混入を明示的に禁止します。これは本スキルの唯一のプライバシー条項であり、厳格な制約事項です。
skills/javascript-animation/SKILL.md
Photos stay local: never upload them or put them in anything published.
ここでの処理内容：写真は視覚モデルが特徴を抽出するための「視覚的な参考入力」としてのみ機能し、生成物に含まれたり外部へ送信されたりしません。character.mdのステップ6にも同様の規定があります。
2コア機能
01ゼロアセット短編動画生成：ストーリー、解説、詩、ループ、絵本などの形式に応じたデフォルト尺30〜45秒、デフォルト解像度1080×1080の動画作成
02描画ライブラリ（starter.html）：水墨画、イラスト、版画、単線画、文字造形のプリミティブ、ラベル・用紙・フィルター層、withCameraカメラ制御、claim/placeFreeレイアウト登録
03MP4 / 静止画 / コンタクトシート描画（render.mjs）：Canvasのフレーム単位シーク → JPEGパイプ → ffmpeg H.264 yuv420p、必要に応じたCUESおよびオフライン音源の出力と多重化（mux）
04ゼロアセット検証（asset-audit.mjs）：HTMLの静的ルール走査と実行時ネットワークリクエスト監視を行い、外部読み込みや埋め込みを検出した場合はexit 1で終了
05レイアウト衝突チェック（layout-check.mjs）：window.LAYOUTを読み取り、テキスト枠同士の重なりや重要オブジェクトへの被りが発生した時間帯を出力
06キャラクターの一貫性とアンカーポイント：キャラクターの関数化、小道具配置用の口・手などのアンカー露出、シーンを跨いだ同一人物性の保持、写真からの誇張・スタイル化された特徴抽出
07絵コンテ/ビート/演出手法（storyboard.md）：トーンと構成設計、形式別カット尺テーブル、カット行フィールド、1つのワールドにおける複数カメラ配置、連続性とストーリーロジック
082段階のレンダリング自己検証：絵コンテ準拠確認（カットごとの静止画キャプチャと照合）およびディレクターパス（2fpsコンタクトシートを用いたテンポ、構図、デッドフレーム、音画同期の評価）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | playwright-core（脚本用它启动 Chrome 逐帧 seek 页面）；另需 Chrome 或 `npx playwright install chromium` |
| cli | ffmpeg（jpeg 管道编码 H.264、拼接触表、把离线渲染的 WAV 混进 MP4） |
| cli | 兄弟 skill 的同步检查：node ../soundtrack/scripts/sync-check.mjs（跨 skill 调用其 ffmpeg/ffprobe 分析） |
| network | 无执行期外部端点：交付页面的契约就是「不加载任何东西」，由 asset-audit 的静态规则 + 实跑网络记录双向证明 |
| package | Web Audio（浏览器内置的 OfflineAudioContext，用于离线渲染页面内合成的配乐；由 soundtrack 模板提供） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: node scripts/render.mjs piece.html sheet.jpg --sheet 1 / --stills 90,300,61
- 网络端点: 外部ネットワークアクセスの宣言: 本スキルのスクリプト自体は業務リクエストを送信しません。Playwrightはローカルのfile://ページを開き、ffmpeg/ffprobeはローカルファイルのみを読み込みます
- 本地工作目录: ファイルの読み書きと成果物出力: <out>.mp4（動画本編）、<out>-<frame>.jpg（静止画）、outで指定されたファイル名のコンタクトシート画像（render.mjs）
監査ノート： 評価対象＝スキル自身のディレクトリ：SKILL.md + 5つのリファレンス + templates/starter.html + 3つの付属スクリプト（render.mjs / asset-audit.mjs / layout-check.mjs）。スクリプトの動作は完全にローカルで完結：playwright-coreがfile://ローカルページを開いてコマごとにキャプチャ、ffmpegによるエンコードおよびコンタクトシート生成、window.LAYOUTを読み取ってレイアウト判定、ローカルのmp4/jpg/wavおよび一時ディレクトリへの書き込みを実施。外部ネットワーク送信、認証情報の読み取り、環境変数の読み取りはいずれも行われません（全リポジトリ正規表現検索でヒットなし）。ユーザー写真は読み込まれますが、ドキュメントでローカル参照のみ・アップロードおよび外部送信禁止が明記されています。留意点：① 実行前にユーザーのプロジェクトで`npm i playwright-core`（必要に応じて`npx playwright install chromium`）の実行が必要です（外部パッケージおよびブラウザバイナリはサプライチェーンの接点となり、バージョンはユーザー側で固定されます）；② 兄弟スキルの../soundtrack/scripts/sync-check.mjsを呼び出します（スキル間連携。サンプル基準に従いリスクとしてのみ記録し、判定レベルの引き上げは行いません）；③ AI生成物の著作権および事実の正確性はユーザーの自己責任となります（qc.mdは「画面上のすべての事実に言及可能な出典があること」を要求しますが、機械的な検証は行いません）。黄判定の特徴（定常的な外部ネットワーク送信なし）、橙判定の特徴（認証情報なし／素材の外部流出なし／サードパーティ製サービスバックエンドなし）を含まず、スキャン結果からもサンドボックス無効化、TLS無効化、自動検出の回避といった赤判定の挙動は確認されませんでした。
5二重目の独立検証
- [ok] 脚本是否真的无网络外发（蓝档的关键） — 三个 .mjs 逐个读过：render.mjs 只 spawn ffmpeg 与 playwright 打开 file:// 页面；asset-audit.mjs 的 live check 只监听请求并打印；layout-check.mjs 只 evaluate window.draw/LAYOUT。skill 目录内无 fetch/http 调用点。
- [ok] 是否有凭证/环境变量读取 — `process.env|API_KEY|TOKEN|SECRET|Authorization` 在本仓命中仅一处：skills/soundtrack/references/ai-music.md 的 $OPENROUTER_API_KEY（属 soundtrack）。本 skill 内零命中，credential_reads 为空成立。
- [ok] 是否有更高的触发条件被漏掉（红档特征） — `sandbox|automationcontrolled|no-verify|stealth|bypass|dangerously` 全仓零命中；浏览器以默认方式启动（`chromium.launch({ channel: 'chrome' })`，无 stealth 补丁、无关 TLS/沙箱开关）。
- [ok] SKILL.md 引用的脚本与模板是否都真实存在（有无示意命令） — 四条命令逐条核对到真实文件：scripts/render.mjs、scripts/asset-audit.mjs、scripts/layout-check.mjs、templates/starter.html 均在 skill 目录内；跨 skill 的 ../soundtrack/scripts/sync-check.mjs 在同仓兄弟 skill 目录内存在。无空引用。
- [ok] 「zero-asset」是否是可执行契约而非口号 — asset-audit.mjs 有 13 条静态规则（含 data: URI、@font-face、动态 import、base64 大块）与一次实跑网络记录，命中即 exit 1；qc.md 把 'asset-audit CLEAN' 列为交付前第一道门禁。契约可执行。
- [ok] 「照片只本地」的隐私声明是否两处一致且可定位 — SKILL.md 触发条件表内 'Photos stay local: never upload them or put them in anything published.'；character.md 第 6 步 'Photos are for looking at locally. Never upload them, embed them, or put them in anything published.' 两处同口径，无矛盾。
- [ok] 「每帧是帧号的纯函数」是否与 starter/render 实现相符 — starter.html 顶部注释写死契约（不许 Math.random/Date，用 rng(seed)/hash2，任意帧可单独渲染），render.mjs 只调用 window.draw(f) 取 dataURL、不做时间推进；两侧一致，声明属实。
6結論
最適な用途： 「素材ゼロ・純粋なコード生成」による短編動画の制作に最適：手描き風アニメーション、コード描画による解説・物語・詩・ループ、ユーザー写真を活用したスタイル化絵本（写真はローカル環境外に出ない）、シーク可能・再現可能・コマごとの検証が求められるレンダリングパイプライン。「絵コンテ → ビート → 音画同期 → 自己検証」を一連の再利用可能なエンジニアリングプロセスとして運用したいチームにも適しています。納品物は単一のHTMLファイル＋MP4で、HTMLはブラウザで直接再生可能です（クリックで音声開始）。
不向きな用途： 以下には適していません：① 実写映像、外部画像、フォントファイルなどの実物素材を必要とする作品（ゼロアセットが前提であり、外部素材を読み込むとasset-auditで不合格判定されます）；② データ駆動型グラフ（chart-animation）、純粋なキネティックタイポグラフィ（kinetic-typography）、3D/WebGL（webgl-animation-skills）；③ playwright-coreやブラウザがインストールできない環境、またはffmpegがない環境；④ 視覚能力を持たないモデルを使用しながら「視覚検証済み」を要求するシナリオ；⑤ 静止画のみで実機の動的な視聴感を完全に代替しようとする検証（qc.mdはコンタクトシートや静止画を主としており、動的な視聴感は実際に再生して確認する必要があります）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload javascript-animation.tar.gz
sha256:
Option B · Copy Guide for Agentcf575d5199b6a4ed…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit deb46e0eff.