visual-fix

Visual Fix

1つの目に見えるUIの問題を、1つの局所的で承認済み、検証済みのコード変更に変換します。

サポートされる証拠

以下の任意の有用な組み合わせを受け付けます：

• 現在のUIのスクリーンショット
• スクリーンショット内の注釈付きまたは説明付きの領域
• 役割が識別された現在と目標のスクリーンショット
• ルート、ビューポート、コンポーネント名、表示されている文字列、セレクター、テストID
• 「このカードがクリップされている」「これらのコントロールが揃っていない」などの平易な言葉による症状

信頼できる位置特定を妨げる証拠のみを要求します。ルートと一意の表示文字列があれば、スクリーンショットがなくても十分な場合があります。繰り返しコンポーネントを含むスクリーンショットでも、ルート、ラベル、または状態が必要な場合があります。

一度に1つの視覚的な問題を処理します。無関係な症状は別々の修正に分割します。

ワークフロー

1. 目標を確立する

範囲を限定した成果を具体的な用語で言い換えます：

• 現在何が間違って見えるか
• ユーザーが何を見ることを期待するか
• 該当する場合、どのルート、コンポーネント、状態、ビューポートが関連するか
• どの表示アンカーが目標を識別するか

要求された結果が主観的であったり、異なる要素に影響を与える可能性がある場合は、それらを区別する最も小さな質問をします。

2. 読み取り専用のベースラインを確立する

編集前に：

• リポジトリの指示と信頼できる情報源を見つけます。
• ワークツリーのステータスを検査し、既存のユーザーの変更を保持します。
• フレームワーク、ルートエントリ、コンポーネントツリー、スタイリングシステム、利用可能な実行コマンドまたはテストコマンドを特定します。
• 環境が許可する場合、対象のルートとビューポートを再現します。
• 変更する前に現在の状態をキャプチャまたは記録します。

メンテナンス済みのソースファイルが存在する場合、生成された出力を編集しないでください。無関係なワークツリーの変更をクリーンアップしたり上書きしたりしないでください。

ベースラインを簡潔に報告します：

Context
- Route/state: /catalog, filters open
- Viewport: 390 x 844
- Source of truth: src/routes/catalog.tsx + src/styles/catalog.css
- Existing user changes: none
- Reproduction: available

3. レンダリングされたソースを特定する

レンダリングされた要素からメンテナンス済みのコードまで証拠を追跡します。ルート、アクセシブルな名前、表示テキスト、DOMセレクター、コンポーネント名、テストID、クラス、スタイルトークン、またはスクリーンショットのジオメトリを使用します。複数のファイルやスタイルレイヤーが関係する場合は、references/locating.mdを読んでください。

1つのプライマリソースの場所と、最大2つの必要な関連場所を特定します。ファイルと行の証拠は、現在のワークツリーからのものでなければなりません。

Located
- Primary: src/components/ProductGrid.tsx:42, ProductGrid
- Related: src/styles/products.css:18
- Evidence: `.grid` controls the repeated horizontal spacing visible between the cards
- Confidence: high

2つの類似した要素が依然として可能性として残る場合、区別する証拠を説明し、明確化のために中断します。

4. 証拠から診断する

目に見える症状を実際のコードに結び付けます。1つのサポートされる原因を優先します。証拠が依然として曖昧な場合にのみ、2つまたは3つの仮説を提示します。

各仮説には以下を含めます：

• 関係するプロパティ、セレクター、トークン、またはコンポーネント
• それをサポートするコードまたはレンダリングされた証拠
• 意図された修正の方向性
• それを反証するであろう観察

スクリーンショットからCSS値を発明しないでください。最初に現在の値と周囲のデザインシステムを検査してください。

5. 正確な変更計画を提示する

編集前に提案されたパッチを示します：

Change plan
- Files: src/components/ProductGrid.tsx:42
- Current: gap: 8px
- Proposed: use the existing space-4 token (16px)
- Scope: ProductGrid on /catalog and /search
- Preserving: card padding, mobile column count, unrelated routes
- Verification: targeted test, lint, screenshots at 390 x 844 and 1280 x 800
- Risk: medium; the component is shared by two routes

この計画の明示的な承認を待ちます。診断を選択しても、コード変更は承認されません。計画が後日、別のファイル、依存関係、ロックファイル、生成されたアーティファクト、またはルートに拡大した場合、改訂された計画を提示し、再度承認を得てください。

6. 承認されたパッチを適用する

計画を実装する最小の変更を行います。編集を承認されたファイルと範囲内に保ちます。その後、すぐに差分を検査します：

• プロジェクトがGitを使用している場合は、git diff --checkを実行します。
• 差分に計画された変更のみが含まれていることを確認します。
• 既存の変更を保持し、無関係なフォーマットの変更を避けます。
• 特に許可がない限り、コミット、プッシュ、依存関係のインストール、または外部サービスの変更を行わないでください。

7. 結果を検証する

成功を主張する前に、references/verification.mdを読んでください。

利用可能な最も強力な証拠を使用します：

1. 変更されたコードに関連する対象テスト、フォーマット、型チェック、またはビルドを実行します。
2. ベースラインに使用されたのと同じルート、状態、ビューポートをレンダリングします。
3. 視覚的に前後を比較します。
4. 変更されたソースの範囲がより広い場合、1つの近くのビューポートまたは共有ルートをチェックします。

検証状態を1つだけ報告します：

• Verified visually：比較可能な前後のレンダリング証拠が存在する場合
• Verified statically：コードチェックは合格したが、UIをレンダリングできなかった場合
• Unable to verify visually：環境にルート、ブラウザ、フィクスチャ、または起動パスがない場合
• Verification failed：失敗したコマンドまたは観察された回帰と共に

検証が失敗した場合、診断に戻ります。承認されていない2番目の修正を最初の修正に重ねて適用しないでください。

完了レポート

引き継ぎをコンパクトで証拠に基づいたものにします：

Fixed
- Target: catalog card spacing at mobile width
- Source: src/components/ProductGrid.tsx:42
- Change: gap now uses space-4
- Verification: Verified visually at 390 x 844; unit test and lint passed
- Wider checks: /search at 390 x 844 and /catalog at 1280 x 800

残っている視覚的な不確実性に言及してください。コード差分を視覚的な証明として説明しないでください。