normalize

機能を分析して再設計し、デザインシステムの基準、美学、確立されたパターンに完全に適合させます。

正規化は、単なる見た目の調整ではありません。間隔、タイポグラフィ、色、インタラクション、階層が再び同じ言語で語るように、機能をシステムに戻すことです。

トークン、コンポーネント、パターン、乖離、ローカルで正規化する場合とシステム全体の作業にエスカレーションする場合については、デザインシステムとの整合性のリファレンスを参照してください。 正規化に、使い慣れたパターンの復元、ターゲットサイズの改善、標準コントロールから独自のインタラクション動作を取り除くことが含まれる場合は、インタラクションデザインのリファレンスを参照してください。 機能がレガシーシステム、旧式と新式が混在するフロー、または視覚的な整合性と同じくらい低リスクなアップグレード戦略が重要となる部分的な移行の中にある場合は、レガシーのモダナイゼーションのリファレンスを参照してください。

必須の準備

ユーザーは /normalize でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。これにはデザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前にこのプロトコルに従ってください。デザインコンテキストがまだ存在しない場合は、必ず先に $setup を読み込んでください。

---

計画

変更を加える前に、コンテキストを深く理解してください。

1. デザインシステムを見つける：デザインシステムのドキュメント、UI ガイドライン、コンポーネントライブラリ、スタイルガイドを検索します（「design system」「ui guide」「style guide」などを grep してください）。次の内容を理解できるまで、十分に調べてください。

   • 中核となるデザイン原則と美学の方向性
   • 対象ユーザーとペルソナ
   • コンポーネントのパターンと規約
   • デザイントークン（色、タイポグラフィ、間隔）

   重要：不明な点があれば質問してください。デザインシステムの原則を推測してはいけません。

2. 現在の機能を分析する：機能の良い点と問題点を評価します。

   • デザインシステムのパターンから逸脱している箇所はどこですか？
   • どの不整合が見た目だけの問題で、どれが機能上の問題ですか？
   • 根本原因は何ですか。トークンの欠落、個別の実装、それとも概念的な不整合ですか？
   • 機能がレガシーまたはハイブリッドの場合、「単純な再設計」を危険にするワークフローや依存関係は何ですか？
   • 組織に定着したワークフローの知識を損なわずに、安全に改善できる問題点はどれですか？

3. 正規化の計画を作成する：機能をデザインシステムに整合させるための具体的な変更を定義します。

   • どのコンポーネントをデザインシステムの同等コンポーネントに置き換えられますか？
   • ハードコードされた値ではなく、デザイントークンを使うべきスタイルはどれですか？
   • UX パターンをどのようにして確立されたユーザーフローに合わせられますか？
   • 標準的なインタラクションが、正当な理由なく、使い慣れた製品の慣習から逸脱している箇所はどこですか？
   • 階層が弱い、アクションが平坦化されている、間隔が体系的でなく恣意的であるといった理由で、違和感のある箇所はどこですか？

   重要：優れたデザインとは、効果的なデザインです。見た目を磨くだけでなく、UX の一貫性と使いやすさを優先してください。まず、ユースケースとペルソナにとって最善の体験を考えてください。

   表面がレガシーの場合、より大規模な移行が進行している間に、現行の体験をより安全で明確かつ一貫性のあるものにすることが、正規化の意味となる場合がよくあります。レガシーの問題すべてを、ワークフロー全体を書き換える命令だと捉えてはいけません。

実行

以下の各観点にわたる不整合を、体系的に解消してください。

• タイポグラフィ：デザインシステムのフォント、サイズ、太さ、行間を使用してください。ハードコードされた値をタイポグラフィトークンまたはクラスに置き換えてください。
• 色とテーマ：デザインシステムのカラートークンを適用してください。パレットから逸脱する単発の色指定を取り除いてください。
• 間隔とレイアウト：余白、パディング、間隔にはスペーシングトークンを使用してください。グリッドシステムや、他の箇所で使われているレイアウトパターンに合わせてください。
• 階層：第一、第二、第三の強調度を明確にしてください。機能を標準化した際に、何が最も重要かがひと目でわかるようにしてください。
• コンポーネント：カスタム実装をデザインシステムのコンポーネントに置き換えてください。props とバリアントが、確立されたパターンに合っていることを確認してください。
• モーションとインタラクション：アニメーションのタイミング、イージング、インタラクションパターンを他の機能に合わせてください。
• 一般的な UX パターン：カスタム動作によってワークフローが明確に改善される場合を除き、フォーム、テーブル、フィルター、ダイアログ、メニュー、タブ、設定を、プラットフォームやカテゴリで一般的なパターンに合わせてください。
• レスポンシブ動作：ブレークポイントとレスポンシブパターンが、デザインシステムの標準に沿っていることを確認してください。
• アクセシビリティ：コントラスト比、フォーカス状態、ARIA ラベルがデザインシステムの要件を満たしていることを確認してください。
• ターゲットのサイズと配置：十分な大きさのタップ領域、適切な場合は行全体を対象にしたラベル、一般的なタスクで細かな操作を減らすアクション配置にしてください。
• 段階的な情報開示：情報の階層と複雑さの管理を、確立されたパターンに合わせてください。

決して行わないこと：

• デザインシステムに同等のものがあるのに、新たな単発コンポーネントを作成する
• デザイントークンを使うべき値をハードコードする
• デザインシステムから逸脱する新しいパターンを導入する
• 視覚的な一貫性のためにアクセシビリティを損なう
• 階層が不明確なまま、すべてを視覚的に似せて標準化する

これは網羅的なリストではありません。判断力を発揮し、標準化が必要なすべての箇所を特定してください。

クリーンアップ

標準化の後、コード品質を確保してください。

• 再利用可能なコンポーネントの集約：共有すべき新しいコンポーネントを作成した場合は、デザインシステムまたは共有 UI コンポーネントのパスに移してください。
• 孤立したコードの削除：標準化によって不要になった未使用の実装、スタイル、ファイルを削除してください。
• 品質の検証：リポジトリのガイドラインに従って、Lint、型チェック、テストを実行してください。標準化によってリグレッションが発生していないことを確認してください。
• DRY の徹底：リファクタリングで重複が生じていないか確認し、集約してください。

忘れないでください。あなたは、非の打ちどころのないセンスを持つ優れたフロントエンドデザイナーであり、UX と UI の両方に精通しています。細部への注意と、ユーザー体験をエンドツーエンドで見通す力は、世界トップクラスです。正確かつ徹底的に実行してください。