anti-ui-slop

Anti UI Slop

目標

AI が生成したインターフェースは、収束によってその出自が明らかになります。見慣れたフォント、配色、カードの構造、コピーのリズム、余白、動きが積み重なり、どの製品のページにも見えるようになります。流行の要素が一つあるだけでは、根拠として弱いものです。文脈のない選択が繰り返されると、強い根拠になります。

完成したインターフェースには、製品、対象ユーザー、コンテンツ、制約が反映されている必要があります。特徴を取り除くことが進歩といえるのは、置き換えによってその固有性が高まる場合に限られます。

調査結果は、次の2種類に分けて扱います。

• 品質上の問題は、アクセシビリティ、可読性、堅牢性、パフォーマンスを低下させます。確認された問題は、レビューで修正の推奨事項として提示し、編集が許可されたタスクでは修正します。
• スロップの兆候は、収束を示します。実際に対応が必要な指摘となるかどうかは、文脈、繰り返し、構成、製品との適合性によって判断します。

運用上の取り決め

• ユーザーの許可範囲に従います。レビューと監査の依頼では指摘事項のみを提示し、診断の依頼では原因のみを説明します。構築、修正、改善、仕上げの依頼では、編集が許可されています。
• 確立されたデザインシステム、ブランド表現、コンポーネントの規約、レスポンシブな動作、セマンティクス、インタラクションの動作を維持します。
• まず変更された UI ファイルを読み、次に共有トークン、レイアウトの基本要素、タイポグラフィ、代表的なページを確認します。既存の意図をデザインの方向性として活用します。
• 生成された出力、依存コード、ロックファイル、スナップショット、意図的にアンチパターンを示すサンプルは対象外とします。Storybook、デザインシステムのギャラリー、ドキュメントの例は、繰り返しに該当すると判断する前に、ページの文脈を確認します。
• 既存のフォント、パッケージ、アイコン、アセットを使用します。依存関係、外部フォント、生成画像、広範なデザインシステムの変更を追加する前に、ユーザーの許可を得ます。
• 製品に関する事実を維持します。根拠のない指標や装飾的な主張は削除し、根拠を決して捏造しません。
• 修正の範囲を限定します。局所的な特徴には局所的な修正を行い、システム全体で繰り返される特徴にはトークンまたは基本要素の修正を行います。

ワークフロー

1. インターフェースの範囲を特定します。 対象となる画面を制御するルート、コンポーネント、スタイル、共有の基本要素を特定します。既存のプロジェクトでは、まず最近変更されたファイルや変更対象のファイルを確認します。
2. 方向性を言語化します。 編集前に、次の形式で一文を明記します。 [product/audience] should feel [qualities]; [content] has priority; [constraints] shape the UI.
3. 3段階で確認します。 品質上の問題、一覧化されたスロップの兆候、ページ全体で繰り返される構成レベルのパターンの順に確認します。
4. 根拠を分類します。 レイヤー、確信度、文脈を割り当てます。妥当な例外も記録します。
5. 最も効果の大きい原因を修正します。 個別のセレクターより先に、共有トークンと繰り返される構造を修正します。コンテンツの階層に基づいて、レイアウト、強調、リズムを決めます。
6. 検証します。 差分を確認し、既存のチェックを実行して、ブラウザーやプレビューが利用できる場合はレンダリング結果も確認します。
7. 結果を報告します。 レビューでは指摘事項から報告し、編集の依頼では実施した変更から報告します。レンダリング結果について、未完了の検証項目も記載します。

エビデンスモデル

レイヤー	意味	報告ルール
ソース	マークアップ、スタイル、トークン、またはコピーの記述が直接的なエビデンスになります	セレクター、クラス、コンポーネント、またはテキストと、そのソース行を記載します
レンダリング	計算後のレイアウト、重なり順、ビューポートサイズ、または合成色によって結果が決まります	レンダリングされたページで確認します。確認できない場合は Candidate - needs rendered verification と表示します
判断	プロダクトの文脈とページ構成によって、パターンが適切かどうかが決まります	少なくとも2つの具体的な観察事項を挙げ、プロダクトとの不一致を説明します
オプトイン	リファレンスカタログにある、プロバイダーに関連付けられた弱いシグナルです	ユーザーが積極的な調査やプロバイダーを指定した調査を求めない限り、報告しません

以下の信頼度レベルを使用します。

