/breakdown：您的產品，拆解開來，每個零件都標上名稱
使用者提供產品照片及/或產品名稱。您需判斷其構成，以簡單的 3D 零件（單位：公釐）描述，檢查兩幀畫面，渲染出產品旋轉、分解並自動標示的動畫，最後回傳一段無聲 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 因「外部管理環境」而拒絕，請先建立一個專用環境，並在後續所有指令中使用該環境的 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 app 的沙箱），請參閱本檔案結尾的說明。
1. 分析產品
- 從照片中判斷：整體形狀、比例、顏色與表面處理（亮面玻璃、拉絲金屬、霧面塑膠、布料），以及可見細節的佈局（相機鏡頭、按鈕、連接埠）。請勿重現品牌標誌。
- 其真實的主要零件，從一側到另一側的組裝順序：5-9 個值得標示的零件（蓋板、螢幕、框架、電池、電路板、晶片、喇叭、驅動器、緩衝墊……）。請使用該類產品實際會有的零件；若不確定特定型號的內部構造，則使用該類別產品普遍具備的零件，切勿憑空想像特殊零件。
- 此工具以簡單形狀建構產品，因此最適合由層狀和硬質零件構成的產品（手機、鍵盤、耳機、喇叭、控制器、手錶、相機、家電）。柔軟、有機的產品（鞋子、衣物、食物）呈現效果會像玩具：若使用者要求製作此類產品，請事先說明。
- 實際近似尺寸（單位 mm）：手機約 72 x 150 mm，厚度 8 mm；全尺寸鍵盤約 440 x 130 mm。
2. 撰寫規格檔
儲存為 breakdown-<product>.json。每個零件都是一個簡單形狀，放置在組裝產品中的實際位置；level 表示產品分解時該零件的移動距離（0 固定不動，1 移動一步，2 移動兩步；相同 level 的零件會一起移動；小數如 3.5 也可使用，負數 level 則往反方向移動）。範例（examples/smartphone.json，已簡化）：
{
"title": "Inside a smartphone",
"theme": "dark",
"parts": [
{"name": "Cover glass", "shape": "slab", "size": [72, 0.7, 150], "radius": 10.5, "material": "glass", "y": 0, "level": 0},
{"name": "Display", "shape": "slab", "size": [69, 0.7, 147], "radius": 9, "material": "black", "color": "#232428", "y": 0.8, "level": 1},
{"name": "Frame", "shape": "frame", "size": [72, 7.4, 150], "radius": 10.5, "wall": 2.5, "material": "aluminum", "y": 0.9, "level": 2},
{"name": "Battery", "shape": "slab", "size": [62, 4, 86], "radius": 5, "material": "battery", "text": "Li-ion|5,000 mAh", "pos": [0, 2, 24], "level": 3},
{"name": "Logic board", "shape": "slab", "size": [62, 1, 44], "radius": 4, "material": "pcb", "pos": [0, 2, -48], "level": 3},
{"name": "Cameras", "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": "Back glass", "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（十六進位色碼）可改變多數材質的色調。text 可在板形零件的頂面印製標籤。攝影棚燈光會使顏色略微變亮：將第一張檢查幀與照片比對，若顏色顯得褪色，請調暗 color。深色金屬請使用 steel 或 black（aluminum 適用於銀色調），對於幾乎全黑的產品，請使用 light 主題，以免零件在深色背景中消失。
使用者的照片：用於正確取得形狀、顏色和佈局。若照片顯示的是產品正面（手機背面或螢幕、卡片、蓋子），您也可以將其貼圖到該零件上：在 JSON 頂層加入 "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，因此最終約呈四分之三側視圖）。角度 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（例如「Inside a ...」）、subtitle、theme（預設 dark、light）、axis（"y" 為向上分解，為預設值；"x" 或 "z" 為側向分解，適用於長條形物體，如筆或側放的瓶子；側向分解在直立畫面中會顯得更小）、gap（層級之間的距離，單位 mm；預設約為產品大小的 19%）、零件上的 explode: [x, y, z]（零件自身的移動距離，單位 mm，用以取代 level）、apartAt（秒數，預設 1.5）、size、duration（預設約 6-7 秒，足夠閱讀標籤）、fps。第二個範例請參閱：examples/mechanical-keyboard.json。
3. 檢查兩幀畫面
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 秒標籤出現時額外檢查第三幀）。第一幀為組裝完成的產品：它看起來像實際產品嗎（形狀、比例、顏色）？第二幀為附有標籤的爆炸視圖：零件順序合理、無零件被其他零件遮蔽、每個標籤的圓點正確對應其零件、標籤清晰可讀。請修正尺寸、位置、層級或視角，然後再次檢查（通常需要兩到三輪調整）。
4. 渲染影片
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --out breakdown-<product>.mp4
約需 10-20 秒。若 3D 渲染結果為全黑，請加入 --no-gpu 參數。刪除檢查用的圖片。
5. 交付
提供使用者 MP4 檔案的路徑（若您的環境可顯示檔案，請直接展示）。此影片無聲音。用一句話說明這些零件是其產品的簡化模型，並提供一種變化版本（例如 light 主題、重新命名某個零件）。
此環境沒有瀏覽器？（例如 Claude app 的沙箱）
若環境檢查無法啟動瀏覽器，請改為將動畫輸出為網頁：python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<product>.json --html breakdown-<product>.html。該網頁可在任何瀏覽器中播放（若可行，請以 artifact 形式展示）。告知使用者，若要產生 MP4 則需在電腦上使用 Claude Code，或直接對網頁進行螢幕錄影。