インターフェースの磨き込み（Interface Polish）
このスキルは、ユーザーが既存のインターフェースをもっと完成度の高いものにしたいと感じたとき、または小さな視覚的ディテールが重要なコンポーネントを実装するときに使用します。プロダクトのビジュアル・アイデンティティ、情報設計、またはインタラクションモデルを変更せずに、明瞭さ、一貫性、フィードバックを向上させます。ただし、明示的に依頼された場合はこの限りではありません。
ローカルなビジュアル言語を確立する
編集を始める前に、フレームワーク、スタイリング手法、コンポーネントライブラリ、デザイントークン、および周辺のコンポーネントの慣例を特定してください。既存のシステムに従い、共有されているコンポーネントと値を再利用してください。多くの局所的な修正よりも、共有ソースでの1回の修復を優先します。磨き込みのために依存関係や新しいスタイリングシステムを追加しないでください。
視覚的一貫性は明確な証拠ですが、個人の好みは欠陥ではありません。フラットなサーフェスや控えめなモーションなど、プロジェクトで意図的に採用されている慣例が一貫して適用されている場合は、それを維持してください。
適切なモードを選択する
実装（Implementation）。 観測された問題を解決する、または明示的に依頼された処理を完了する変更のみを行います。動作はアクセシブルに保ち、実装はプロジェクトにとって慣用的にします。
レビュー（Review）。 実装も依頼されていない限り、読み取り専用にします。検査範囲を明記し、関連する状態を評価し、レンダリングされたインターフェースまたはソースの証拠によって裏付けられた所見のみを報告します。観測されていない視覚的な動作を事実として提示しないでください。
どちらのモードでも、判断ガイド、状態カバレッジ、報告フォーマットについては references/polish-checklist.md を参照してください。実装の場合、プロジェクトの実際のスタック（CSS、Tailwind、React Motion、GSAP、または Three.js）に該当する場合にのみ references/implementation-recipes.md を参照してください。色、フォーカス、モーション、コントロール、ターゲットサイズに関する作業については references/wcag-accessibility.md を参照し、前景色と背景色が16進数に解決できる場合は scripts/check_contrast.py を実行してください。
高価値な改善を適用する
- テキスト: コンテンツの長さとビューポートに基づいて行の折り返しを選択し、ライブの数値が変化して幅が変わり、周囲のコンテンツを乱す場合は、その値を安定させます。
- サーフェス: ネストされた角丸、奥行き、画像のエッジ、アイコンの配置を視覚的な関係として扱います。レンダリングされたコンテキストで見た目がおかしい場合にそれらを修正します。
- フィードバック: 通常、ホバー、フォーカス、押下、選択、ローディング、無効の各状態を簡単に区別できるようにします。モーションを変更があった唯一のサインにしないでください。
- モーション: ユーザー主導の状態変更には可逆的なトランジションを使用します。ステージングされたモーションは、階層や方向を説明するような頻度の低い瞬間にのみ使用します。
prefers-reduced-motionを尊重します。 - 入力コンテキスト: タッチデバイスにスティッキーホバー処理を継承させないでください。コントロールを磨き込みながらも、フォーカスの視覚的な動作、キーボード操作、実用的なターゲットサイズを維持します。
ユーザーに利益のない装飾的な変更は避けてください。広範なトランジション、永続的なパフォーマンスヒント、または日常的な操作を遅くしたり解釈しにくくするモーションを使用しないでください。