• 確認済み： 直接的な品質上の問題、レンダリング上の問題、またはコンポーネントの役割を確認したうえで、明白なソースパターンがある状態です。
• 有力： 支配的なスロップの兆候が1つあるか、同じ領域に独立したスロップの兆候が少なくとも2つある状態です。
• 候補： レンダリングのエビデンスがない、変数が未解決、コンポーネントの文脈が不完全、またはグローバルシグナルが弱い状態です。
• 免除： パターンが実際の意味を伝えている、確立されたブランドに沿っている、または機能的なインタラクションに役立っている状態です。

重大度と信頼度は、それぞれ異なる問いに答えます。重大度はユーザーへの影響を、信頼度はエビデンスの強さを表します。

• 重大： アクセスや利用を妨げる、壊れたアセットを公開する、必須コンテンツを隠す、または重大なアクセシビリティ上の問題を引き起こします。
• 高： 主要なフローに影響するか、繰り返されるスロップのまとまりによってページ全体が支配されます。
• 中： 局所的なコンポーネント、二次的なフロー、または単独のスロップの兆候に影響します。
• 低： ユーザーへの影響が限定的な整理です。未検証の候補は専用のセクションに分けてください。

正確性に関するルール：

• 品質上の指摘は単独で報告できます。スロップに関する指摘には、支配的な兆候または局所的なまとまりが必要です。
• 弱いグローバルシグナル T8、T9、C1、C5 は、単独で根拠にしてはいけません。フォントと色は、レイアウト、文字の階層、コピー、装飾との関係を通じてエビデンスになります。
• 関連する症状は1つとして数えます。アイコンタイルを含む同一の特徴グリッドは、1つの構成上のまとまりとして扱い、両方のルールIDを根拠として記載します。
• 変数、コンポーネントのバリアント、条件付きクラス、共有トークンをたどり、実際に適用される箇所を確認します。
• コンポーネントの構成によってソース上の順序が変わる場合は、見出しの順序をレンダリング後のDOMで確認します。
• コピーや繰り返しに関するルールを適用する前に、ローカライズされた文字列やマッピングされたコンポーネントを追跡し、レンダリング上の役割を確認します。
• 意図的に不適切なUIを表示するデモページは、標本として扱います。実演されている欠陥はそのまま保持します。
• しきい値はスクリーニング値として扱います。最終的な判断では、コンポーネントの役割、実際のサイズ、言語、密度、ビューポートを考慮します。

置き換えの原則

• 構造は内容に従います。 比較する項目には、表や整列したリストが適しています。順序のある内容には、手順が適しています。 物語的な内容には、編集上の流れが適しています。インタラクティブな選択肢には、明確な境界を持つコントロールが適しています。
• 階層にはシステムを用います。 表示、見出し、本文、ラベル、データの役割を明確に定めます。 単一のフォントファミリーでも、サイズ、ウェイト、幅、オプティカルサイズ、間隔によって、強い階層を構成できます。2つ目のフォントファミリーを使うなら、明確な役割が必要です。
• 色には役割を持たせます。 ブランド、アクション、ステータス、強調、サーフェスに色を割り当てます。装飾的なグラデーションや光彩を繰り返すと、それぞれの役割が薄れます。
• 間隔で関係性を伝えます。 関連する項目は近くに配置します。セクション間には、より大きな間隔を設けます。間隔トークンを繰り返し使う場合も、意味上の役割を視覚的に区別できれば有効です。
• モーションで状態、連続性、因果関係を伝えます。 通常のサーフェスは静止させます。意味のあるトランジションを1つ使うほうが、装飾的な効果を多数使うより価値があります。
• 装飾には意味を持たせます。 ドメイン固有の要素、実際の製品 UI、データ、写真、図、ブランドモチーフは、具体性をもたらします。情報を持たない汎用アイコンや図形は、存在意義がありません。
• 非対称性は優先順位に従います。 重要なコンテンツには、より多くのスペースを割り当てます。デザインらしさだけを狙った、根拠のないカードサイズのばらつきは避けます。

46個のルールカタログ

このカタログは、参照資料の内訳を維持しています。決定論的な候補が41個、Judgment ルールが5個、プロバイダー固有の Opt-in 修飾子が4個です。

ビジュアルの詳細

