teardownはなぜスキルの見本なのか 動かして確かめた

teardownは何をするスキルか

teardownは、実在する機械を「分解できる3Dシミュレーター」として1枚のHTMLに組み立てるスキルです。エンジンや飛行機の脚、歩く機構などを、ボタンで部品ごとに開いたり断面にしたりしながら動かせます。周りの計器やグラフは、部品を動かしているのと同じ計算から数字を出します。

誰も触らなければ、ページはカーソルを動かして自分で見どころを案内する作りです。クリックやドラッグで操作が見る人に移り、25秒何もしないと案内に戻ります。同じ台本から60fpsの動画をコマ単位で書き出し、同じ時刻表に合わせて音も作ります。

cccskillsでは、このスキルを「cccskillsのおすすめ」の1本目に選びました。目を引く見た目より、中身の書き方が良いからです。以下で、見本と言える理由と、手元で確かめた結果を順に書きます。

見本と言える理由1：数字の出どころが1つしかない

teardownの中心にあるルールは「実寸の数字を先に集め、1つの入力ですべてを動かす」です。エンジンならクランク角、飛行機の脚なら0から1の伸縮量、ストランドビーストなら風速が入力になります。部品の姿勢もパネルの数字もグラフも、その入力の関数として計算します。

こうすると、画面の数字と動きが食い違うことが原理的に起きません。手でキーフレームを打たないので、操作できるページと録画した動画と音もずれません。SKILL.mdは、検算の例まで書いています。

Cessnaの例では、32歯×モジュール4mmでピッチ円直径は128mm。その半周が201mmのストロークになる。

手元で計算すると、π×128÷2は201.06mmでした。コードの定数もpinionR: 0.064（32歯、モジュール4mm）とstroke: 0.201で、文書と実装が一致しています。

ストランドビーストの作例は、テオ・ヤンセンの13個の寸法（a=38からm=15まで）を原典どおり持っています。クランクを720コマ回して各リンクの長さを測り直すと、ずれは最大でも1e-14でした。足先の上下幅は22.5、地面から1単位以内にいる区間はクランク155°分で、コードの注記「約155°」と合っています。

見本と言える理由2：作例がそのまま教科書になっている

スキルには、V8エンジン、セスナ337の主脚、ストランドビーストの3台が完全な形で入っています。3台とも同じ分け方で書かれており、新しい機械は一番近い作例のコピーから始める決まりです。

ファイル	役割
kin.js など	計算だけ。実寸と1つの入力から、姿勢と表示の数字を出す。three.jsを含まない
engine.js など	形。コードで部品を作り、update(input)で姿勢を決める
console.js	計器やグラフの重ね表示。フレームの状態から描き直す
film.js	台本と、時刻だけで1コマを描くrender(t)
live.js	操作できるページ。放っておくと台本どおりに自動で案内する
score.py	台本の時刻に合わせた音

計算と描画が分かれているので、計算だけをNodeで検算できます。render(t)は時刻だけで1コマを描く純粋な関数で、乱数や時計を使わない決まりです。撮影用のコードを検索するとMath.randomとDateは1つも無く、performance.nowはリアルタイム操作用のlive.jsにしかありませんでした。

見本と言える理由3：見られない前提で確認の手順を書いている

SKILL.mdには「あなたは動画を見られない。見られるのはコマだけだ」と書かれています。そのうえで、見せ場ごとの静止画を並べたシートを作り、チェックリストと照らし、直して撮り直す手順を決めています。終わりにしてよい条件は「全部通して何も見つからなくなったとき」です。

チェックリストは具体的です。触れるべき部品が触れているか、端から60px以内に大事なものが無いか、1080の画面で文字が34px未満になっていないか、といった項目が並びます。発光は1.0未満、大きな金属面は粗さ0.45以上など、three.jsで見た目が崩れる場面の数値も書いてあります。

もう1つ良いのは、作者が実際に踏んだ落とし穴を残している点です。WindowsのANGLEでsmoothstepの引数が逆だと0になる、NaNが1ピクセル出るとブルームで画面全体が黒くなる、といった5件が理由つきで並んでいます。

手元で動かして確かめたこと

Apple M2 UltraのMacで、READMEの手順どおりに試しました。

• 6本（3台×操作用・録画用）のビルドは合計0.4秒。どのHTMLも800KB前後で、SKILL.mdの「1MB未満」を守っている
• 3台とも、台本の見せ場ごとに静止画を撮ってパネルと動きを照合。V8は12.1秒から700→2400rpmに上がり、点火の間隔も詰まる。セスナは格納完了でストローク201mm・180°を示す
• V8の録画は1920×1080・60fpsの26秒で、1560コマを81秒で撮影。音はラウドネス−14.0LUFS、トゥルーピーク−2.2dBFSで、SKILL.mdの基準どおり

