アニメーション図解作成 は何をしますか？
小さなJSON記述（グリッドセル内のノード、番号付きステップ、グループ）を書くと、レンダラーがレイアウトをチェックし、90フレームを<name>.gif、<name>.mp4、<name>.png、<name>.check.jsonとして出力します。座標を直接指定する必要はありません。
$SKILLはこのファイルが置かれているフォルダです（Claude Codeでは${CLAUDE_SKILL_DIR}）。Node 22以上、Google Chrome、ffmpegが必要です。マシンごとに一度だけ：npm install --prefix "$SKILL" を実行してください。ANIMATED_DIAGRAM_RENDER_LOCKが設定されている場合、すべてのレンダリングはそのロックディレクトリを待つため、一度に一つのChromeだけがレンダリングを行います。
ワークフロー
1. テーマを最初に設定
図解を配置する場所の隣にdiagram-theme.jsonがないか確認します（renderはその場所、次に作業フォルダを確認します）。ない場合は、他の作業を始める前にテーマを設定します。ユーザーにどれがよいか尋ねてください：
node "$SKILL/scripts/cli.mjs" theme --preset machine-room-dark # または light, dark
node "$SKILL/scripts/cli.mjs" theme --brand "#E4572E,#17BEBB" --mode light
node "$SKILL/scripts/cli.mjs" theme --from-image logo.png --mode dark
node "$SKILL/scripts/cli.mjs" theme --check my-theme.json # 手動編集したテーマを検証
各コマンドはdiagram-theme.jsonを書き出し（--outで変更可）、色とそのコントラスト比を表示します。コントラスト比（すべてのテキスト色とその背景で4.5:1）またはダークルールを満たさないテーマは拒否され、最も近い合格色が提案されます。詳細：reference/theme-setup.md
2. 内容
ユーザーのトピックまたはソーステキストから、ノードと番号付きステップをドラフトし、ステップリストをチャットで表示します：
1. ユーザー → DNS: DNSルックアップ
2. DNS → ユーザー: 最も近いエッジIP（応答）
3. ユーザー → エッジサーバー: GET /logo.png
ユーザーが確認するまで待ちます。すべての矢印は主張です：レンダリング前にそれぞれをソースと照合してください。
3. JSON
reference/templates.md（flow-grid、comparison、stack、map）からテンプレートを選び、reference/diagram-format.mdに従って<topic>.jsonを記述します。最も近い例から始めてください：examples/cdn.json（flow-grid）、examples/cache-strategies.json（comparison）、examples/web-stack.json（stack）、examples/anatomy-of-an-ai-app.json（map）。ノードはセル単位でのみ配置します。offsetは数ピクセルの最終手段としての微調整にのみ使います。
ユーザーが一つの経路ではなく、システム全体を一枚のページに収めたい場合はマップを選びます：12～25ノードを最大6色のゾーンに分け、図の横に凡例を配置。マップでは配置がすべてを決めます：最も多くの矢印が触れるノードを中央に置き、そのノードが通信する対象を隣に配置し、ほとんどのステップは隣接ノード間で完結するようにします。短いtitleとsubtitleを指定してください。
4. アイコン
node "$SKILL/scripts/cli.mjs" icons # ライブラリ：ユーザー、ノートPC、電話、ラック、タワー、データベース、キャッシュ……
ノードにライブラリにないアイコンが必要な場合、reference/icon-rulebook.mdに従って図解の隣に./diagram-icons/<name>.jsとして描画し、使用前に2倍サイズで既存のアイコン2つと並べてレビューします：
node "$SKILL/scripts/cli.mjs" icon-sheet <name> laptop rack --out sheet.png
5. レンダリング
node "$SKILL/scripts/cli.mjs" render <topic>.json --out out/ # --theme <preset|file>, --style filled|line|duotone
終了コード：0 正常終了 · 2 チェック失敗（静止画と<topic>.check.jsonは書き出されますが、GIFはなし） · 3 テーマ未設定 · 1 入力エラー（図解またはテーマのエラーがJSONパス付きで表示されます）
終了コード2の場合、out/<topic>.check.jsonを読みます。各失敗にはcode、関係するids（ノードID、ステップ矢印はs<index>）、detailが含まれています。JSONを修正し（セルの移動、ラベルの短縮、ステップの分割、行数の削減）、再度レンダリングします—最大3ラウンド、マップの場合は最大6ラウンド（ハブを移動すると多くの矢印を一度に整理できます）。コード別の修正方法はreference/templates.mdにあります。その後PNGを開いて自分で確認してください：チェックは衝突を検出しますが、読み取り順序の不自然さは検出しません。
6. レポート
ユーザーにGIF、MP4、PNGのパス、GIFのサイズ（目安：1080×1350で約1MB、ポスターサイズで3MB）、チェックサマリー（警告を含む）を報告してください。