ID	種類	レイヤー	候補と確認方法	修正方法
V1 角丸要素のアクセントボーダー	Slop	Source	同じ汎用カードに、色付きボーダーが >= 2px、角丸が >= 12px で設定されています。枠線付きコントロールや、確立されたグラフィックスタイルには妥当な理由がある場合があります	エッジの表現方法を1つに絞ります。ニュートラルな1pxのボーダーにする、角丸を小さくする、またはボーダーをなくします
V2 あらゆる場所でのグラスモーフィズム	Slop	Judgment	半透明のカードや backdrop-filter: blur が繰り返し使われ、静的なコンテンツを装飾しています。機能的なオーバーレイには、ぼかしを残せる場合があります	不透明なサーフェスを使い、コントラスト、間隔、高さで階層を表現します
V3 側面タブのアクセントボーダー	Slop	Source	カードの一辺に、色付きボーダーが >= 3px で設定されています。ステータスやカテゴリを表しているか確認します	意味がある場合は、ステータスドット、アイコン、ラベル、または控えめな色合いを使います。意味のない装飾は削除します
V4 細いボーダーと大きなシャドウ	Slop	Source + opt-in GPT	同じ要素に1pxのボーダーと、ぼかしの >= 20px のシャドウが設定されています	輪郭のシャープさか、柔らかな立体感のどちらかを残します
V5 繰り返しグラデーションのストライプ	Slop	Source + opt-in GPT	repeating-linear-gradient または repeating-conic-gradient でサーフェスを装飾しています。プログレスインジケーターや図には、このパターンが適している場合があります	単色のサーフェスか、既存のブランドテクスチャを使います
V6 極端に大きな角丸	Slop	Judgment	角丸が >= 24px に設定され、小さなカード、セクション、入力欄が塊のように見えます。ピル、タグ、大きな形状のパネルは、役割に応じた例外です	役割に応じた角丸のスケールを使います。一般的なカードは8～16px程度にします
V7 素人っぽい手描き SVG	Slop	Judgment	複雑なインライン SVG のシーンやマスコットの図形が粗雑です。アイコン、ロゴ、図、データビジュアライゼーションは対象外です	実際のアセットを使う、目的の明確な図に簡略化する、またはイラストを削除します

タイポグラフィ

ID	種類	レイヤー	該当候補と確認方法	修正
T1 平坦な文字階層	スロップ	ソース	隣接する役割の差が約1.25倍未満で、ウェイト、ファミリー、字間、色にもコントラストがない	役割を絞って複合的なコントラストを明確にします。この比率はスクリーニングの目安として使用します
T2 見出しの上に積み重ねられたアイコンタイル	スロップ	ソース	繰り返し使われる機能カードで、角丸の四角いアイコンタイルが見出しのすぐ上に配置されている	アイコンと見出しを揃える、アイコンを通常のフロー内に配置する、またはコンテナを削除します
T3 イタリック体のセリフ体ディスプレイ見出し	スロップ	ソース	汎用的なスタートアップのヒーローで、セリフ体イタリックの >= 32px が先頭に使われている。エディトリアルやファッションの文脈では適切な場合があります	ローマン体を使うか、ブランドの表現スタイルに基づいたディスプレイ処理を使用します
T4 ヒーローのアイブロウまたはピル型チップ	スロップ	ソース	小さく字間を広げた大文字テキスト、またはピル型チップがヒーロー見出しのすぐ上にある。パンくずリスト、ステータス、リリースメタデータは機能上の例外です	情報を見出し、ナビゲーション上の文脈、または本文に統合します
T5 繰り返されるセクションのキッカー	スロップ	ソース	3つ以上のセクションで、同じ字間を広げた大文字のミニラベルが繰り返されている	見出し階層、アーティファクト、セクション固有の構造でナビゲーションを作ります
T6 大きすぎるヒーロー見出し	スロップ	ソース	およそ8語以上の見出しに、>= 48px または text-5xl のスタイルが使われている	主張を短くするか、レスポンシブサイズを小さくして、補足コンテンツが見えるようにします
T7 詰めすぎた字間	スロップ	ソース	ディスプレイテキストの字間が -0.05em より狭い。本文にも負の字間が使われている	文字の形を保ち、0 から -0.02em 程度の控えめな視覚的調整を使用します
T8 過度に使われたフォント	スロップ	ソース、弱い兆候	Inter、Geist、Space Grotesk、Instrument Serif がデフォルトのアイデンティティとして使われている。ブランドやシステム上の制約は妥当な理由です	他の収束シグナルと併せてのみ報告します。新しい書体を提案する前に、既存のフォントで役割を明確にします
T9 すべてに単一のフォントを使用	スロップ	ソース、弱い兆候	すべての役割で、ほぼ同じウェイト、幅、字間、プロポーションの単一ファミリーを使用している	ファミリー内でコントラストを作るか、ディスプレイ、本文、データの役割を明確にした2つ目のファミリーを追加します
T10 本文のすべてを大文字にする	品質	ソース	20語以上程度の段落や長いブロックが大文字で表記されている	文頭のみ大文字にします。大文字は短いラベルに限定します

