settle — 動きのあるUIパーツ生成

settle

「気持ちよくクリックできるスイッチ」や「Todoアプリを紹介する短いループアニメーション」のようなリクエストから、物理的な質感を持った動きのあるライブパーツを生成します。モーションのクラフトはすべてのパーツで共通ですが、見た目はリクエストごとに新しく割り当てられるか、ユーザーのプロジェクトから継承されます。

以下のパスはこのファイルのフォルダからの相対パスです。すべてのスクリプトは作業フォルダ（プロジェクトのルート、またはパーツを配置するフォルダ）からフルパスで実行してください：node <このフォルダ>/scripts/deal.mjs … — スクリプトは実行した場所にファイルを書き込みます。

リクエストの実行方法

1. コンテキストを読む。 プロジェクト内かどうかを確認します：package.json にフレームワーク名があるか、HTMLページのフォルダかを確認。プロジェクト内の場合、スタイルの記述方法、トークンやテーマが設定する見た目、既存のモーションライブラリを記録します。次にリクエストを読み、references/kinds/ のどの構造に当たるか、ショーケースかプロダクトの一部か、初心者の言葉で何を求めているかを判断し、references/words.md で翻訳します。
2. 見た目をディール（割り当て）または継承する。
   • プロジェクトに独自の見た目がある場合：その見た目をシートの変数にマッピングし、不足分だけを --keep palette,type でディールします。
   • そうでない場合：node scripts/deal.mjs --brief "<リクエストを一行で>" --kind <control, data-view, composite または flow> を実行し、リクエストの言葉が references/words.md で与えるフラグを付け、プロジェクト内の場合は --project を追加します（後続のパーツがその見た目を継承できるように）。見た目1（ディールされた見た目）を構築：--pick 1。見た目1がテーマと衝突する場合のみ見た目2または3を選択し、その理由を明記：--pick 2 --because "朝食メニューには暗い背景が合う"。references/tokens.md にルールがあります。
   • ディールされた見た目には方向性があり、パーツを装飾します。リクエストがその形式を設定します。references/directions.md の該当セクションを読んでください。ブリーフの前に、方向性のセクション全体を読みます。
3. ブリーフ、またはストーリーボードを書く。
   • コントロール、データビュー、または複合パーツの場合：ブリーフを2行で述べ、すぐに構築します：それが何か、方向性がこの主題でどうなるか、見た目、シグネチャーモーメント、選択したデフォルト。「勉強サイト向けのポモドーロタイマー。インストゥルメント：タイマーはキッチンタイマーの文字盤、ベゼルに分刻みの目盛り、見た目1、パテ色と黒。シグネチャー：スタートボタンが減少するバーになる。25分、5分休憩。」
   • 時間経過のあるフロー、または2つの非常に異なる意味に解釈できるリクエストの場合：ストーリーボードを表示し（references/kinds/flow.md に形式あり）、承諾を待ちます。
   • 構築前に、類似のリクエストが何を得るかを想像します。そのイメージに合うブリーフの各部分を変更します。
4. パーツを配置すべき場所に構築する。
   • プロジェクトなしの場合： assets/page.html またはリールの場合は assets/reel.html をベースにした1つのHTMLファイル。シート、方向性のページルール、カーネル（assets/kernel.js を head のモジュールスクリプトに全体としてペースト）、そしてパーツが必要とする references/motion.md のレシピを含みます。
   • プロジェクト内の場合： プロジェクトのフレームワークとスタイリングを使用したコンポーネント。カーネルはモジュールとして1回コピー、シートはプロジェクトのグローバルスタイルシートに追加。references/stacks/ に各スタックのノートがあります。
   • すでに存在するパーツにモーションを追加する場合： そのマークアップと見た目を維持し、各状態変化に文法が名付ける動き（references/craft.md セクション3）をゲートを通じて適用します。
   • references/kinds/ の該当ファイルが、各部分の変更の種類に応じて、どのレシピから始めるかを示します。
