/breakdown: あなたの製品、分解して、すべての部品にラベル付け
ユーザーが製品写真を添付したり、製品名を指定します。あなたはその製品が何でできているかを分析し、シンプルな3Dパーツ（サイズはミリメートル）として記述し、2フレームをチェックし、回転・分解・ラベル表示を行い、無音のMP4（約6秒）を出力します。
${CLAUDE_SKILL_DIR} はこのスキルのフォルダ（このSKILL.mdが置かれているフォルダ）です。環境で自動設定されない場合は、そのフォルダのパスを使用してください。すべてのファイルはユーザーの現在のフォルダ、またはユーザーが指定したフォルダに保存します。3Dページはインターネットから three.js を読み込むため、接続が必要です。
0. セットアップ確認
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
数秒かかります。このコンピュータがセットアップ済みか不明な場合に実行してください。"ready": true なら続行可能です。それ以外の場合は、表示される "fix" のコマンドを実行し、ユーザーに一度だけのインストールであることを伝えてください：python3 -m pip install playwright（ブラウザドライバ）、python3 -m playwright install chromium（Google Chrome または Edge がインストールされていない場合のみ、約150 MB）、python3 -m pip install imageio-ffmpeg（ffmpegがない場合のみ）。pipが「externally managed environment」エラーで拒否する場合は、プライベート環境を一度作成し、そのPythonをすべてのコマンドで使用します：python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg、その後必要に応じて ~/.animate-skills/bin/python -m playwright install chromium。Windowsでは python3 の代わりに py を使用してください。ブラウザが使用できない場合（例：Claudeアプリのサンドボックス）は、このファイルの末尾を参照してください。
1. 製品を分析する
- 写真から：全体的な形状、比率、色と仕上げ（光沢ガラス、ブラシ加工メタル、マットプラスチック、ファブリック）、および可視部分（カメラレンズ、ボタン、ポート）の配置。ブランドロゴは再現しないでください。
- 実際の主要部品を、片側からもう片側への組み立て順に：ラベル付けする価値のある5～9個の部品（カバー、スクリーン、フレーム、バッテリー、基板、チップ、スピーカー、ドライバー、クッションなど）。この種の製品に実際に含まれる部品を使用し、特定のモデルが不明な場合はそのカテゴリが常に持つ部品を使用し、奇妙な部品を作り出さないでください。
- このキットは単純な形状から製品を構築するため、層や硬いパーツで構成されるもの（スマートフォン、キーボード、ヘッドホン、スピーカー、コントローラー、時計、カメラ、家電製品）で最も効果を発揮します。柔らかい有機的な製品（靴、衣類、食品）はおもちゃのような見た目になります。ユーザーからそのような製品を依頼された場合はその旨を伝えてください。
- 実際のおおよそのサイズをmmで（スマートフォンは約72×150 mm、厚さ8 mm；フルキーボードは約440×130 mm）。
2. 仕様書を作成する
breakdown-<product>.json を保存します。各パーツは、製品内での実際の位置に配置された単純な形状です。level は、製品が分解する際にそのパーツが移動する距離を示します（0はそのまま、1は1ステップ移動、2は2ステップ；同じlevelのパーツは一緒に移動します；3.5のような小数点も使用可能で、負のlevelは反対方向に移動します）。例（examples/smartphone.json、短縮版）：
{
"title": "スマートフォンの内部",
"theme": "dark",
"parts": [
{"name": "カバーガラス", "shape": "slab", "size": [72, 0.7, 150], "radius": 10.5, "material": "glass", "y": 0, "level": 0},
{"name": "ディスプレイ", "shape": "slab", "size": [69, 0.7, 147], "radius": 9, "material": "black", "color": "#232428", "y": 0.8, "level": 1},
{"name": "フレーム", "shape": "frame", "size": [72, 7.4, 150], "radius": 10.5, "wall": 2.5, "material": "aluminum", "y": 0.9, "level": 2},
{"name": "バッテリー", "shape": "slab", "size": [62, 4, 86], "radius": 5, "material": "battery", "text": "Li-ion|5,000 mAh", "pos": [0, 2, 24], "level": 3},
{"name": "ロジックボード", "shape": "slab", "size": [62, 1, 44], "radius": 4, "material": "pcb", "pos": [0, 2, -48], "level": 3},
{"name": "カメラ", "shape": "lens", "radius": 4.6, "size": [9.2, 4.2, 9.2], "copies": [[-23.2, -62.2], [-23.2, -45.5], [-8, -53.8]], "y": 6.6, "level": 4},
{"name": "背面ガラス", "shape": "slab", "size": [72, 0.9, 150], "radius": 10.5, "material": "glass-tint", "color": "#3d5571", "y": 8.4, "level": 5}
]
}
座標系：size は [幅x, 高さy, 奥行きz]（mm）；y は上方向です。pos: [x, y, z]（または単に "y"）は、組み立てられた製品内でのパーツの底面中心の位置です。パーツが少し重なっても問題ありません。
形状：slab（角丸長方形プレート；radius = コーナー半径）、frame（穴のあるスラブ；wall 厚さ）、box（角が鋭い）、cylinder/disc（radius、高さ = size[1]）、ring（radius、inner）、lens（金属リング付きカメラレンズ）、sphere（size でスケーリング）、capsule、cone（radiusTop）、torus/cushion（radius、tube；平らに置かれ、穴は上向き：イヤークッション、Oリング、タイヤ）、band（radius、tube、arc：上部に直立したアーチ：ヘッドバンド、ハンドル、ケトルのグリップ）、tube（from: [x, y, z] から to: [x, y, z] へのロッド、radius およびオプションの radiusTo：フレームチューブ、椅子やテーブルの脚、支柱、ストロー）、lathe（profile：[[radius, y], ...] を垂直軸周りに回転：ボトル、カップ、ノブ、スピーカーコーン、ドーム；両側が描画されるため、点の順序は問いません）。arc（度単位、デフォルト360）は部分的な ring、torus、band、または lathe を作成します（+x側から始まります；rot で回転）。ring または torus に spokes: n を指定すると、n本のスポークとハブが追加されます（ホイール、ファン）。stretch: [x, y, z] はパーツをスケーリングします（楕円形のクッション：[0.85, 1, 1.15]）。rot: [x, y, z] 度でパーツを底面中心周りに回転させます（[90, 0, 0] はシリンダーを横向きにし、[0, 90, 0] はスラブを回転させて印刷テキストが反対側から読めるようにします）。
繰り返し：copies: [[x, z], ...]（または [x, y, z]）は同じパーツを複数配置します（カメラ、ネジ、ボタン）；コピーは {"pos": [x, y, z], "rot": [x, y, z]} とすることで個別に回転させることもできます（左右のイヤーカップが外向きになるなど）。grid: {"nx": 14, "nz": 5, "pitch": 19} は格子状に配置します（キーキャップ、セル、LED）。ラベルドットは最初のコピーに付きます。
マテリアル：glass（透明）、glass-tint（着色ガラス）、aluminum、steel、gold、copper、black、white、plastic（任意の color）、ceramic、rubber、foam、fabric（メッシュグリル）、wood、leather、pcb（緑色の回路基板）、chip、battery（暗いセル；text はその上に印刷されます、| は改行）、coil（銅のワイヤレス充電コイル）、lens、screen（発光ディスプレイ）、magnet、emissive（発光）。color（16進数）はほとんどのマテリアルに色を付けます。text はスラブの上面にラベルを印刷します。スタジオ照明は色を少し明るくします：最初のチェックフレームを写真と比較し、色が薄く見える場合は color を暗くしてください。暗い金属には steel または black（aluminum はシルバートーン用）を使用し、ほぼ黒い製品にはライトテーマを使用してパーツが暗い背景に埋もれないようにしてください。
ユーザーの写真：形状、色、レイアウトを正確にするために使用します。製品の平らな面（スマートフォンの背面や画面、カード、蓋）が真正面に写っている場合は、その面をパーツにマッピングすることもできます：トップレベルに "photo": "path/to/photo.jpg" を指定し、パーツに "texture": "photo" を指定し、その面に "crop": [x0, y0, x1, y1]（写真の0～1の範囲）を指定します。斜めからの写真や遠近感のある写真の場合は、色とレイアウトのみを使用してください。
ラベル：各パーツには name でラベルが付けられます（名前は短く保ってください：最大約14文字までがフルサイズで表示されます）；"label": "Other text" でテキストを変更し、"label": false で非表示にします（小さな装飾パーツに使用し、ラベルは5～9個のみ表示されるようにします）。
ビュー：製品はターンテーブル上で回転します：角度（ラジアン）は spin - spinSpeed × seconds で計算されます（デフォルトは0.95と0.07で、約3/4ビューで終了します）。角度0は製品の+z側をまっすぐ見ます；正の角度は製品の−x側がより見えるように回転します（1.57は−x端を見ます）。パーツが互いに隠れ合う長く平たいものの場合は、側面で終了するようにします：例："spin": 1.9, "spinSpeed": 0.06。elevation0/elevation1 はカメラの高さ（度）（デフォルト38→24）。zoom（デフォルト1、例：1.2）は製品が小さく見える場合に拡大します。長いまたは幅広の製品（自転車、ソファ、平らに置かれた靴）は縦長のビデオでは小さくなります："size": "1080x1080" または "1920x1080"、または zoom を使用してください。ラベルは一貫した順序を保ちます（最終的な分解ビューでのパーツの順序）。
積み重ねではない製品（ヘッドホン、ケトル、コントローラー）：上方向に分解すると縦長のビデオに最適です。そのため、製品の層が垂直に積み重なるように配置します。オーバーイヤーヘッドホンの場合は、製品を横向きに置き（カップの軸を垂直に）、片方のカップの層を上方向に分解します（クッション、メッシュ、ドライバー、基板、バッテリー、シェル）。バンドともう一方のカップは組み立てたままにします。正確な移動にはパーツごとに explode: [x, y, z] を使用します。
その他のフィールド：title（例：「内部の ...」）、subtitle、theme（dark デフォルト、light）、axis（"y" は上方向に分解、デフォルト；"x" または "z" は横方向に分解、ペンや横向きのボトルなどの長く細いものに適しています；横方向は縦長フレーム内で小さくなります）、gap（レベル間のmm、デフォルトは製品サイズの約19%）、パーツの explode: [x, y, z]（レベルではなく、そのパーツ独自の移動距離（mm））、apartAt（秒、デフォルト1.5）、size、duration（デフォルト約6～7秒、ラベルを読むのに十分）、fps。もう一つの例：examples/mechanical-keyboard.json。
3. 2フレームを確認する
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --still 0.5 --out breakdown-<product>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --still end --out breakdown-<product>-check2.png
--still は秒数、または end を指定します（パーツが近接している場合は、ラベルが表示される約3.5秒の時点で3フレーム目を追加します）。1枚目は組み立てられた製品：製品の形状、比率、色と一致していますか？2枚目はラベル付きの分解ビュー：パーツが適切な順序で並び、何かに隠れているものはなく、各ラベルのドットが対応するパーツにあり、ラベルが読みやすいですか？サイズ、位置、レベル、ビューを修正し、再度確認してください（通常2～3回のラウンドで完了します）。
4. ビデオをレンダリングする
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --out breakdown-<product>.mp4
約10～20秒かかります。3Dレンダリングが黒くなった場合は --no-gpu を追加してください。チェック画像を削除します。
5. 納品する
ユーザーにMP4のパスを提供します（環境でファイルを表示できる場合は表示します）。音声はありません。1行で、パーツは実際の製品の簡略化されたモデルであることを説明し、1つのバリエーション（ライトテーマ、パーツ名の変更など）を提案します。
ブラウザが使えない場合？（例：Claudeアプリのサンドボックス）
セットアップ確認でブラウザを実行できない場合は、代わりにアニメーションをページとして書き出します：python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --html breakdown-<product>.html。このページは任意のブラウザで再生できます（可能であればアーティファクトとして表示してください）。MP4を生成するにはClaude Codeをコンピューターで実行するか、ページをスクリーン録画する必要があることをユーザーに伝えてください。