replica-build

replica-build

replica/recon.md、replica/architecture.md、replica/design/ を読み込みます。 replica/features.csv（clone 列）を更新し、 replica/build-log.md を維持します。

ルール

• クリーンルーム。 すべてのコードは、調査マップと仕様に基づいて、ここで一から書きます。元の HTML、CSS、JavaScript、SVG、画像は決して貼り付けず、元のドメインや CDN から何かを読み込まず、「ソースを表示して手を加える」ことも決してしません。
• 文言は自分で作成。 ラベル、ボタン、空の状態、メールの文面はすべて新たに書きます。ボタンの動作を一致させるのはパリティですが、文を一致させるのはコピーです。
• トークンのみ。 コンポーネントに生の16進数やピクセル値を使わないでください。値がない場合はトークンに追加します。

ステップ 1：シェル

インベントリ内のすべての画面のルーティング（スタブページでも構いません）、レイアウト（ナビゲーション、ヘッダー、サイドバー）、適用済みのトークン、replica-design のプリミティブ、そして画面に実際に表示できるシードデータを用意します。コミットします。

ステップ 2：垂直スライス

何よりも先に、調査マップにあるコアループを最初から最後まで実装します。予約アプリなら、イベントタイプを作成し、公開ページを開き、枠を予約して、ダッシュボードで確認できるようにします。見た目は粗くても構いません。動作することが重要です。replica-backend がまだ実行されていない場合は、シードデータと同じ関数シグネチャを持つフェイクのデータレイヤーを使います。そうすれば、実際のデータレイヤーに差し替えても画面コードは変わりません。

ステップ 3：画面ごとの実装

architecture.md の順番で作業します。各画面について：

1. 調査マップの該当行を読みます。目的、コンポーネント、状態、どのフローが通るかを確認します。
2. レイアウトと階層を把握するために、参考スクリーンショットを見ます。ピクセルを確認するためではありません。
3. プリミティブを使って構築します。データレイヤーから実際のデータを使います。
4. すべての状態に対応します。空、読み込み中（元の画面でスピナーではなくスケルトンを使っている場合はスケルトン）、入力済み、エラー、権限なし、長いコンテンツ（60文字の名前）、モバイル幅。
5. 基本事項を毎回確認します。セマンティックな HTML、入力欄のラベル、キーボードで操作可能、フォーカスが見える、画像に代替テキストがあること。
6. features.csv の該当行を yes または partial（注記付き）にします。
7. 参考画面と同じビューポートでスクリーンショットを撮り、replica/clone-screens/S07.png に保存して replica-diff に使用します。
8. 画面ごとに1回コミットします：build: S07 booking page。

画面ごとの完了条件

• 調査マップにあるすべての状態に加え、空、エラー、読み込み中
• 幅390pxと1440pxで動作する
• キーボードのみでフローを完了できる
• コンソールエラーがない
• 元のものから借用したハードコードの文言がない
• features.csv を更新済み
• 差分確認用のスクリーンショットを保存済み

ステップ 4：ビルドログ

replica/build-log.md に画面ごとに1行記録します。ID、日付、完了または一部完了、不足しているもの、予想より難しかったことを記載します。機能が想定以上に大きい場合は、ログとチャットの両方で伝えます。半端な状態で黙って出荷しないでください。

仕組みがわからず行き詰まったとき

ユーザーとして元のものに戻ります。ヘルプ記事を読み、公開されているウォークスルーを見て、ユーザー自身のアカウントを使います。コードやネットワーク呼び出しを調べてはいけません。その後、動作を独自に実装します。

出力

構築した画面、更新した機能マトリックス、保存したスクリーンショットと、概要を用意します。完了した画面数／総画面数、完了した必須項目数／総必須項目数、次の作業を記載します。その後、データレイヤーがまだフェイクなら /replica-backend、そうでなければ /replica-test を実行します。