Replica

Replica は何をしますか？

ユーザーが指し示すものを再構築し、それを証明します。capture は参照を測定された事実の 青写真 に変換します。あなたは青写真に従って構築します。compare は構築結果を4つの軸（レイアウト、スタイル、ピクセル、モーション）でスコアリングし、どの修正が最もスコア向上に貢献するかを示します。あなたの作業は、compare が終了コード0で終了した時点で完了です。自分で見た目が正しいと思った時点では完了ではありません。

<skill> は、この SKILL.md が置かれているディレクトリを指します。

ルール

1. 測定し、推測するな すべてのサイズ、色、フォント、間隔、継続時間、イージングは blueprint.md、blueprint.json またはレポートから取得してください。このようなサイトが通常どのように見えるかという記憶を使わないでください。
2. スコアを不正に操作するな 参照のスクリーンショットやビデオフレームを埋め込んだり、参照をiframeやプロキシ経由で表示したり、そのレンダリングされたHTMLをそのまま貼り付けたり、.replica/ 以下のファイルを編集したり、--level を下げてパスを得たりしないでください。ユーザーのスタックで実際のUIを構築してください。
3. プロジェクトのスタックを使用する まず package.json と最も近い既存のコンポーネントを読んでください。フレームワーク、スタイリング手法、アニメーションライブラリをプロジェクトに合わせてください。参照がプロジェクトで実現できないものを必要とする場合にのみ、依存関係を追加してください。
4. レポートの順序に従い、一度に少しずつ修正する 上部の項目はしばしば下部の項目の原因となります。1つのカスケード修正で数十の要素が動く可能性があります。各バッチの後に compare を再実行してください。決して10個の推測的な変更を一度に積み重ねないでください。
5. 所有権を尊重する 参照のフォント、画像、アイコン、コピーはそれぞれの所有者に帰属します。ユーザーが自身のアセットやコピーを持っている場合はそれを使用してください。そうでない場合は確認するか、同じ寸法のプレースホルダーを使用し、data-replica="placeholder" とマークしてください。compare はそれらのボックスはチェックしますが、ピクセルスコアからは除外します。最後のメッセージで、どの参照アセットを再利用したかを記載してください。

0. スコープ

以下を決定し、最初のメッセージで宣言してください。

• ターゲット: URLまたはファイル、およびそのどの部分か: セクションやコンポーネントのCSSセレクタ、または動画の時間範囲。

• 出力先: ユーザープロジェクト内のファイルまたはルート、およびスタック。

• レベル: compare があなたに課す基準を設定します。

  レベル	ユーザーがこう言ったとき	ゲート（すべて合格必須）
  structure	"同じレイアウト/雰囲気でブランドは我々のもの", "Xのように、でも内容は我々のもの"	layout ≥ 90, motion ≥ 85
  faithful (デフォルト)	"これをクローンして", "再現して", "こんな感じにして"	layout ≥ 95, style ≥ 95, pixels ≥ 85, motion ≥ 90
  exact	"ピクセルパーフェクト", "1:1", "正確に"	layout ≥ 98, style ≥ 98, pixels ≥ 97, motion ≥ 95

• トリガー: モーションを開始するもの（ページ読み込み、ホバー、クリック、スクロールイン、スクロール連動）。これは --action になります。

リクエストとリポジトリから推測できるものは推測してください。異なる解釈が異なる作業につながる場合にのみ質問してください。

1. セットアップ（マシンごとに1回）

npm install --prefix <skill>/scripts
node <skill>/scripts/replica.mjs doctor

doctor がブラウザがないと報告した場合、表示されたインストールコマンドを実行してください。Google Chrome がインストールされている場合、Replica はそれをフォールバックとして使用します。動画とGIFの参照には ffmpeg が PATH 上にある必要もあります。

2. 参照をキャプチャする

すべてをユーザープロジェクト内の .replica/<name>/ に保存し、.replica/ を .gitignore に追加してください。

node <skill>/scripts/replica.mjs capture <url|file.html|image|video> --out .replica/<name>/ref \
  --selector "<パーツのCSS>" --viewports 1440x900,390x844 --action load --motion 1500