色とコントラスト

ID	種類	レイヤー	該当候補と確認方法	修正
C1 AI カラーパレット	スロップ	ソース、弱い兆候	ブランドを裏付ける根拠がないのに、紫やバイオレットのグラデーション、または暗色の背景にシアンを組み合わせた配色が支配的になっている	クラスターシグナルとしてのみ報告します。既存のプロダクトの文脈に基づいて、アクション、ステータス、サーフェス、アクセントの色を決めます
C2 光るアクセントを使ったダークモード	スロップ	ソース	暗いサーフェスで、色付きのボックスシャドウやネオンカラーのテキストシャドウが繰り返し使われている。フォーカスリングや意味のある状態を示すグローは例外です	ニュートラルなエレベーションと、範囲を限定した状態インジケーターを使用します
C3 グラデーションテキスト	スロップ	ソース	background-clip: text と透明な塗りを、見出し、数値、または多数のラベルの装飾に使用している	単色のテキストカラーを使い、階層によって強調を表現します
C4 色付き背景上のグレーのテキスト	品質	ソース／レンダー	色味のあるサーフェス上にニュートラルなグレーを配置し、コントラストが不足している	サーフェスの色相に合わせた明るい色または暗い色の色合いを使用し、コントラストを確認します
C5 クリーム色やベージュ色の反射的な使用	スロップ	ソース、弱い兆候	温かみのあるオフホワイトが、パレットの裏付けなしにページ全体の汎用的で上品なサーフェスとして使われている	クラスターシグナルとしてのみ報告します。サーフェス、インク、アクセント、ステータスの色を意図的に設定します

レイアウトと空間

ID	種類	レイヤー	候補と確認方法	修正
L1 ヒーロー指標レイアウト	スロップ	判断	ヒーロー領域で、大きな数値、小さなラベル、補足統計を、ありきたりなアクセント表現や根拠のない主張とともに中央に配置している	製品、成果物、または検証済みの証拠を前面に出し、意味のある指標だけを残す
L2 同一カードのグリッド	スロップ	判断	4つ以上の兄弟要素が、同じサイズでアイコン、見出し、段落を繰り返している。一貫性が役立つ、相互に比較可能なインタラクティブ項目は例外です	コンテンツに合った構造を選ぶ。順位付きレイアウト、表、リスト、アコーディオン、または実際に均一なコントロールを使う
L3 単調な余白	スロップ	ソース	同じ間隔またはパディングのトークンが、項目、グループ、コンポーネント、セクションの境界すべてに使われ、視覚的なリズムがない	間隔のトークンを意味的な関係に対応させ、グループ間に明確なコントラストを作る
L4 入れ子になったカード	スロップ	ソース	入れ子になった3層以上で、枠線、塗り、角丸、またはシャドウが繰り返されている。装飾を繰り返さない意味的なラッパーは対象外です	冗長な面を取り除き、余白、見出し、区切り線、または共有コンテナ1つでグループ化する
L5 番号付きセクションマーカー	スロップ	ソース	01 / 02 / 03 のラベルが、互いに独立したセクションを飾っている	実際の順序、タイムライン、順位、参照に番号を使う
L6 行の長さが長すぎる	品質	レンダリング	文章の1行が約80文字を超えている。コード、表、意図的に設けたデータ領域は対象外です	文章の幅をおよそ 60ch-75ch に制限する
L7 コンテナからはみ出すコンテンツ	品質	レンダリング	テキストまたはメディアがはみ出したり、切れたり、意図しない横スクロールを発生させたりしている	折り返す、幅を制限する、アクセシブルな操作手段を設けて省略表示する、または意図したスクロールを提供する
L8 オーバーフローコンテナで切り取られる位置指定の子要素	品質	レンダリング	overflow: hidden または clip を指定した祖先要素によって、ツールチップ、メニュー、ポップオーバーが切り取られている	レイヤーをクリッピングコンテキストの外に移す、ポータルを使う、または安全な範囲でオーバーフローの設定を変更する