5. チェックする。 ファイルをリントし、snap.mjs でフレームを撮影します（references/review.md の説明に従い、ファイルまたはプロジェクトの開発サーバーに対して実行）。コンタクトシートで読み取りがおかしい部分を修正し、再度撮影、最大3ラウンド。ドラッグスナップが着地できない、サーバーが起動しないなど、チェックが誤動作する場合は2回試行し、その後「未チェック」として引き渡します。
6. 引き渡す（下記参照）。

読むべきファイル

ファイル	いつ読むか
references/craft.md	毎回のビルド：すべての動きが従うルール、禁止リスト、注意点
references/tokens.md	毎回のビルド：見た目がどのようにディールまたは継承され、どのように使用されるか
references/directions.md	プロジェクトなしの毎回のビルド：ディールされた方向性のセクション
references/motion.md	毎回のビルド：シート、ベースページ、およびモーションごとのレシピ
references/kinds/control.md, data-view.md, composite.md, flow.md	パーツの構造：そのアナトミーと、開始すべきレシピ
references/stacks/html.md, react-next.md, vue.md, svelte.md, astro.md	パーツの配置場所：スタンドアロンファイルの場合は html.md、それ以外はプロジェクトのスタック
references/words.md	リクエストが「ポップにして」のような感覚を説明する場合
references/review.md	チェックステップ

厳格なルール

• パーツはユーザーが作業している場所に配置する。 プロジェクト内の場合：プロジェクトのフレームワークとスタイリングを使用し、新しいパッケージは追加せず、プロジェクトがすでに持つモーションライブラリがあればそれを使用し、settle のタイミングを引き継ぐ。プロジェクトがない場合：カーネルがペーストされた1つの自己完結型HTMLファイル。外部へのリクエストは見た目のフォントリンク1つだけ。システムフォントでも動作すること。必要に応じて写真を取得し、ファイルの横に配置する。
• リクエストが形式を設定する。 コントロールは実際のサイズを維持し、ウィジェットは1つのカードまたはパネル、フルスクリーンはリクエストが明示的に求めた場合のみ。ランディングページ全体やWebサイト全体のリクエストには、その中の動くパーツ（例：アプリのスライドショー）だけを構築し、ページにドロップできる形で提供。ページ全体はページデザインスキルに任せる。パーツの周囲の背景はシンプルなままにする。
• 見た目はシートと方向性から得る。 すべての視覚的な値はシートの変数またはその色調から取得し、1つの背景色、1つのインク色、1つまたは2つのアクセント色を使用。ディールされた方向性がパーツを装飾し、暗い背景は暗闇で発生する主題に使用する。
• モーションはカーネルから。 ユーザーの操作に応答するすべての動き、およびすべての状態変化は、見た目のレジスターからのプリセットを使用して settle.track、settle.stretch、または settle.move で実行し、settle.register() で登録する。
• 時間は settle.now() から。 ハンドラーは目標値を設定。1つの requestAnimationFrame ループが現在時刻からすべての動くスタイルを描画する。snap.mjs はそのクロックを停止してフレームをチェックする。
• 形状は引き継がれる。 新しい状態は常に画面にすでにある形状から作られ、変更されたテキストは短いぼかしを通過し、新しいコンテナは残るものの背後から開く。
• 手がリードする。 ドラッグされた値はポインターの真下に正確に位置し、限界を超えるとゴムバンドのように追従。リリースは手の速度を維持する。
• リアルなコンテンツ。 もっともらしい具体性を持ち、アクションはフローを通じてその名前を保持する。写真はユーザーから提供されるか、ユーザーがリアルな写真を求めていて持っていない場合、scripts/photo.mjs から取得し、パーツ内にクレジットを記載。それ以外の場合は、コードがクリアに描画できるものだけをコードで描画し、風景は決して描画しない（references/directions.md、Pictures 参照）。
• 1つのシグネチャーモーメント、その他は静かに。
• リクエストが明示しない限り禁止： references/craft.md の禁止リストにあるものすべて。リントがフラグを立てる。
• すべての人に対応。 ポインター、タッチ、キーボードで動作し、可視フォーカスと44pxターゲットを備える。360px画面に収まり、テキストは11px未満にしない。縮小モーション設定下ではスプリングが即座に着地する。
• コストを考慮する。 すべてのツールコールはユーザーの利用量を消費する。1回で構築し、最大3ラウンドでチェック。誤動作するチェックは2回試行し、スクリプト自体のデバッグは行わない：未チェックのものは引き渡し時に明記する。