Macでは1つ引っかかりました。Playwrightが既定で使う軽量版のChromiumではWebGLが作れず、撮影が60秒で止まります。環境変数CHROMIUMに通常版のChromiumを指定すると、Metal経由でGPUを使って撮れました。撮影のたびに使ったGPUを表示する作りなので、原因はすぐ分かります。

見つかった穴：作例が自分のルールを1つ破っている

SKILL.mdは「見せ場の時刻はすべてtimeline.jsonに書き、音も同じファイルを読む」と決めています。ところが、3台のtimeline.jsonには動画の長さしか入っていませんでした。V8の音を作るscore.pyは、台本の時刻をCLICKS = (3.5, 6.9, …)のように手で書き写しています。

今は値が一致しているので、音はずれていません。ただ、台本の時刻を変えると音だけが取り残されます。見せ場ごとの静止画を撮る--stills beatsも、最後の確認に使うsheet.mjsも、見せ場の時刻が無いため1コマか0コマしか出ませんでした。今回は台本から時刻を拾って直接指定し、確認を続けました。

見本として勧める以上、この穴も書いておきます。自分のスキルに取り入れるときは、ルールだけでなく作例がそれを守っているかも確かめてください。

いつもの実行検証にかけるとどうなるか

cccskillsの実行検証は、同じ依頼を「スキルなし」と「スキルあり」のClaude Codeに解かせて比べます。検証用の箱にはNode.jsとPythonの標準ライブラリしか無く、パッケージの追加もインターネットも使えません。teardownが頼るthree.js、esbuild、Playwright、ffmpegはどれも動かない環境です。

この条件で課題を自動で作ると、次の2問になりました。

• 単気筒エンジンの分解できるシミュレーターを、外部ファイルなしの1枚のHTMLで作る
• ストランドビーストの脚を、付属のリンク表から正確に解いて歩かせる

同じ2問を、手元でスキルなしとスキルありに1回ずつ解かせました。回答者は画面を見られない設定なので、出来上がったページは筆者がブラウザで開いて比べています。

エンジンの課題は互角でした。どちらも90°でのピストン位置を30.875mm（手計算と一致）と出し、断面表示、カメラ、自動案内まで動きました。スキルありは「明るい背景に強調色1つ」というSKILL.mdの好みに沿った画面になっています。ただ、スキルなしの画面も十分に見やすく、勝ち負けは付けにくい出来です。

差が出たのはストランドビーストです。自動で作られたリンク表は、結線が2か所入れ替わっていました（dとe、hとi）。表どおりに組むと、筆者の計算では360°のうち264°で機構が組み上がりません。

スキルなしは表どおりの結線のまま、解ける組み合わせを総当たりで探しました。足の軌跡は底が平らにならず、最下点から1単位以内にいるのはクランク29°分だけでした。接地の判定を6単位まで緩めて、つじつまを合わせています。

スキルありは、SKILL.mdとストランドビーストの作例を読んだうえで、表の足の三角形が原典と違うと指摘しました。原典どおりの結線で組み、最下点から1単位以内の区間は155°と、作例と同じ軌跡になりました。「想像ではなく参照から作る」というルール1と、作例の存在が効いた形です。

つまり、道具が使えない箱の中でも、書き方の部分はちゃんと効きました。一方で、teardownの強みである撮影と見直しの手順は、この検証では測れていません。実行検証の点数だけでこのスキルを判断すると、良さの半分を見落とします。

自分のスキルに取り入れるなら

teardownから持ち帰れる書き方は、機械の3Dに限りません。

• 正しさの元になる数字を1か所に集め、表示も動きもそこから計算させる
• 作例を2つ以上、同じ分け方で入れておく。新しい仕事は一番近い作例のコピーから始めさせる
• モデルが自分の目で確かめられない出力は、確かめられる形（静止画、数値、ログ）にする手順を書く
• 終わりにしてよい条件を書く。「全部通して何も見つからなくなるまで」のように
• 踏んだ落とし穴は、理由と直し方を添えて残す

まとめ

teardownは、出来上がる3Dの見栄えより、そこに至る書き方が優れたスキルです。数字の出どころを1つにし、作例で型を示し、見られない出力を見られる形にして確かめさせています。手元の検証でも、主要な数字と見た目はSKILL.mdの記述どおりでした。

作例のtimeline.jsonが空という穴はありますが、直し方ははっきりしています。スキルを書く人は、一度SKILL.mdを通して読んでみてください。