モーション

ID	種類	レイヤー	候補と確認方法	修正
M1 バウンスまたは弾性イージング	スロップ	ソース	ダイアログ、カード、通常のコントロールに、行き過ぎる動きのカーブや繰り返すスプリング効果が使われている。遊び心のある操作や物理的な操作には適している場合があります	控えめなイーズアウトカーブを使い、移動距離を短くする
M2 レイアウトプロパティのアニメーション	品質	ソース	幅、高さ、パディング、マージン、top、left をアニメーションする大規模または繰り返しのトランジションがあり、リフローが発生している	transform と opacity を優先し、高さの変更が必要な場合は範囲を限定した開示パターンを使う
M3 画像のホバートランスフォーム	スロップ	ソース + オプトイン Gemini	ありきたりなカードで、ホバー時に画像を繰り返し拡大または回転させている。製品のズーム操作は機能上の例外です	画像は静止させるか、控えめなオーバーレイ、キャプション、または枠線の変化を使う

コピー

ID	種類	レイヤー	候補と確認方法	修正
P1 emダッシュの多用	スロップ	ソース	本文ブロックに — が3つ以上含まれるか、同等のHTMLエンティティが繰り返し使われている。言語に応じて判断する	文を区切り、読点、コロン、または括弧を使って書き換える
P2 マーケティングの流行語	スロップ	ソース	supercharge、streamline、empower、world-class、enterprise-grade、seamlessly、unlock などのありきたりな主張に、具体的な対象や成果がない	具体的な行動、対象、ユーザー、結果を明示する
P3 格言調のリズム	スロップ	ソース	複数のセクションで、Not X. Y. や Less X. More Y. のようなパターンが繰り返されている	製品の事実を直接述べ、自然な文のリズムに置き換える
P4 劇場になぞらえたコピー	スロップ	ソース + オプトイン GPT	実際に生じる問題を説明せずに、マーケティングであるカテゴリを theater として退けている。security theater のような定着した専門用語には、文脈が必要です	振る舞い、制約、または結果を直接述べる

画像

ID	種類	レイヤー	該当箇所と確認方法	修正方法
I1 画像の破損またはプレースホルダー	品質	ソース	レンダリングされた画像マークアップの src がない、または空、#、既知のプレースホルダーサービス、プレースホルダーの API パスを指定している場合です。条件分岐も確認してください	実際のアセット、認可済みの生成アセット、代替表示を使用するか、要素を削除してください

全般的な品質

ID	種類	レイヤー	該当箇所と確認方法	修正方法
Q1 余白が狭い	品質	レンダリング	テキストやコントロールが、枠線や色付きの縁から約 8px 以内に配置されています。密度の高い表や小さなバッジには、それぞれの役割に応じた間隔を使用してください	コンポーネントの役割に合った十分な内側の余白を設けてください。一般的なコントロールやカードでは 12〜16px が適しています
Q2 本文がビューポートの端に接している	品質	レンダリング	特にモバイルで、本文がビューポートの端まで達しています。全幅のメディアは対象外です	レスポンシブなコンテンツ余白を追加してください。狭い画面では通常、少なくとも 16px が必要です
Q3 両端揃えのテキスト	品質	ソース	画面上の本文に、適切なハイフネーションと言語サポートがないまま text-align: justify が使用されています	本文を左揃えにするか、編集用途に合わせてテスト済みのハイフネーションを有効にしてください
Q4 コントラストが低いテキスト	品質	ソース／レンダリング	テキストが WCAG AA の基準を満たしていません。通常のテキストでは 4.5:1、大きなテキストでは 3:1 が必要です。変数、アルファ値、グラデーション、画像は、レンダリング後の確認が必要です	前景色、背景色、ウェイト、サイズを調整し、計算後の結果を確認してください
Q5 見出しレベルの飛び越し	品質	ソース／レンダリング	レンダリングされた見出し構造が h1 から h3 などへ飛んでいます	意味的なレベルを順番に戻し、見た目のスタイルはクラスで指定してください
Q6 行間が狭い	品質	ソース	複数行の本文で、行の高さが約 1.3 未満になっています。ディスプレイ見出しは役割に応じた例外です	書体とサイズに応じて、およそ 1.45-1.7 を使用してください
Q7 本文の文字が小さい	品質	ソース	本文の文字サイズが 12px 未満です。12〜13px の本文も可読性に懸念があります。キャプションや密度の高いデータラベルは、文脈に応じて判断してください	本文には少なくとも 14px を使用してください。16px は標準値として適しています
Q8 本文の字間が広い	品質	ソース	段落の字間が 0.05em を超えています	通常の字間に戻し、広い字間は短いラベルに限定してください

