mcpField
B
breakdown

breakdown

github.com/artemnovitckiiクリエイティブ・メディア75594 回インストール2 週間前に更新
リポジトリ

breakdown について

Claude Code向けのスキルで、6層にラベルを付けたスマートフォンの分解アニメーション動画を作成します。JSON仕様でラベルや見た目を指定でき、テンプレートを使って他の平面的な積層物にも形状を変更できます。

主な機能

  1. 016層のスマートフォン分解アニメーション
  2. 02ラベルと外観のカスタマイズ
  3. 03JSONによるレンダー仕様
  4. 04他の物体向けテンプレート
  5. 05PNGスナップショットでの確認

活用シーン

  1. 01スマートフォン部品の説明動画作成
  2. 02ラベル付き積層物アニメーションの作成
  3. 03組み立て・分解フレームの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/artemnovitckii/claude-animation-skills --skill breakdown

インストール後、Claude Code で/breakdownを入力して読み込まれたか確認します。

同梱ファイルbuild.pytemplate.html

詳細

/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  │
└──────────────────────┘

初回使用

このスキルのフォルダーは、Claude Code がスキルを読み込むときに表示する「Base directory」です。

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"

ffmpeg と Node が必要です。ヘッドレス Chrome で WebGL を使ってレンダリングします。

手順

  1. ラベル。 何の分解図を作るのかを尋ねます。モデルはスマートフォンなので、ラベルはユーザーが考える6層の名称を上から順に並べます。カバーガラス、ディスプレイ、フレーム、ロジックボード、バッテリー、背面です。ラベルは文字どおりでも（「バッテリー / 3,582 mAh」）、冗談でもかまいません（「バッテリー / いくらあっても足りない」）。
  2. 仕様。 <name>.breakdown.json（下記）を書きます。
  3. ビルド。 python3 "$SKILL_DIR/build.py" <spec.json> を実行します。3D レンダリングには約1.5分かかり、その大半は WebGL を待つ HyperFrames の処理時間です（sub_timeline_readiness_timeout 警告は通常発生します）。まず --snap 3.8 を指定して実行し、ラベルを確認します。
  4. 確認。 シートを確認します。すべてのラベルがスマートフォンの右側かつ赤い枠内に収まり、番号が上から下へ01から06の順に並んでいることを確認します。
  5. 引き渡し。 mp4 のパスを渡します。

仕様

{
  "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：上の層から順に、ちょうど6個を指定します。それぞれ ["Name", "short note"] の形式です。名前は約16文字まで、注記は約22文字までです。["", ""] にするとラベルは非表示になります。番号は画面上の順序で付加されます。
  • title / subtitle：大文字で表示されるヘッダーです。
  • time / date：ロック画面に表示する内容です。
  • accent：ラベル番号、引き出し線のドット、バッテリーのストライプに使う色です（16進数）。
  • hold（任意）：最後に追加する秒数です。out（任意）：出力パスです。

別のオブジェクト

仕様で変更できるのは文字であり、形状ではありません。タブレット、ノートパソコンの蓋、カードウォレット、スマートウォッチなど、別の平らな層状オブジェクトを使うには、"$SKILL_DIR/template.html" を仕様ファイルと同じ場所にコピーし、仕様に "template": "template.html" を追加します。コピーしたファイルでは、次のように設定します。

  • PW、PL、PR で輪郭（幅、長さ、角の半径）を指定します。slab(w, l, r, thickness, material) で丸みのある層を1つ作成し、tex(w, h, draw) でキャンバスのテクスチャをその層に描画します（バッテリーと画面を参照）。
  • 各 part(y) が1つの層です。y は分解時に浮かせる高さです。Y0 には組み立て時の高さを設定し、ORDER では最初に外れる層を指定します。
  • ANCHORS では、各ラベルの引き出し線の始点を指定します：[part index, [x, y, z] on that part]。 変更するたびに --snap 1.0,3.8 で確認します。1.0では組み立て状態、3.8では分解してラベルを付けた状態が表示されます。

デザインの要点

  • ラベルは最大6個にし、短く簡潔にします。注記は事実か、気の利いた控えめな冗談を1つにします。スローガンは使いません。
  • 暗い背景と右側のラベル列を維持し、テキストがスマートフォンに重ならないようにします。

コメント

Markdown 対応