polish

必須の事前準備

/impeccable を実行してください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前にプロトコルに従ってください。まだデザインのコンテキストがない場合は、必ず最初に /impeccable teach を実行してください。さらに、品質基準（MVP かフラッグシップ機能か）も確認してください。

---

細部まで入念に最終確認し、良い成果と優れた成果を分ける小さな要素をすべて見つけてください。リリース可能な状態と、磨き上げられた状態の違いです。

デザインシステムの確認

仕上げに入る前に、目指すデザインシステムを把握してください。

1. デザインシステムを見つける：デザインシステムのドキュメント、コンポーネントライブラリ、スタイルガイド、トークン定義を検索します。中核となるパターン（色トークン、間隔のスケール、タイポグラフィスタイル、コンポーネント API）を確認します。
2. 規約を確認する：共有コンポーネントはどのようにインポートされていますか？どの間隔スケールが使われていますか？どの色がトークン由来で、どれがハードコードされていますか？どのようなモーションやインタラクションのパターンが定着していますか？
3. 乖離を特定する：対象機能はシステムからどこで逸脱していますか？トークンを使うべきハードコード値、共有コンポーネントと重複するカスタムコンポーネント、スケールと一致しない間隔などを確認します。

デザインシステムがある場合は、それに合わせて機能を仕上げてください。ない場合は、コードベースに見られる規約に沿って仕上げてください。

仕上げ前の評価

現在の状態と目標を把握してください。

1. 完成度を確認する：

   • 機能的に完成していますか？
   • 維持すべき既知の問題はありますか？（TODO を付けてください）
   • 品質基準は何ですか？（MVP かフラッグシップ機能か？）
   • リリースはいつですか？（仕上げに使える時間はどのくらいですか？）

2. 仕上げが必要な箇所を特定する：

   • 視覚的な不整合
   • 間隔や配置の問題
   • インタラクション状態の不足
   • コピーの不統一
   • エッジケースやエラー状態
   • ロードやトランジションの滑らかさ

重要：仕上げは最初ではなく、最後の工程です。機能的に完成していない作業を仕上げないでください。

体系的に仕上げる

次の観点に沿って、順序立てて確認してください。

視覚的な配置と間隔

• ピクセル単位で正確に配置する：すべてをグリッドに揃えます
• 間隔を統一する：すべての余白に間隔スケールを使います（13px のような不規則な余白は使いません）
• 視覚的なバランスを整える：視覚的な重さを考慮して調整します（アイコンは視覚的に中央に見えるよう、位置を調整する必要がある場合があります）
• レスポンシブな一貫性：すべてのブレークポイントで間隔と配置が適切に機能します
• グリッドに沿わせる：要素をベースライングリッドに揃えます

確認項目：

• グリッドオーバーレイを有効にして配置を確認します
• ブラウザーのインスペクターで間隔を確認します
• 複数のビューポートサイズでテストします
• 見た目に違和感のある要素がないか確認します

タイポグラフィの調整

• 階層の一貫性：同じ要素には常に同じサイズと太さを使います
• 行長：本文は 45〜75 文字にします
• 行の高さ：フォントサイズと文脈に適した値にします
• ウィドウとオーファン：最終行に単語がひとつだけ残らないようにします
• ハイフネーション：言語とカラム幅に適した設定にします
• カーニング：必要に応じて文字間隔を調整します（特に見出し）
• フォントの読み込み：FOUT/FOIT によるちらつきを防ぎます

色とコントラスト

• コントラスト比：すべてのテキストが WCAG の基準を満たすようにします
• トークンの一貫した使用：色をハードコードせず、すべてデザイントークンを使います
• テーマの一貫性：すべてのテーマバリエーションで適切に表示されるようにします
• 色の意味：同じ色は全体を通じて同じ意味を持つようにします
• アクセシブルなフォーカス：十分なコントラストのあるフォーカスインジケーターを表示します
• 色味のあるニュートラルカラー：純粋なグレーや純粋な黒は使わず、わずかな色味を加えます（彩度 0.01）
• 色付き背景上のグレー：色付き背景にグレーのテキストを置かず、その色の濃淡か透明度を使います

インタラクション状態

すべてのインタラクティブ要素に、次の状態が必要です。

• デフォルト：通常の状態
• ホバー：控えめなフィードバック（色、拡大縮小、影）
• フォーカス：キーボードフォーカスのインジケーター（代替手段なしに削除しないでください）
• アクティブ：クリック／タップ時のフィードバック
• 無効：操作できないことが明確な状態
• 読み込み中：非同期アクションのフィードバック
• エラー：検証エラーまたはエラー状態
• 成功：正常に完了した状態

状態が不足すると、混乱や使いにくさにつながります。

マイクロインタラクションとトランジション

• スムーズなトランジション：すべての状態変化に適切なアニメーションを付けます（150～300ms）
• 一貫したイージング：自然に減速する ease-out-quart/quint/expo を使用します。バウンスや弾性効果は古くさく感じられるため、使用しないでください。
• カクつきがないこと：アニメーションは 60fps を維持し、transform と opacity のみをアニメーション化します
• 適切な動き：動きには目的を持たせ、装飾目的で使わないでください
• 動きを減らす設定：prefers-reduced-motion を尊重します

コンテンツと文言

• 用語の一貫性：同じものには、常に同じ名前を使います
• 大文字表記の一貫性：タイトルケースとセンテンスケースのどちらを使うかを統一します
• 文法とスペル：誤りがないこと
• 適切な長さ：冗長すぎず、簡潔すぎないこと
• 句読点の一貫性：文には句点を付け、ラベルには付けません（すべてのラベルに付ける場合を除く）

