teardownとは？
teardownは機械の仕組みを説明するためのClaude Codeのスキルです。バイクのエンジンや機械式時計のシミュレーターを頼むと、Claudeはthree.jsで1つのオフラインHTMLページを作ります。中央で機械が動き、周りのパネルが同じモデルからのライブの数値を表示し、ボタンで各サブシステムを単独表示したりカットアウェイしたりでき、誰も操作しないとページが自動でツアーを行います。同じコードで、プロシージャルなサウンドトラック付きの60 fpsのMP4をフレームごとにレンダリングします。
SKILL.mdが手法を定めています。実在の資料から始め、実寸を使い、クランク角のような1つの入力からすべての部品を動かし、機械を完成とする前にレンダリングした静止画のシートを確認します。完全な例が3つ付属します。クロスプレーンV8、Cessna 337の折りたたみ式メインランディングギア、そしてJansenの11本のリンク長から関節を解く20脚のStrandbeestです。
ランタイム、フレームキャプチャ、サウンドエンジン、レビューのルールはwhaleyxbt/claude-motionに由来し、READMEにもそう記されています。インストールはnpx skills add elvarofficial/teardownのあと、npm installとPlaywrightのChromiumです。Node 20+が必要で、動画と音声にはffmpegとPython 3を使います。MIT。
teardownは使う価値があるか？
teardownの本当の価値は、自動化よりも作例とルールにあります。V8は燃焼室の圧力モデルとともに点火順序1-8-4-3-6-5-7-2を追い、Cessnaのギアは32歯のピニオンにかかる201 mmのラックからちょうど180度回転し、Strandbeestのリンク機構ソルバーは67行です。どれも同じように分割されています。純粋な数学を1つのファイルに、形状を別のファイルに、コンソールのオーバーレイ、台本どおりの映像、ライブのページです。新しい機械には写せる明確なテンプレートがあります。
SKILL.mdは、スキルを使わなくても読む価値があります。写真やカットアウェイ図から作ること、実際の単位を使うこと、1つの入力ですべてを動かして動画、ページ、音声がずれないようにすること、そしてClaudeは動画を見られないので並べた静止フレームを確認させることを求めています。Windowsで遭遇したthree.jsの具体的な落とし穴も記録し、リンクプレビューが機能するようページを1 MB未満に保っています。
注意点：デモと出力の差です。READMEに載っているロボットのハチ、サソリ、タコはリポジトリに含まれておらず、未解決のissueではデモよりはるかに細部の少ない結果が報告されています。ほかの未解決のissueでは、サウンドのコードにハードコードされたffmpegのパス、ヘッドレスChromiumがWebGLを得られないためmacOSでキャプチャがタイムアウトする問題、sheet.mjsのパストラバーサル、?config=からのエスケープされていないキャプションが生成ページのinnerHTMLに届く問題が報告されています。最後の点はページをホスティングする場合に重要です。
作者1人による2日間のプロジェクトです。2026年10月30日に作成され、コミットは2つ、リリースはなく、スターは2,123です。汎用のモーションデザイン用の親ツールキットであるclaude-motionと比べると、teardownは範囲が狭く機構の表現に向いていますが、claude-motionのランタイムを引き継ぎながら、その修正を追うための上流へのリンクはありません。
真価を発揮する場面
機械工学の講師
4ストロークエンジンのバルブとピストンが連動する様子を学生に見せる
同梱のV8の例をビルドするか、それをもとに単気筒版をClaudeに頼みます。ページは授業中オフラインで動き、ガラス、断面、ソリッドのカットアウェイ表示でサイクルを示せます。
産業機器メーカーのテクニカルマーケティングライター
製品の機構を説明する20秒の動画を作る
製品のCAD図面からClaudeに機械を作らせ、capture.mjsで1920 x 1080のフレームをMP4にレンダリングし、run_sfx.pyで-14 LUFSにマスタリングした音を加えます。何度かのレビューを見込んでください。
リンク機構についてブログ記事を書く開発者
読者が操作できるインタラクティブなモデルを埋め込む
Strandbeestの例のリンク機構ソルバーとステージから始め、新しいリンク長に差し替え、単一のHTMLファイルを公開します。未解決の注入issueが修正されるまで、URLで渡すキャプションはエスケープしてください。
導入前に確認すること
- 導入
- npx skills add elvarofficial/teardown -g -a claude-codeのあと、スキルのフォルダでnpm installとnpx playwright install chromiumを実行します。Node 20+、動画にffmpeg、音声にPython 3が必要です。node sims/build.mjs v8-liveで作例のページをビルドします。
- 連携
- Claude Codeのスキル。three.js、esbuild、PlaywrightのChromium。エンコードにffmpeg。CC0のFreesoundサンプルを使うPythonのプロシージャルサウンド。
- データとプライバシー
- すべてローカルでレンダリングされ、ページは完全にオフラインです。Claude Codeのセッション以外には何も送られません。MIT。
- 大規模利用時のコスト
- 公開されていません。機械ごとに構築とレビューでClaude Codeの利用料がかかり、レンダリ ングにはGPU対応のブラウザが必要です。
- 制限
- 未解決のissueが9件あり、生成ページでの?config=経由のスクリプト注入とsheet.mjsのパストラバーサルを含みます。SKILL.mdによれば内蔵GPUでは15 fpsまで落ちることがあります。Codexなど他のエージェントについては記載がありません。
良い点
- 物理的な裏付けのある完全な作例の機械が3つ
- 写せる明確な機械ごとのファイル構成
- 機械ごとに1 MB未満のオフラインHTMLページ1つ
- 同じタイムラインでページ、動画、音声を動かす
- Claudeが読める静止画シートを軸にしたレビューのループ
気になる点
- READMEのデモは同梱されず、出力は細部が少ないとの報告
- 生成ページとsheet.mjsに未解決のセキュリティissue
- macOSでのキャプチャとffmpegのパスの問 題が報告されている
- 作者は1人、コミット2つ、リリースなし
おすすめの人
Claude Codeを使い、実在の機構のインタラクティブなカットアウェイ解説が欲しく、最初の下書きから繰り返し改善する気のあるエンジニア、教師、テクニカルライター。
teardownの代替
teardown：よくある質問
- teardownは使う価値があるか？
- 優れた3つの作例と、さらに作るための堅実な手法があります。ただし1行の依頼からClaudeが作るものは、デモに及ばない可能性が高いです。 評価は5点満点中3.5点です。
- teardownの料金は？
- MITで無料です。機械の構築にはClaude CodeのプランかAPI利用を使い、レンダリングはローカルで動きます。
- teardownの欠点は？
- READMEのデモは同梱されず、出力は細部が少ないとの報告; 生成ページとsheet.mjsに未解決のセキュリティissue; macOSでのキャプチャとffmpegのパスの問題が報告されている; 作者は1人、コミット2つ、リリースなし.
- teardownは誰に向いているか？
- Claude Codeを使い、実在の機構のインタラクティブなカットアウェイ解説が欲しく、最初の下書きから繰り返し改善する気のあるエンジニア、教師、テクニカルライター。
- チームや本番環境でteardownを使うと費用はいくらか？
- 公開されていません。機械ごとに構築とレビューでClaude Codeの利用料がかかり、レンダリングにはGPU対応のブラウザが必要です。
- teardownは企業データを扱っても安全か？
- すべてローカルでレンダリングされ、ページは完全にオフラインです。Claude Codeのセッション以外には何も送られません。MIT。
- teardownの代わりになるものは？
- 当サイトでレビューした中で最も近い代替はAnatomy 、 motionmaxxingです。
回答確認日：2026年11月5日