ui-ux-pro-max

UI/UX Pro Max - デザインインテリジェンス

優先度に基づく推奨事項を備えた、検索可能な UI/UX デザインルールのデータベースです。84 種類のスタイル、192 種類のカラーパレット、74 種類のフォントの組み合わせ、理由付けルールを備えた 192 種類のプロダクトタイプ、99 件の UX ガイドライン、105 件のアイコン、16 種類の GSAP モーションプリセット、22 種類の技術スタックに対応した 25 種類のグラフを収録しています。

適用するタイミング

タスクに UI の構造、視覚デザインの決定、インタラクションパターン、またはユーザーエクスペリエンスの品質管理 が関わる場合は、このスキルを使用してください。たとえば、新しいページのデザイン、UI コンポーネントの作成やリファクタリング、色・タイポグラフィ・余白・レイアウトのシステムの選定、UX／アクセシビリティ／一貫性に関する UI のレビュー、ナビゲーション／アニメーション／レスポンシブ動作の実装、あるいは知覚される品質や使いやすさの向上です。

純粋なバックエンドロジック、API／データベース設計、視覚要素に関係しないパフォーマンス作業、インフラストラクチャ／DevOps、視覚要素に関係しないスクリプトの場合は使用しないでください。ただし、タスクによって何かの 見た目、使い心地、動き、操作方法 が変わる場合を除きます。

優先度別のルールカテゴリ

最初に注目するカテゴリを決めるには、優先度 1→10 の順に確認してください。--domain <Domain> を指定すると、詳細をすべて検索できます。各カテゴリのルール全文は references/quick-reference.md にあります。毎回読み込むのではなく、必要に応じて参照してください。

Priority	Category	Impact	Domain	Key Checks (Must Have)	Anti-Patterns (Avoid)
1	アクセシビリティ	CRITICAL	ux	コントラスト比 4.5:1、代替テキスト、キーボード操作、Aria-label	フォーカスリングの削除、ラベルのないアイコンのみのボタン
2	タッチとインタラクション	CRITICAL	ux	最小サイズ 44×44px、8px 以上の間隔、読み込み時のフィードバック	ホバーのみに依存する、状態が即座に変化する（0ms）
3	パフォーマンス	HIGH	ux	WebP/AVIF、遅延読み込み、領域の確保（CLS < 0.1）	レイアウトの頻繁な再計算、累積レイアウトシフト
4	スタイルの選定	HIGH	style, product	プロダクトタイプとの一致、一貫性、SVG アイコン（絵文字は使用しない）	フラットとスキューモーフィックを無作為に混在させる、アイコンとして絵文字を使う
5	レイアウトとレスポンシブ対応	HIGH	ux	モバイルファーストのブレークポイント、Viewport meta、水平方向のスクロールなし	水平方向のスクロール、px 固定のコンテナ幅、ズームの無効化
6	タイポグラフィと色	MEDIUM	typography, color	基本サイズ 16px、行の高さ 1.5、セマンティックなカラートークン	本文の文字サイズが 12px 未満、グレーの背景にグレーの文字、コンポーネント内での生の hex 値
7	アニメーション	MEDIUM	ux, gsap	再生時間 150～300ms、意味を伝える動き、空間的な連続性	装飾のみのアニメーション、幅／高さのアニメーション、動きを抑える設定への非対応
8	フォームとフィードバック	MEDIUM	ux	表示されるラベル、入力欄の近くにあるエラー、補助テキスト、段階的な情報開示	プレースホルダーのみのラベル、画面上部にしか表示されないエラー、最初から情報を詰め込みすぎる
9	ナビゲーションパターン	HIGH	ux	予測可能な戻る動作、ボトムナビは 5 項目以下、ディープリンク	項目が多すぎるナビゲーション、戻る動作の不具合、ディープリンクがない
10	グラフとデータ	LOW	chart	凡例、ツールチップ、アクセシブルな色	意味を伝える手段として色だけに頼る

カテゴリ別のルール一覧（理由を含む約 99 件の UX ガイドラインすべて）については、references/quick-reference.md を参照してください。アプリ固有の仕上げルール（アイコン、タッチフィードバック、ダークモードのコントラスト、安全領域）と標準の納品前チェックリストについては、references/pro-rules.md を参照してください。

---

検索ツールの実行

検索スクリプトはプロジェクトディレクトリではなく、このスキル専用のディレクトリにあります。常にフルパスで実行してください。特定の作業ディレクトリを前提にしないでください。

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --domain <domain>

