Breakdown skill

/breakdown

┌──────────────────────┐
│ PHONE / EXPLODED VIEW│  mono header
│   ▱▱▱▱▱▱ ──── 01 Glass
│   ▱ 9:41 ▱ ── 02 Screen
│   ▱▱▱▱▱▱ ──── 03 Frame │  layers lift apart, the phone turns slowly
│   ▱▱▱▱▱▱ ──── 04 Board │  leader lines draw out to the labels
│   ▱▱▱▱▱▱ ──── 05 Battery
│   ▱▱▱▱▱▱ ──── 06 Back  │
└──────────────────────┘

First use

This skill's folder is the "Base directory" Claude Code shows when it loads it.

SKILL_DIR="<base directory of this skill>"
KIT=$(python3 -c 'import os,sys;print(os.path.realpath(os.path.join(sys.argv[1],"..","..","kit")))' "$SKILL_DIR")
[ -s "$KIT/node_modules/three/build/three.module.js" ] || bash "$KIT/setup.sh"

Needs ffmpeg and Node. It renders with WebGL in headless Chrome.

Steps

1. Labels. Ask what the breakdown is for. The model is a phone, so the labels are the user's take on its six layers, top first: the cover glass, the display, the frame, the logic board, the battery and the back. Labels can be literal ("Battery / 3,582 mAh") or a joke ("Battery / never enough").
2. Spec. Write <name>.breakdown.json (below).
3. Build. Run python3 "$SKILL_DIR/build.py" <spec.json>. A 3D render takes about 1.5 minutes, most of it HyperFrames waiting on WebGL (a sub_timeline_readiness_timeout warning is normal). Run with --snap 3.8 first to check the labels.
4. Check the sheet: every label sits right of the phone and inside the red frame, and the numbers run 01 to 06 from top to bottom.
5. Hand over the mp4 path.

Spec

{
  "title": "Phone", "subtitle": "Exploded view",
  "labels": [["Cover glass", "toughened · 0.6 mm"], ["OLED display", "6.3 in · 120 Hz"], ["Titanium frame", "grade 5 · 7.8 mm"],
             ["Logic board", "3 nm chip · 8 GB"], ["Battery", "3,582 mAh"], ["Back glass", "matte · magnet ring"]],
  "time": "9:41", "date": "Saturday 1 November", "accent": "#F08A5D"
}

• labels: exactly 6, top layer first, each ["Name", "short note"]. Names up to about 16 characters, notes about 22. ["", ""] hides a label. The numbers are added in screen order.
• title / subtitle: the header, shown in capitals.
• time / date: what the lock screen shows.
• accent: label numbers, leader dots and the battery stripe (hex).
• hold (optional): extra seconds at the end. out (optional): the output path.

Another object

The spec changes words, not shapes. For another flat, layered object (a tablet, a laptop lid, a card wallet, a smartwatch), copy "$SKILL_DIR/template.html" next to the spec and add "template": "template.html" to the spec. In the copy:

• PW, PL, PR set the outline (width, length, corner radius). slab(w, l, r, thickness, material) makes one rounded layer, and tex(w, h, draw) paints a canvas texture onto it (see the battery and the screen).
• Each part(y) is one layer; y is how high it floats when exploded. Y0 holds the heights when assembled, and ORDER says which layer leaves first.
• ANCHORS says where each label's leader line starts: [part index, [x, y, z] on that part]. Check with --snap 1.0,3.8 after every change: assembled at 1.0, exploded and labelled at 3.8.

Taste

• Six labels at most, short and plain. Notes are facts or one dry joke, never slogans.
• Keep the dark backdrop and the right-hand label column; the text stays clear of the phone.