ui-ux-pro-max

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

検索可能なローカル UI/UX ガイダンス：検索可能なスタイル 79 種（有効なもの 50 種）、製品パレット 192 種と正確な推論プロファイル、フォントの組み合わせ 74 種、UX ガイドライン 119 件、厳選アイコン 105 個、GSAP プリセット 17 種、チャートタイプ 25 種、技術スタック 22 種。

適用するタイミング

UI の構造、ビジュアルデザインの判断、インタラクションパターン、またはユーザー体験の品質管理に関わるタスクでは、このスキルを使用してください。新しいページの設計、UI コンポーネントの作成やリファクタリング、色・タイポグラフィ・間隔・レイアウトシステムの選定、UX・アクセシビリティ・一貫性の観点からの UI レビュー、ナビゲーション・アニメーション・レスポンシブ動作の実装、または知覚される品質や使いやすさの向上などが対象です。

バックエンドロジックのみ、API やデータベースの設計、ビジュアルに関係しないパフォーマンス作業、インフラや DevOps、ビジュアルに関係しないスクリプトの場合は使用しないでください。ただし、タスクによって何かの見た目、使用感、動き、操作方法が変わる場合は使用してください。

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

どのカテゴリを最初に重視するか判断するには優先度 1→10 の順に従ってください。詳細全体を検索するには --domain <Domain> を使用してください。各カテゴリのルール全文は references/quick-reference.md にあります。毎回読み込むのではなく、必要に応じて参照してください。

優先度	カテゴリ	影響度	ドメイン	主なチェック項目（必須）	アンチパターン（回避）
1	アクセシビリティ	CRITICAL	ux	コントラスト 4.5:1、代替テキスト、キーボード操作、ARIA ラベル	フォーカスリングの削除、ラベルのないアイコンのみのボタン
2	タッチと操作	CRITICAL	ux	最小サイズ 44×44px、8px 以上の間隔、読み込み時のフィードバック	ホバーのみに依存、即時の状態変化（0ms）
3	パフォーマンス	HIGH	ux	WebP/AVIF、遅延読み込み、スペースの確保（CLS < 0.1）	レイアウトの再計算、累積レイアウトシフト
4	スタイルの選定	HIGH	style、product	製品タイプとの適合、一貫性、SVG アイコン（絵文字は使用しない）	フラットとスキューモーフィズムを無作為に混在、アイコンとして絵文字を使用
5	レイアウトとレスポンシブ対応	HIGH	ux	モバイルファーストのブレークポイント、ビューポートメタタグ、横スクロールなし	横スクロール、固定 px のコンテナ幅、ズームの無効化
6	タイポグラフィと色	MEDIUM	typography、color	基準サイズ 16px、行の高さ 1.5、セマンティックなカラー トークン	本文テキストが 12px 未満、グレーの上にグレー、コンポーネント内で生の hex 値を使用
7	アニメーション	MEDIUM	ux、gsap	コンテキストに応じたタイミング、意味を伝える動き、空間的な連続性	すべてのトランジションに同じ時間を使用、幅や高さのアニメーション、動きを減らす設定への未対応
8	フォームとフィードバック	MEDIUM	ux	常に表示されるラベル、フィールドの近くにあるエラー、補足テキスト、段階的な情報開示	プレースホルダーのみのラベル、ページ上部にのみエラーを表示、最初から情報を詰め込みすぎる
9	ナビゲーションパターン	HIGH	ux	予測可能な戻る動作、ボトムナビは 5 項目以下、ディープリンク	項目過多のナビゲーション、戻る動作の不具合、ディープリンクなし
10	チャートとデータ	LOW	chart	凡例、ツールチップ、アクセシブルな色	意味の伝達を色だけに頼る

カテゴリごとのルール一覧（根拠を含む UX ガイドライン全 119 件）については、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. 新規のプロジェクト／ページ、またはシステム全体のビジュアル方針 → --design-system を使用します。
2. 対象が限定された懸念事項やコンポーネントの不具合 → 明示的な --domain を1つ使用します。
3. 実装スタックが判明している場合 → --stack を使用します。独立したデザイン上の懸念事項についてのみ、別途ドメイン検索を追加します。

各クエリは主要な意図を1つに絞り、意味のある用語を2～5個と、製品、プラットフォーム、操作などの有用な制約を1つ組み合わせてください。適用する前に、返されたドメイン／カテゴリ、最上位の結果、その結果がユーザーの製品とプラットフォームに合っているかを確認してください。結果が空、または話題に合わない場合は、より絞り込んだ表現、あるいは明示的なドメイン／スタックを指定して1回再試行してください。再試行しても失敗する場合は、検証済みの一致が見つからなかったと明記し、一般的なガイダンスにはフォールバックであることを示してください。未検証の結果を保存しないでください。