• --selector: クローンするパーツにキャプチャ範囲を限定します。ページ全体を指定すると巨大な青写真になります。
• --viewports: 出荷する幅。最初のものがプライマリで、モーションはそこで記録されます。
• --action と --motion <ms>: クローンするモーションがある場合のみ。記録はすべてのモーションをカバーするのに十分な長さにしてください。capture は、終了時にまだ動いているものがあった場合にメモを出力します。
• --hide "<css>": Cookieバナー、チャットウィジェット、開発用オーバーレイを非表示にします。これは両方の側に適用されます。

画像、動画、ログインが必要なページ、iframe、キャンバス、ダークモードのレシピは references/sources.md にあります。

次に、ref/blueprint.md をすべて読んでください。ref/<viewport>/shot.png と ref/motion/filmstrip.png を画像ビューアで見てください。青写真の構文は references/blueprint.md で説明されています。画像と動画の参照には青写真がないため、ショットとフレームから構築してください。

3. 構築する

この順序で作業を進めてください: トークン → レイアウトの骨格 → タイポグラフィ → ボックスとペイント → メディア → レスポンシブ → モーション

• トークン: 青写真の色、タイプスケール、半径、シャドウ、CSS変数を、正確な値でプロジェクトのトークンシステム（CSS変数またはTailwindテーマ）に投入します。
• レイアウト: 各アウトラインブロックの flex … / grid cols[…]、gap、pad の値、およびコンテナの幅を再現します。
• タイポグラフィ: ファミリー、ウェイト、サイズ/行間、文字間隔を正確に一致させます。フォントが利用できない場合やライセンスが必要な場合は、最も近い利用可能なフォントを使用し、それを既知の差異として記録します。
• モーション: 青写真に「宣言されたアニメーション」がある場合は、その継続時間、ディレイ、イージング、キーフレームを正確にコピーします。そうでない場合は、タイムラインの開始時間、継続時間、イージング、またはスプリングパラメータを使用します。
• サーブする: クローンを、同じ状態をレンダリングするURLまたはHTMLファイル（devサーバーのルート、ストーリー、静的ファイル）でアクセス可能にします。そのルート要素に参照とは異なるセレクタが必要な場合は、--selector を compare に渡します。

各スタック（CSS、Tailwind、Framer Motion、GSAP）の注意点は references/building.md にあります。

4. 比較、修正、繰り返す

node <skill>/scripts/replica.mjs compare .replica/<name>/ref <clone url|file> [--selector "<clone root css>"]

これにより round-N/ に report.md、issues.json、score.json、sheets/ が書き込まれます。終了コード0は合格、1は未達、2はエラーを意味します。

1. round-N/report.md を読んでください: スコア表、次に Fix next。各項目は、それを修正することで何ポイント得られるかを示しています。
2. round-N/sheets/*.png を見てください: 参照 | あなたのコード | 差分概要、拡大されたホットスポット、およびモーションストリップ。
3. 上位3～5項目を修正し、常に 「Likely cause」項目を含めてください。その後、compare を再度実行します。

• レポートが ▼（スコアが下がった）を示した場合、他のことを試す前に最後の変更を元に戻してください。
• 連続する2ラウンドで1ポイント未満しか増加しなかった場合、パッチ適用を中止してください。問題のある領域の青写真を読み直し、フォントが読み込まれているか、正しいセレクタ、状態、ビューポートを比較しているかを確認してください。
• 8ラウンド経過したら中止し、残っているものとその理由を報告してください。

references/fixing.md では、各タイプの発見事項の意味と、それを解決するための通常の変更について説明しています。

5. 引き渡す

以下を記入して終了してください。

Replica · <ターゲット> → <変更したファイル>
レベル <level> · ラウンド <N> · スコア <全体> — 合格 | 未達
layout <n> · style <n> · pixels <n> · motion <n>
既知の差異: <それぞれとその理由 (ライセンスフォント、ユーザー自身のコピーなど)>
再利用した参照アセット: <リスト、またはなし> · プレースホルダー: <リスト、またはなし>
証拠: .replica/<name>/round-<N>/report.md および sheets/

合格していない場合は、その旨を明確に述べ、残っている主要な発見事項をリストアップしてください。