ui-design-grounding

UIをマルチデバイス・レスポンシブに適応させる。ブレイクポイント設計・入力方式対応・セーフエリア・レイアウト変形を実施する。レスポンシブ対応・モバイル対応・マルチデバイス対応を依頼されたときに使用する。

UIにモーション・アニメーションを追加する。エントランスアニメーション・マイクロインタラクション・状態遷移・ナビゲーション効果を目的を持って追加する。アニメーション追加・モーション設計・トランジション改善を依頼されたときに使用する。

UIのレイアウト・余白・視覚階層を修正・改善する。グリッドシステム・スペーシングリズム・視覚的優先順位・カード使用の適切さを最適化する。レイアウトが崩れている・余白が不統一・階層が不明確なときに使用する。

UIの技術品質を監査する。アクセシビリティ・パフォーマンス・テーミング（トークン）・レスポンシブ・アンチパターンの5次元でスコアリングし、具体的な改善箇所を特定する。UI監査・品質チェック・技術レビューを依頼されたときに使用する。

安全すぎる・無難すぎるUIデザインの印象を強める。フォントの個性・色の大胆さ・空間的ドラマ・視覚効果・モーションを意図的に増幅する。デザインが地味・退屈・テンプレート的・印象が弱いと感じたときに使用する。

過剰・うるさいUIデザインの印象を抑える。ビジュアルノイズの削減・色の簡素化・余白の引き締め・装飾要素の削除で洗練させる。デザインがうるさい・ごちゃごちゃ・派手すぎる・情報過多と感じたときに使用する。

UIのテキスト・コピー・ワーディングを改善する。ボタンラベル・エラーメッセージ・ガイダンス・空状態テキストの明確化、用語の統一、ユーザー視点への書き換えを行う。文言が分かりにくい・用語がバラバラ・メッセージが不親切なときに使用する。

要件・仕様からUI/UXの構造と設計方針を整理する。画面構成・遷移・情報設計・ワーディング方向性を、実装を見据えた形で提案する。新規UI設計・画面設計・UI構造の検討を依頼されたときに使用する。

UIからコンポーネント・デザイントークンを抽出する。繰り返し使われるパターンを再利用可能な単位に分解し、トークン化する。コンポーネント化・トークン抽出・デザインシステム整備を依頼されたときに使用する。

UIのエッジケース・堅牢性を強化する。テキストオーバーフロー・国際化対応・エラー耐性・境界値・アクセシビリティエッジケースを体系的にチェックし修正する。堅牢化・エッジケース対応・i18n対応・エラーハンドリング強化を依頼されたときに使用する。

UI/UXデザインの意図を実装視点に翻訳・整理する。コンポーネント分解・責務整理・UI状態の洗い出し・実装構造の設計を行う。デザインからの実装・コンポーネント設計・実装プラン策定を依頼されたときに使用する。

プロジェクトルートにDESIGN.mdを作成・更新する。既存コード・CSS・デザイントークンを分析し、Google Stitch / getdesign.md 互換の9セクション構成（Visual Theme, Color Palette, Typography, Components, Layout, Elevation, Do's/Don'ts, Responsive, Agent Prompt Guide）でデザインシステムドキュメントを生成する。各セクションはAIエージェントが直接参照して実装に使えるレベルの具体値（hex, px, CSS shadow値等）をインラインで含む。DESIGN.md作成・デザインシステム定義・ガイドライン策定・デザイントークン整理・ブランド定義を依頼されたときに使用する。デザインガイドラインが不明確な場合にも使用する。

UIのパフォーマンスを最適化する。Core Web Vitals・レンダリング性能・アニメーション性能・バンドルサイズ・画像最適化を分析し改善する。パフォーマンス改善・速度向上・表示最適化を依頼されたときに使用する。

UIのリリース前最終仕上げを行う。視覚的アラインメント・タイポグラフィ・色・インタラクション状態・マイクロインタラクション・コンテンツ・フォーム・エッジケース・レスポンシブ・パフォーマンスをチェックリスト駆動で確認し、問題を実際に修正する。仕上げ・ポリッシュ・最終チェック・リリース前確認を依頼されたときに使用する。

UXヒューリスティクス評価を実施する。ニールセンの10ヒューリスティクスで採点し、ペルソナベースのレッドフラグテストを行い、UX品質を構造的に評価する。UXレビュー・ヒューリスティクス評価・ユーザビリティ評価を依頼されたときに使用する。

UIを本質へ削ぎ落とす。不要な要素・重複情報・過剰な装飾を削除し、情報を簡素化してUIをスリムにする。画面が複雑すぎる・情報が多すぎる・UIを簡素化したい・蒸留したいときに使用する。

UIのタイポグラフィを修正・改善する。フォント選定・階層設計・サイズスケール・垂直リズム・可読性を最適化する。文字が読みにくい・フォントが合わない・テキスト階層が不明確なときに使用する。

UI・UX・画面・ユーザーインターフェース・フロントエンドの設計・実装プラン策定・実装・コード修正などを行う際に、設計意図と判断軸を整理してからプランや実装に落とす。具体的な実装プランが明示されている場合でも必要な知識を活用して実装を進める。本スキルは独立コマンドスキル（audit-ui, score-ui 等）のナレッジベースとして機能する。

UI Design Grounding プラグインの全コマンド一覧をカテゴリ別に表示する。コマンドの意味・使い分けが分からないとき、どのコマンドを使うべきか迷ったときに使用する。「UIコマンド一覧」「どのコマンドを使えばいい？」「スキル一覧」と聞かれたときにも使用する。