ショーケースまたはプロダクト

ショーケース（例：ランディングページ用のリール）はフルモーションを得る。実際のプロダクト内のコントロールは、ユーザーが目にする頻度が高いほど動きを抑える：1日100回使うものはモーションなし、数十回使うものは速くてわずかな動き。references/craft.md に表あり（Emil Kowalskiの頻度ルール）。

ファイルの配置場所

プロジェクトがない場合、主題から短い名前を付けて作業フォルダに書き込む（例：tea-timer.html）。ユーザーがパスを指定した場合はそれに従う。プロジェクト内の場合、スタックノートが示す場所に、プロジェクトのスタイルに従った名前で配置し、ユーザーが開ける場所（ページやルート）に表示する。リクエストが指定しない場合は独自のページまたはルートにする。パーツの調整可能な数値はスクリプトの先頭にまとめる：データと、レジスターが設定しないタイミング。

引き渡し

以下を含めて返答する：

• パーツの場所、開き方（ファイル、またはルートと開発サーバー起動コマンド）、パーツの説明とシグネチャーモーメントを1行。
• 試してほしいこと2～3つ：「ノブを端までドラッグ」「Tabキーを押し、矢印キーで操作」。
• 調整できるノブ2つ：スクリプトの先頭に表示されている名前で。
• 図で代用している場合、写真の配置場所：ユーザーの <img> に置き換える要素。
• 未チェックのものがあれば（例：実機のSafari）。
• 見た目の一部を再ディールする提案（node scripts/deal.mjs --redeal palette）、および漠然としたリクエストに対してはスイッチャー付きの3つのバリアント。

リールの場合、ビデオエクスポートを提案：node scripts/export.mjs reel.html --out reel.mp4（または --gif）でffmpegを使用してレンダリングし、モーションブラーのために1フレームあたり4つのサブフレームを平均化する。

スクリプト

スクリプト	機能
scripts/deal.mjs --brief "…" [--tone …] [--register …] [--dark] [--project]	3つの見た目をディール；--pick <n> で選択したシートを出力（--project でプロジェクトの見た目として保存）；--redeal <part> で一部を再ディール；--check でライブラリをチェック
scripts/lint.mjs <file>	スタンドアロンファイルの静的チェック；FAILで終了コード1
scripts/snap.mjs <file or url> --out <dir> --sheet [--size WxH] [--times …] [--do "…"] [--calm]	停止したクロック上でフレームを撮影し、コンタクトシートと、ヘッダーにリストされたセトルページのチェックを実行
scripts/export.mjs <reel> [--out reel.mp4] [--gif]	リールをMP4またはGIFに変換、4サブフレームのモーションブラーあり
scripts/photo.mjs "<表示するもの>" [--out photo.jpg]	オープンライセンス（CC0、パブリックドメイン、またはCC BY）の写真を1枚保存し、クレジット行をパーツ用に出力；ユーザーが実際の写真を求めた場合のみ

これらにはNode.js 22以降とChromiumブラウザが必要：snap.mjs は通常の場所にChrome、Chromium、Edge、Braveを見つけ、CHROME 環境変数で他のブラウザも指定可能。見つからない場合は1行でその旨を表示：references/review.md に従ってコードをレビューし、フレームは未チェックとして扱う。エクスポートにはさらにffmpeg、photo.mjs にはネットワークが必要。インストールは不要。

シェルがない場合

シェルがないチャットなど、スクリプトが実行できない場合：library/directions.json、library/palettes.json、library/type.json を読み、リクエストの種類とトーンに合ったエントリを保持し、各リストを巡回しながらリクエストの文字数で決まる位置のエントリを選択（異なるリクエストが異なる見た目に当たるように）。同じファイルから構築し、references/review.md のルーブリックに従ってコードをレビューし、引き渡し時にフレームは未チェックであると伝える。

クレジット

• Emil Kowalski's skills