アイコンと画像

• スタイルの一貫性：すべてのアイコンを同じファミリーのもの、または統一感のあるスタイルにします
• 適切なサイズ：用途に応じてアイコンのサイズを統一します
• 適切な配置：アイコンを隣接するテキストと見た目上そろえます
• 代替テキスト：すべての画像に内容を説明する代替テキストを付けます
• 読み込み状態：画像によるレイアウトシフトを防ぎ、適切なアスペクト比を設定します
• Retina 対応：高 DPI 画面向けに 2x のアセットを用意します

フォームと入力

• ラベルの一貫性：すべての入力欄に適切なラベルを付けます
• 必須項目の表示：明確で一貫した表示にします
• エラーメッセージ：役に立つ、一貫性のあるメッセージにします
• タブ順序：キーボードで論理的に移動できる順序にします
• 自動フォーカス：適切に設定します（多用しないでください）
• 検証のタイミング：フォーカスを外したときと送信時のどちらで検証するかを統一します

エッジケースとエラー状態

• 読み込み状態：すべての非同期アクションで読み込み状況を示します
• 空の状態：何もない空間を表示するのではなく、役に立つ空の状態を用意します
• エラー状態：復旧方法がわかる、明確なエラーメッセージを表示します
• 成功状態：アクションが成功したことを確認できるようにします
• 長いコンテンツ：非常に長い名前や説明などを適切に処理します
• コンテンツなし：データが欠けていても問題なく処理します
• オフライン：適切にオフライン状態を処理します（該当する場合）

レスポンシブ対応

• すべてのブレークポイント：モバイル、タブレット、デスクトップでテストします
• タッチターゲット：タッチデバイスでは最小 44x44px にします
• 読みやすいテキスト：モバイルでは 14px 未満のテキストを使用しません
• 横スクロールを防止：コンテンツをビューポートに収めます
• 適切なリフロー：コンテンツが論理的に適応するようにします

パフォーマンス

• 初期読み込みの高速化：クリティカルパスを最適化します
• レイアウトシフトを防止：読み込み後に要素が動かないようにします（CLS）
• スムーズな操作：遅延やカクつきがないこと
• 画像の最適化：適切な形式とサイズを使用します
• 遅延読み込み：画面外のコンテンツを遅延読み込みします

コード品質

• コンソールログを削除：本番環境にデバッグログを残しません
• コメントアウトしたコードを削除：不要なコードを整理します
• 未使用のインポートを削除：未使用の依存関係を整理します
• 命名の一貫性：変数と関数の名前を規約に従って付けます
• 型安全性：TypeScript の any や無視されたエラーをなくします
• アクセシビリティ：適切な ARIA ラベルとセマンティック HTML を使用します

仕上げのチェックリスト

以下を順に確認してください。

• すべてのブレークポイントで視覚的な配置が完璧である
• スペーシングにデザイントークンが一貫して使われている
• タイポグラフィの階層が一貫している
• すべてのインタラクティブな状態が実装されている
• すべてのトランジションが滑らかである（60fps）
• 文言に一貫性があり、洗練されている
• アイコンに一貫性があり、サイズも適切である
• すべてのフォームに適切なラベルが付いており、検証されている
• エラー状態が役立つ内容になっている
• 読み込み状態が明確である
• 空の状態が親しみやすい
• タッチターゲットが最小44x44pxである
• コントラスト比がWCAG AAを満たしている
• キーボードでのナビゲーションが機能する
• フォーカスインジケーターが見える
• コンソールエラーや警告がない
• 読み込み時にレイアウトシフトがない
• サポート対象のすべてのブラウザーで動作する
• 動きを減らす設定を尊重している
• コードがクリーンである（TODO、console.logs、コメントアウトされたコードがない）

重要：仕上げは細部が肝心です。拡大して見てください。目を細めて見てください。実際に使ってみてください。小さなことが積み重なります。

絶対にしないこと：

• 機能が完成する前に仕上げに取りかかる
• 30分後にリリースするものの仕上げに何時間も費やす（優先順位を判断する）
• 仕上げの最中にバグを持ち込む（徹底的にテストする）
• 系統的な問題を無視する（どこでもスペーシングがずれているなら、システムを修正する）
• ほかの箇所を粗雑なままにして、一つの箇所だけを完璧にする（一貫した品質を保つ）
• デザインシステムに相当するものがあるのに、新たに単発のコンポーネントを作る
• デザイントークンを使うべき値をハードコードする

最終確認

完了とする前に、次を確認してください。

• 自分で使ってみる：機能を実際に操作します
• 実機でテストする：ブラウザーのDevToolsだけで済ませません
• 誰かにレビューを依頼する：新鮮な視点で見落としに気づけます
• デザインと比較する：意図したデザインと一致させます
• すべての状態を確認する：正常系だけをテストしないでください

クリーンアップ

仕上げの後、コードの品質を確保します。

• カスタム実装を置き換える：デザインシステムに、再実装したコンポーネントが用意されている場合は、共通のバージョンに切り替えます。
• 孤立したコードを削除する：仕上げによって不要になった未使用のスタイル、コンポーネント、ファイルを削除します。
• トークンを集約する：新しい値を追加した場合、トークンにすべきか確認します。
• DRYを確認する：仕上げの過程で重複が生じていないか確認し、集約します。

忘れないでください。あなたには非の打ちどころのない細部への注意力と、優れた審美眼があります。自然で意図が感じられ、完璧に機能するまで仕上げてください。細部までこだわりましょう。細部が大切です。