python が見つからない場合は、python3、次に py -3 を試してください。Python 3.x が必要です。外部依存関係はありません（Python がない場合のインストール手順については README を参照してください）。

ワークフロー

ステップ 1：ユーザー要件を分析する

ユーザーのリクエストから次の情報を抽出します：

• 製品タイプ：SaaS、eコマース、ポートフォリオ、ダッシュボード、エンターテインメント、ツール、生産性向上、またはハイブリッド
• 対象ユーザーと利用状況：年齢層、利用状況（通勤中、余暇、仕事中）
• スタイルのキーワード：遊び心のある、鮮やかな、ミニマル、ダークモード、コンテンツ重視、没入型など
• スタック：プロジェクトから判別します。package.json の依存関係（react/next/vue/svelte/nuxt/@angular）、pubspec.yaml（Flutter）、*.xcodeproj/Package.swift（SwiftUI）、composer.json（Laravel）、または React Native のマーカー（app.json と react-native の依存関係）を確認してください。判別できない場合はユーザーに確認するか、html-tailwind をデフォルトとして使用します。スタックを決めつけないでください。ハードコードされたデフォルト値では、すべての推奨が気づかないうちに誤った方向へ誘導されます。

ステップ 2：デザインシステムを生成する（新しいページ／プロジェクトでは必須）

包括的な推奨事項とその理由を得るため、必ず --design-system から始めてください：

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

これは製品／スタイル／色／ランディングページ／タイポグラフィの各ドメインを並行して検索し、ui-reasoning.csv の推論ルールを適用して、パターン、スタイル、色、タイポグラフィ、エフェクト、および避けるべきアンチパターンを返します。

例：

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "beauty spa wellness service" --design-system -p "Serenity Spa"

ステップ 2b：デザインシステムを永続化する（マスター＋オーバーライドのパターン）

セッションをまたいでデザインシステムを取得できるように保存するには、--persist を追加し、必ずプロジェクトルートを指す --output-dir も指定してください。指定しない場合、ファイルはツールの実行時のディレクトリを基準に書き込まれます：

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --output-dir "<project-root>"

次のファイルが作成されます：

• design-system/<project-slug>/MASTER.md — グローバルな信頼できる情報源
• design-system/<project-slug>/pages/ — ページ固有のオーバーライド用フォルダー

ページ固有のオーバーライドを追加するには、--page "dashboard" を指定して、design-system/<project-slug>/pages/dashboard.md も作成します。

design-system/<project-slug>/MASTER.md がすでに存在する場合、--force も指定しない限り、--persist は書き込みをスキップし、既存ファイルを変更しません。ユーザーやチームメイトが行った以前の決定を気づかないうちに破棄しないよう、再生成する前にファイルの有無を確認し、内容を読み込んでください。

特定のページを作成する際の取得方法：

1. design-system/<project-slug>/MASTER.md を読み込みます
2. design-system/<project-slug>/pages/<page-name>.md が存在するか確認します。存在する場合は、そのルールがマスターより優先されます
3. それ以外の場合は、マスターのルールのみを使用します

ステップ 2c：デザインダイヤル（任意）

--design-system の出力をクエリを変えずに調整する、1～10 の任意のスライダーが 3 つあります。同じコマンドに任意の組み合わせで追加してください：

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --variance <1-10> --motion <1-10> --density <1-10>

ダイヤル	低（1～3）	中（4～7）	高（8～10）
--variance	中央寄せ／ミニマル（ミニマリズム系のカテゴリを優先）	バランス型／モダン	大胆／非対称（ブルータリズム、Bento Grid を優先）
--motion	控えめなマイクロインタラクション	標準的なスクロール／スタガーモーション	複雑な振り付け（ピン留め、Flip、SplitText）
--density	ゆとりのある間隔（24～96px のスペーシングスケール）	標準（16～64px、現在のデフォルト）	高密度／ダッシュボード（8～32px のスペーシングスケール）

• --motion は、解決されたティア（Subtle／Standard／Complex）に合わせた、すぐに使える GSAP スニペット（フレームワークに関する注記、Do／Don't、パフォーマンスに関する注記を含む）を --domain gsap から取得して追加します。
• --density は、ASCII／Markdown／MASTER.md 出力の --space-* CSS 変数テーブルを上書きします。トークンを手動編集せずに、ダッシュボード（高密度）とマーケティングページ（低密度）で使い分けられます。
• ダイヤルを指定しない場合、その部分の出力は従来どおりに保たれます（動作は変わりません）。

例：

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8 -p "Ops Console"

ステップ 3：必要に応じて詳細検索で補足する

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<keyword>" --domain <domain> [-n <max_results>]

