mcpField
U
ui-ux-polish

ui-ux-polish

github.com/oakossデザイン・UI20542 回インストール10 週間前に更新
リポジトリ

ui-ux-polish について

動作するウェブアプリを段階的に改善するスキルです。デスクトップとモバイルを分けて扱い、視覚デザインとアクセシビリティの指針を示します。

主な機能

  1. 01段階的なUI改善
  2. 02デスクトップとモバイルを個別に最適化
  3. 03視覚パターンの指針
  4. 04アクセシビリティの確認
  5. 05動きと操作性の指針

活用シーン

  1. 01動作するウェブアプリの仕上げ
  2. 02グラスモーフィズムやBentoグリッドの適用
  3. 03キーボード操作とフォーカス状態の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill ui-ux-polish

インストール後、Claude Code で/ui-ux-polishを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
accessibility.md
animation-and-microinteractions.md
design-patterns.md
polish-workflow.md

詳細

UI/UX の仕上げ

動作するウェブアプリケーションを、まずまずの状態から最高水準へと高めるための反復的な改善ワークフローです。デスクトップとモバイルをそれぞれ別のモダリティとして最適化する方法、ビジュアルデザインのパターン、アクセシビリティ基準を扱います。

使用する場合：基本的なスタイルが適用され、アプリが正しく動作していて、反復的な改善によってビジュアル品質を高めたい場合に使用します。特定のデザインパターン（グラスモーフィズム、ニューモーフィズム、ベントーグリッド）の適用や、アクセシビリティの監査にも使用します。

使用しない場合：アプリが壊れている、または不具合がある場合（まずバグを修正してください）、スタイルが根本的に間違っている場合（全面的な見直しが必要です）、または基本的なデザインシステムがまだ存在しない場合です。

クイックリファレンス

パターン手法ポイント
反復的な仕上げ同じ仕上げ用プロンプトを10回以上実行する小さな改善が積み重なり、大きな効果を生みます
デスクトップ／モバイルの分離各モダリティを個別に最適化する両方に悪影響を与える妥協を防ぎます
グラスモーフィズムbackdrop-blur-xl + bg-white/70 + 枠線読みやすさを保ちながら、機能的な奥行きを加えます
ニューモーフィズム2方向のボックスシャドウライトモードに最適です。アクセシビリティのために枠線を使用します
ベントーグリッドrounded-3xl のセルを使った CSS Gridヒーローセルを複数の列／行にまたがらせます
WCAG 2.2 AAコントラスト比 + ターゲットサイズ + 可視フォーカステキストは4.5:1、UIは3:1、ターゲットは24x24px
動きを抑える設定prefers-reduced-motion: reduce動きに敏感なユーザー向けにアニメーションを無効にします
セマンティック HTMLランドマーク + 見出し階層 + ネイティブ要素<div role="button"> ではなく <button> を使用します
インクルーシブデザイン複数の入力方法 + エラーへの寛容さキーボード、音声、タッチを等しくサポートします
タイポグラフィの階層明確なレベルを持つ一貫したスケールフォントサイズ、太さ、間隔のリズム
余白のリズム一貫したパディングとマージンのスケールデザイントークンの倍数（4px、8px、16px）を使用します
ホバー／フォーカス状態すべてのインタラクティブ要素で視覚的なフィードバックを示すキーボードユーザーには視認できるフォーカスインジケーターが必要です
アニメーション／トランジション入場はease-out、退出はease-in、100～300msGPU合成にはtransform／opacityを優先します
マイクロインタラクションボタンの押下、切り替え、フォーカス、成功／エラー常にprefers-reduced-motionを尊重します

よくある間違い

間違い正しいパターン
壊れたアプリに仕上げを適用するまずすべての機能上のバグを修正し、その後に反復的な仕上げを適用します
多数の小さな改善ではなく、一度に大きく変更する10回以上反復します。段階的な改善が積み重なります
デスクトップとモバイルを同時に最適化するそれぞれを別のモダリティとして扱い、個別に最適化します
変更がわずかに見えた時点でやめる反復を続けます。細かな余白やタイポグラフィの調整も積み重なります
すべての要素にグラスモーフィズムを適用するカードとモーダルにのみ、グラス効果を計画的に使用します
アクセシビリティ用の枠線なしでニューモーフィズムを使う弱視ユーザーのために1pxの枠線を追加します（コントラスト要件）
prefers-reduced-motionを無視するCSSで常にシステムの動きに関する設定を尊重します
<button>の代わりに、クリックハンドラーを設定した<div>を使うアクセシビリティが組み込まれたネイティブのセマンティックHTML要素を使用します

委任

  • デスクトップとモバイルの仕上げを並行して実施：各モダリティの仕上げ作業を別々に行うため、Task エージェントを使用します
  • ビジュアルリグレッションの検証：仕上げの反復によってレイアウトやアクセシビリティが損なわれていないか確認するため、Explore エージェントを使用します
  • デザインシステムとの整合性を計画：仕上げの前に、スペーシング、タイポグラフィ、カラーパターンを定めるため、Plan エージェントを使用します
  • アクセシビリティの完全な監査：詳細な WCAG 準拠、ARIA パターン、フォーカス管理、スクリーンリーダーのテストについては、accessibility スキルに委任します

参考資料

コメント

Markdown 対応