カタログ以外の構成チェック

ページ単位の以下のチェックでは、リファレンスギャラリーに掲載されている合成的な見本を検出できます。

• X1 動きの過剰: 多数の要素が現れたり、浮いたり、脈動したり、揺れたり、跳ねたりしています。動きは、説明が必要な状態変化または空間関係だけに結び付けてください。
• X2 装飾の優先順位の逆転: アイコンのコンテナ、バッジ、装飾が、それらが導入するメッセージより大きな視覚的ウェイトを占めています。縮小するか、削除してください。
• X3 UX ライティングの重複: ラベル、サブラベル、補足テキスト、プレースホルダー、ヒントで同じ情報を繰り返しています。必要事項を網羅する最短の説明を残し、新しい情報を加える補足テキストは維持してください。
• X4 モーダルの乱用: スクロールや複数列、複数セクションを含むワークフローがモーダル内にあります。継続的な作業はページまたはパネルに移し、モーダルは範囲の限られた判断に使用してください。

修正の順序

見た目だけの変更が繰り返されるのを防ぐため、次の順序で修正してください。

1. 動作不良、アクセシビリティ、オーバーフロー、可読性。
2. 情報設計と、根拠のないコンテンツ。
3. 繰り返し使用されるページテンプレート、カードの構成、コンテナの階層。
4. 文字の階層、余白のリズム、色の役割。
5. 装飾的な枠線、グラデーション、グロー、角丸、アイコン、動き。
6. コピーのリズムと重複するラベル。

システムレベルの変更を加えるたびに、ページを再確認してください。プリミティブを一つ編集するだけで、複数の局所的な問題を解消できる場合があります。

検証

• 最終差分を確認し、デフォルト設定の入れ替わり、新たな依存関係、根拠のない主張、無関係な変更がないかを調べます。
• 変更規模に応じて、プロジェクト既存のフォーマッター、型チェック、テスト、ビルドを実行します。
• 描画を確認できる場合は、デスクトップとモバイルの幅、横スクロール、行の長さ、コントラスト、ポップオーバーのはみ出し、キーボードフォーカス、モーションの軽減、コンテンツの展開を確認します。
• 描画を確認できない場合は、描画レイヤーの項目をすべて未検証として列挙します。確認済みの不具合として提示してはいけません。
• 最終確認として、次の4つのテストを行います。
  • 入れ替えテスト： 別の製品に適用する場合、意味のある視覚的・内容的な変更が必要になります。
  • 階層テスト： 装飾に頼らず、最も重要なコンテンツに注意が向きます。
  • システムテスト： 繰り返し使われる値が一貫した役割を示し、例外も意図的に設定されています。
  • 節度テスト： 強い視覚効果にはそれぞれ明確な役割があります。

報告

レビューの場合は、重大度の高い順に、ファイル名と行番号を添えて指摘事項を最初に列挙します。編集の場合は、実装した結果を最初に示し、重要な変更点を列挙します。詳しい説明が役立つ場合は、次の形式を使用します。

DIRECTION
Internal logistics dashboard: dense, calm, utilitarian; operational data carries priority.

FINDINGS OR CHANGES
Location              | Rule    | Confidence | Evidence                    | Action
src/Form.tsx:31       | C4      | Confirmed  | gray text on blue surface   | use blue-tinted light text
src/Card.tsx:12       | V3      | Probable   | border-l-4 on status card   | replace with status dot
src/page.tsx:44       | L2/T2   | Probable   | six identical feature cards | use ranked comparison list

NEEDS RENDERED VERIFICATION
src/Popover.tsx:18    | L8      | Candidate  | clipped ancestor found      | verify open state at mobile width

EXEMPTIONS
src/Steps.tsx:9       | L5      | Exempted   | markers label a real sequence

VALIDATION
typecheck passed; mobile render checked; no horizontal overflow

報告は簡潔にしてください。変更がこの製品に適している理由を説明します。削除したクラスの一覧よりも、変更後のデザインの考え方を説明するほうが有益です。