ニーズ	ドメイン	例
製品タイプのパターン	product	--domain product "entertainment social"
スタイルの選択肢を増やす	style	--domain style "glassmorphism dark"
カラーパレット	color	--domain color "entertainment vibrant"
フォントの組み合わせ	typography	--domain typography "playful modern"
個別の Google Fonts	google-fonts	--domain google-fonts "sans serif popular variable"
グラフの推奨	chart	--domain chart "real-time dashboard"
UX のベストプラクティス	ux	--domain ux "animation accessibility"
ランディングページの構成	landing	--domain landing "hero social-proof"
アイコンの推奨	icons	--domain icons "navigation outline"
GSAP アニメーションのプリセット	gsap	--domain gsap "scroll reveal stagger"
React/Next.js のパフォーマンス	react	--domain react "rerender memo list"
アプリ／ネイティブインターフェースのガイドライン	web	--domain web "accessibilityLabel touch safe-areas"

--domain を省略すると、クエリからドメインが自動検出されます。ただし、重複する用語（例：「font」は typography と google-fonts の両方に一致します）では、自動検出によって検索先が誤ることがあります。結果が的外れな場合は、--domain を明示的に指定してください。

ステップ 4：スタックのガイドライン

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<keyword>" --stack <stack>

利用可能なスタック： react、nextjs、vue、svelte、astro、nuxtjs、nuxt-ui、angular、laravel、swiftui、react-native、flutter、jetpack-compose、html-tailwind、shadcn、threejs、javafx、wpf、winui、avalonia、uno、uwp。ステップ 1 で検出されたスタックを使用してください。

---

検索結果が 0 件の場合

結果を捏造しないでください。代わりに：

1. キーワードを広げるか、表現を変えて 1 回再試行します（製品とスタイルを組み合わせず、別々に試します）。
2. それでも結果が空の場合は、上記の優先順位表を参照し、この推奨はデータベースの一致結果ではなく、組み込みのデフォルトに基づいていることをユーザーに明示します（例：「X に一致するパレットがないため、一般的な SaaS のデフォルトを使用します」）。
3. 結果が 0 件の検索を、データが返されたかのように提示しないでください。

ワークフローの例

ユーザーのリクエスト：「AI 検索のホームページを作ってください。」（package.json から Next.js を検出）

# Step 2: design system
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "AI search tool modern minimal" --design-system -p "AI Search"

# Step 3: supplement
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "search loading animation" --domain ux

# Step 4: stack guidelines
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "suspense streaming bundle" --stack nextjs

次に、デザインシステムと詳細検索を統合して、実装します。

出力形式

--design-system は -f ascii（デフォルト、ターミナル表示）、-f markdown（ドキュメント）、および --json（機械可読形式。生のデザインシステム辞書と永続化ステータスを含む）に対応しています。

より良い結果を得るためのヒント

• 多次元キーワードを使います。製品＋業界＋トーン＋密度を組み合わせます。例："entertainment social vibrant content-dense"。"app" だけにしないでください。
• 同じニーズを異なる表現で検索します。"playful neon" → "vibrant dark" → "content-first minimal"
• まず --design-system で全体的な推奨を取得し、確信が持てない要素を --domain で詳しく調べます。
• 実装に特化したガイダンスを得るには、検出されたスタックを明示的に指定します。

問題	対処方法
スタイル／色を決められない	異なるキーワードで --design-system を再実行します
ダークモードでコントラストの問題がある	references/quick-reference.md §6：color-dark-mode + color-accessible-pairs
アニメーションが不自然に感じられる	references/quick-reference.md §7：spring-physics + easing + exit-faster-than-enter
フォームの UX が良くない	references/quick-reference.md §8：inline-validation + error-clarity + focus-management
ナビゲーションが分かりにくく感じられる	references/quick-reference.md §9：nav-hierarchy + bottom-nav-limit + back-behavior
小さい画面でレイアウトが崩れる	references/quick-reference.md §5：mobile-first + breakpoint-consistency
パフォーマンスの低下／カクつき	references/quick-reference.md §3：virtualize-lists + main-thread-budget + debounce-throttle

アプリ UI を納品する前に

references/pro-rules.md を読み、標準の納品前チェックリストに沿って確認してください。アイコンや視覚要素の使い方、操作時のフィードバック、ライトモード／ダークモードでのコントラスト、セーフエリアのレイアウト、アクセシビリティを対象としています。ネイティブ／モバイルアプリ UI（iOS／Android／React Native／Flutter）に適用されます。