site-motion は何をしますか？
Proとマークされたシーン、またはこれらのノートに名前が記載されているが
scenes/に存在しないシーンは、site-motion Proシーンです。ノートに書かれていることを参考に学習し、ここにあるシーン（site-motion list）から構築してください。
シーンとは時間の純粋関数です。render(t)は、以前の状態に関係なく、同じtに対して常に同じフレームを描画します。この1つのルールにより、同じファイルがWebサイトでライブ再生されると同時に、フレーム正確にビデオにレンダリングできる理由が生まれます。エクスポーターは単にすべてのフレーム時間にシークしてスクリーンショットを撮るだけです。
リポジトリルート：このファイルを保持するフォルダ（git clone https://github.com/Shivraj97/site-motion ~/.claude/skills/site-motionでインストールするか、クローンをそこにリンクしてください）。Node 22+、Chrome、ffmpegが必要です。npm installは不要です。任意のプロジェクトから、フルパスでCLIを実行します。ビルドとレンダリングはそのプロジェクトのout/に出力され、--tokens / --contentはそのプロジェクトからの相対パスを取ります：
SM=~/.claude/skills/site-motion/bin/site-motion.mjs
node $SM init card-story --tokens ledger # プリセットから./brand.jsonと./card-story.jsonを書き出して編集可能に
node $SM make card-story --tokens ./brand.json --content ./card-story.json --out public/motion/story.html
シーンをプロジェクトのソースに直接追加してチームが編集できるようにするには、makeの代わりにaddを使用します。scene.js、scene.css、content.json、tokens.jsonをpublic/motion/<scene>/（またはpublic/がない場合はmotion/<scene>/）にコピーし、プレーヤーとベンダーライブラリをruntime/にコピーし、シングルファイル埋め込み用の<scene>.htmlを書き出します。コピーされたフォルダは、build、render、makeで有効なシーンとして機能します：
node $SM add ledger-stamp --tokens ./brand.json --content ./ledger.json # → public/motion/ledger-stamp/ + ledger-stamp.html
node $SM make public/motion/ledger-stamp --tokens public/motion/ledger-stamp/tokens.json --formats png,sheet
リポジトリ内では短い形式も機能します：
node bin/site-motion.mjs list # シーンとトークンプリセットを表示
node bin/site-motion.mjs make iso-blocks --tokens mint # ビルド + mp4、webp、ポスターをレンダリング
node bin/site-motion.mjs make card-story --tokens ./brand.json --content ./my-story.json --formats mp4,webm,webp,gif,png,sheet
node bin/site-motion.mjs build window-stack --tokens night --out public/hero.html # ライブ埋め込みのみ
node bin/site-motion.mjs render out/hero.html --formats mp4 --scale 2 --range loop # 既存のビルドをエクスポート
出力はout/<content>-<tokens>/に出力されます。--range loopはシームレスループのみをエクスポートします（GIFとWebPのデフォルト）。fullはイントロと1ループです（MP4とWebMのデフォルト）。sheetは4×3のコンタクトシートを書き出します。常に1つ作成して確認してください。
ワークフロー
サイト全体（複数のセクションやページ）は、1つのシーンからではなく、計画から始まります。 プロジェクトでnode $SM planを実行します：
- セクションがわかっている場合は
--brief brief.mdを指定します。これが最良の入力です。サイトの実際のコピーからブリーフを記述します：# Acme: 製品の機能を1行で ## home - hero: ヒーローの見出し - feature: 各機能セクションの見出しとその下の1行 ## pricing - hero: … - または
--url https://their-site.com[,https://their-site.com/pricing]を使用して、ライブページの見出しを読み取ります； - または何もない場合は
--pages home,features,pricing --about "…"を使用します（汎用的な選択肢であることを明記します）。
各セクションを1つのシーンにマッピングし、各シーンを1回だけ使用し、すべてのルックを統一します。ルックはホームヒーローのもので、site-motion.jsonに固定されます。site-motion-plan.pngを描画します：すべてのセクションをブランドとルックでのシーンのフレームとして表示し、スコアの判定を上部に重ねます。ユーザーにシートを表示し、plan applyの前に承認を得てください。
?とマークされた選択肢は、強い一致がありませんでした。そのノート（「ledger-stampの方が適しているが、home.heroで使用中」）を読み、スワップするか（plan swap <slot> <scene>）、より適切なシーンを再利用するか、そのストーリーに適したシーンがライブラリにないことをユーザーに伝えます。- 弱い選択肢に対して、その旨を伝えずに適用しないでください。
plan applyはすべてのシーンを追加し、各セクションの埋め込みコードを出力します。次に、各シーンのコピーをcontent.jsonに記述し、syncを実行し、最後にscore --projectで完了します。
単一のシーンの場合は、以下の手順に従います。
- まずデザインシステムを入手します。 トークンは色とタイポグラフィの唯一の情報源です。次の順序で見つけます：プロジェクトのトークン/テーマファイル（CSS変数、Tailwind設定、
tokens.json）、次にライブサイト（計算されたスタイルを測定）、最後に質問します。それらをtokens/<brand>.jsonとして記述します（以下に形状を示します）。パレットが存在する場合は色を決して発明せず、h.mix(a, b, p)を使用してトークンからシェードを導出します。 - 製品のストーリーを伝えるアーキタイプを選択するか、新しいシーンを記述します：
シーン 伝えるストーリー レンダラー iso-blocksインフラ、プラットフォーム、「多くのパーツが連携する」：タイル張りの床の上に、面にライブデータを持つブロック SVG card-story作業を削減するワークフロー：機能リストがプロダクトカードを状態遷移させる DOM window-stack「あなたの作業環境で動作する」：ペイントされたCanvasの背景の上にアプリウィンドウ、エージェントがステップを実行 Canvas + DOM live-roomProマルチプレイヤー：アプリウィンドウ上の名前付きカーソル、提案、可決する投票、出荷される変更、アクティビティティッカー Canvas + DOM leaderboardクレジットとステータス：貢献が行に着地し、ポイントがカウントアップされ、行が並べ替えられる DOM bloom-flow自動化：イベントがワークフローグラフを実行し、各ステップがジェネレーティブな花に咲く Canvas + SVG signal-field乱雑 → 構造化：ノイズの多いストランドがゲートを通過し、クリーンなレーンとして出てくる p5.js drop-pile多数 → 一つ：作業アイテムが実際の物理演算で1つのトレイに落下し、カウンターが集計する Matter.js（ベイク処理） galton-routerルーティング、承認、A/Bテスト：支払いがペグボードを落下し、ルールがスイッチを切り替え、フローが最適なビンに移動 SVG（シード付きランダムウォーク） receipt-printer乱雑 → 構造化：ドキュメントがスロットに供給され、レシートが抽出された各フィールドとその信頼度を印刷 DOM + SVG score-sheetオーケストレーション、マルチエージェント：楽譜として書かれた実行、各エージェントが作業中に五線が振動 SVG css3d-stackアーキテクチャ、レイヤー：CSS 3Dの実際のHTMLボックスが分離し、リクエストが落下 CSS 3D loom多数 → 一つ、統合：各ツールは縦糸の帯で、1つの綾織りに織り込まれ、製品のビームに巻き取られる Canvas 2D domino-run自動化、トリガー：1つのボールがステップにグループ化されたドミノの連鎖を倒し、波が到達するたびに各ステップが点灯 Matter.js（ベイク処理） weather-board信頼性、フェイルオーバー：ステータスマップの1つのリージョンに嵐（シェーダー雲、雨、雷）が発生し、トラフィックが迂回され、0件の失敗リクエストで晴れる WebGLシェーダー + DOM ledger-stamp承認、コンプライアンス、信頼：支払いがインデックス付きベルトをポリシースキャナー、APPROVEDスタンププレス、署名・シールプレスを通過し、監査証跡に至る；制限を超えたものはHELDとスタンプされ、2番目の承認者を待つ SVG + DOM grain-tallyメトリクス、スケール：数千のグレイン（それぞれ実際のイベントの固定バッチ）がダストリングとして呼吸し、合計の数字に注ぎ込まれ、次にソースごとに1つのバーに正確なカウントでソートされる；数値はデータから構築され、カウントアップされない Canvas 2D（パーティクル、純粋t） lens-of-order乱雑 → 構造化、分類、見るAI：漂うブロブ（未理解）の1ビットディザフィールド；虫眼鏡が各ブロブをクラスカラーで塗りつぶし、輪郭を描き、信頼度でラベル付けし、フェードする色付きの軌跡を残す Canvas 2D（セル単位フィールド、ベイヤーディザ） water-slide-funnelコンバージョンファネル：ライダーがステージごとに1つのスロープを滑り降りる；各縁のプールがそのステージの離脱をキャッチ SVG gold-panPro入力しながら検索：キーストロークごとにパンが回転し、3つの価格付きナゲットが残るまで続く Canvas 2D museum-heatmapProプロダクト分析：訪問者の足跡が、人々が立ち止まる機能の周りの床を暖める；ランキングは熱から来る Canvas 2D cell-divisionデータベースブランチング：メインがブランチに分割され、1つが破棄され、1つが変更とともにマージされる Canvas 2D（メタボール） scratch-offPro予測：航空会社の掲示板が追いつく前に、実際の出発時刻からホイルが削り取られる Canvas 2D sieve-trayPro早期発見：マーカーが細かいメッシュを落下する；キャッチされた少数は持ち上げられてフラグが付けられる Matter.js（ベイク処理） rube-goldbergProビフォー / アフター：レシートマーブルが5つの古い仕掛けで詰まり、その後1つのシュートを2つ目の仕掛けで落下 SVG language-balloonsProローカリゼーション：8つのスクリプトの言葉のバブルが浮上し、各ロケールの文を組み立てる（RTL含む） Matter.js（ベイク処理） balloon-deployProデプロイ：各ビルドステップがエンベロープを膨らませる；100%でリリースが離陸 SVG pufferfishProオートスケーリング：フグが各トラフィックウェーブに合わせて膨らむ一方、固定容量の魚は投げ飛ばされる SVG gear-tiersPro料金：キャンプキット（テントからベースキャンプまで）として描かれたプラン、月間/年間トグル付き SVG permission-chessboardProロールと権限：各ロール駒がボードに着地し、使用可能なマスのみを点灯 SVG tree-rings年間レビュー：年ごとに1つの年輪、その年の忙しさに応じた幅、初めての出来事のノッチ付き SVG parchment-changelogチェンジログ：スクロールがリリースごとに1つずつ展開され、各々が出荷時にインクで描かれる SVG + DOM moving-boxes移行：手押し車が古いツールのボックスを新しい建物に運び込み、何も失われない SVG + DOM privacy-pebblesProPII編集：スクイージーがすべての個人情報を同一の小石に変える；文はまだ読める SVG + DOM ant-trailPro自動分類：アリが各スワイプのレシート、メモ、承認を正しい台帳スロットに運ぶ Canvas 2D sunrise-payrollProグローバル給与計算：日の出が8つのタイムゾーンを横断し、各都市をその9時に支払う SVG whiteoutPro静けさ：忙しいダッシュボードが霧に溶け、唯一重要な数字を残す WebGLシェーダー + DOM ink-floodProテーマ設定、ホワイトラベル：ペイントチップが製品全体を新しいカラースキームに染める SVG integration-deckPro統合：各ツールは1つのアイソメトリックマクロパッドのキー；ワークフローがコードとして再生され、実行ログが各ステップをタイプする Three.js margin-railsPro来歴：メモが自身を書きながら、過去のファイルから転載された箇所がソースを命名するレールに乗ってスライドイン SVG + DOM pigeonhole-wallメモリ：ドキュメントがラベル付けされた pigeonhole にファイルされ、リクエストが必要な3つのソースを引き出す SVG + DOM redline-frontPro契約レビュー：レビューフロントがドキュメントをスイープダウンし、検証済みの権限を持つ完成したredlineとして返す SVG + DOM step-rail仕組み、オンボーディング：トークンが番号付きのステップを移動；各カードがそのステップで生成されたものを開き、最後のステップが結果を着地させる SVG + DOM pipeline-boardワークフロー、パイプライン：カードがかんばんボード上で列ごとに進み、カウントと合計がそれに従う DOM account-healthリテンション、カスタマーサクセス：ヘルステーブルが月を再生；1つのアカウントがリスク状態に陥り、プレイブックが発動して回復 SVG split-wipeビフォー / アフター、統合：仕切りが散在する手作業をスイープし、各断片が1つのプロダクトサーフェスにスナップ DOM roadmap-railロードマップ、マイルストーン：Todayマーカーが時間軸を歩く；出荷されたマイルストーンが埋まり、主要なローンチがカードに開く SVG trust-ringsセキュリティ、コンプライアンス：リクエストがデータの周りの同心円状の制御リングを通過；許可されていないものが停止され、ログに記録される SVG balance-scale料金、品質とコスト：3つの天秤皿、各傾きはスコアから計算；我々のものは品質に傾く SVG crate-discrepancy照合：トレイが木箱から持ち上げられ、梱包明細をチェックオフ；不足しているトレイがノートとともに浮上 SVG + DOM press-qaテスト、CI：ビルドがプレスからロールオフ；アームがテストに失敗したものをシュートに弾き、再実行で合格 SVG radar-sweep可観測性：実行中のすべてのジョブがレーダースコープ上のブリップ；カーソルが届き、失敗したジョブを一時停止 Canvas 2D + DOM agent-checkoutプロダクトUIデモ、エージェント支払い：購入リクエスト、マスクされた仮想カードが自動入力、限度メーターが金額分移動、レシートがリストに追加 DOM + ui-kit click-to-doneプロダクトUIデモ、任意の1アクション機能（招待、送信、承認、公開）：ブラウザフレーム内の実際の画面、カーソルがタイプ、選択、クリック、カメラが結果にズームインしてズームアウト DOM + ui-kit dashboard-pushプロダクトUIデモ、分析とレポート：ヘッドラインの数字がチャートの描画とともに構築、カーソルがツールチップをスクラブ、カメラが重要な瞬間を押し込み、範囲スイッチがすべての系列を変形 DOM + SVG + ui-kit phone-stackプロダクトUIデモ、モバイルと通知：アラートがロック画面に信号リングとともに着地、タップで最新のものがアプリ画面に開き、スワイプでクリア DOM + ui-kit shot-demoスクリーンショットからのプロダクトUIデモ：顧客自身のスクリーンショットをフレーム内に；カーソルが実際のフィールドに入力し、実際のボタンをクリック、値がブランドのフェースで変化、スポットライトとコールアウトが結果に着地 DOM + スクリーンショット + ui-kit integration-deckは3D標準です：1つの触覚オブジェクト、1つの物理アクション、フラットなトーン風バンド、インクの輪郭、真のアイソメトリックカメラ、ブランドのタイプでのラベル。その他のThree.jsオブジェクトシーン（オービットハブ、ソーティングウォール、押し出しロゴ、glTFショーケース）は、再加工されるまで公開セットの外にあります。3Dツール（vendor/three-full.min.js、`ve…
（以下、元のSKILL.mdはここで途切れていますが、翻訳可能な部分をすべて翻訳しました。）
site-motion Proシーンは、planコマンドでサイト全体のアニメーションマップを作成する際に特に有用です。まずnode $SM planを実行し、計画を立ててからplan applyを実行することで、一貫性のあるアニメーション体験を構築できます。