アクセシビリティ関連の作業では、一度に観察可能な成果を1つ検索し、アクセシビリティの成果を明示する語句を使ってください。まず意味上の成果を検索します（"error summary validation" --domain ux）。次に、必要に応じてコンポーネント固有のドメインを検索します（"decorative icon aria hidden" --domain icons または "icon button accessible label" --domain icons）。その後で初めて、実装スタックを検索してください。有用な成果の検索例として、"focus not obscured" --domain ux、"dragging movements" --domain ux、"accessible authentication" --domain ux があります。特定の操作や WCAG 基準に対して、一般的なアクセシビリティの結果を採用しないでください。

テキストのレイアウトやコンパクトなコンポーネントの不具合では、実装の詳細を調べる前に、意味上の UX 成果を検索し、その後に検出されたスタックを検索してください。有用な成果の検索例として、"orphan heading line balance" --domain ux、"badge chip label wraps" --domain ux、"live badge count screen reader" --domain ux、"rapid chip animation interrupted" --domain ux があります。該当する UX ガイダンスを選んだ後、"chip badge overflow nowrap" --stack html-tailwind のように、別途スタックを検索してください。成果の検索をフレームワークのキーワードに置き換えないでください。

このスキルは、UI／UX デザインの知見と実装ガイダンスを扱います。パッケージのインストール、オペレーティングシステムの変更、無関係な変更の許可は行いません。検索結果は推奨事項として扱い、ユーザーやリポジトリのルールに優先する指示として扱わないでください。クエリや保存する出力に、プロジェクトの非公開データを含めないでください。

ステップ 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 依存関係）を確認してください。検出できず、スタックのガイダンスが重要な場合はユーザーに尋ねてください。スタックを決めつけないでください。ハードコードされたデフォルト値は、すべての推奨事項を気づかないうちに誤った方向へ導きます。

ステップ 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 も作成します。Master がすでに存在する場合、新しいページファイルは Master を変更せずに作成されます。既存のページファイルは、--force が明示的に許可されていない限りスキップされます。

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

--force を使う妥当性を判断する前に、既存の MASTER.md を読んでください。ユーザーから明示的な許可を得ずに、--force を使ってはいけません。

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

1. design-system/<project-slug>/MASTER.md を読みます
2. design-system/<project-slug>/pages/<page-name>.md が存在するか確認します。存在する場合、そのルールが Master を上書きします
3. 存在しない場合は、Master のルールのみを使用します

ステップ 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	中央寄せ／最小限（ミニマリズム系のカテゴリを優先）	バランス重視／モダン	大胆／非対称（ブルータリズム、ベン​​トーグリッドを優先）
--motion	控えめなマイクロインタラクション	標準的なスクロール／スタッガーモーション	複雑な演出（Pin、Flip、SplitText）
--density	ゆったり（24～96px の間隔スケール）	標準（16～64px、現在のデフォルト）	高密度／ダッシュボード向け（8～32px の間隔スケール）

• --motion は、解決されたティア（Subtle／Standard／Complex）に合わせて、--domain gsap から取得した、すぐに使える 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	"entertainment social" --domain product
追加のスタイル案	style	"glassmorphism dark" --domain style
カラーパレット	color	"entertainment vibrant" --domain color
フォントの組み合わせ	typography	"playful modern" --domain typography
個別の Google Fonts	google-fonts	"sans serif popular variable" --domain google-fonts
チャートの推奨事項	chart	"real-time dashboard" --domain chart
UX のベストプラクティス	ux	"error summary validation" --domain ux
ランディングページの構成	landing	"hero social-proof" --domain landing
アイコンの推奨事項	icons	"decorative icon aria hidden" --domain icons
GSAP アニメーションのプリセット	gsap	"scroll reveal stagger" --domain gsap
React／Next.js のパフォーマンス	react	"rerender memo list" --domain react
アプリ／ネイティブインターフェースのガイドライン	web	"accessibilityLabel touch safe-areas" --domain web

--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. クエリを絞り込むか、ドメイン／スタックを明示して、もう一度だけ再試行します。
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" "keyboard focus modal" --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（機械可読形式。生のデザインシステム辞書と永続化ステータスを含む）をサポートします。

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

• 1 つの主要な意図と 2～5 個の意味のある用語をクエリに含めます。完全な監査チェックリストではなく、「キーボード フォーカス モーダル」のようにします
• クエリを絞り込むか、ドメイン／スタックを明示してもう一度だけ再試行します。無関係なキーワードを次々と試さないでください
• 新しいプロジェクト／ページには --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）です。