ui-ux-pro-max

バージョン依存の情報です。 以下に記載されているすべての API 名、SDK のゲート条件、ブラウザーのサポートに関する記述は、一次情報源を参照して 2026-09-08 に検証済みです。何をいつ照合したかは、_jutsu/VERSIONS.md に記載されています。この日付が古い場合は、バージョン番号に基づいて作業する前に再検証してください。

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

Web およびモバイルアプリケーション向けの包括的なデザインガイドです。22 の技術スタックにわたり、84 種類のスタイル、192 種類のカラーパレット、74 種類のフォントの組み合わせ、99 件の UX ガイドライン、25 種類のチャートを収録しています。優先度に基づく推奨機能を備えた検索可能なデータベースです。

適用する場面

以下の場合に、これらのガイドラインを参考にしてください。

• 新しい UI コンポーネントやページをデザインするとき
• カラーパレットやタイポグラフィを選ぶとき
• UX の問題がないかコードをレビューするとき
• ランディングページやダッシュボードを構築するとき
• アクセシビリティ要件を実装するとき

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

優先度	カテゴリ	影響度	ドメイン
1	アクセシビリティ	重大	ux
2	タッチとインタラクション	重大	ux
3	パフォーマンス	高	ux
4	レイアウトとレスポンシブ	高	ux
5	タイポグラフィと色	中	typography, color
6	アニメーション	中	ux
7	スタイルの選択	中	style, product
8	チャートとデータ	低	chart

クイックリファレンス

1. アクセシビリティ（重大）

• color-contrast - 通常のテキストでは最小比率を 4.5:1 にする
• focus-states - インタラクティブ要素に視認可能なフォーカスリングを表示する
• alt-text - 意味のある画像には内容を説明する alt テキストを設定する
• aria-labels - アイコンのみのボタンには aria-label を設定する
• keyboard-nav - Tab キーの移動順を視覚的な順序に合わせる
• form-labels - for 属性を指定した label を使用する

2. タッチとインタラクション（重大）

• touch-target-size - タッチターゲットの最小サイズを 44x44px にする
• hover-vs-tap - 主な操作にはクリック／タップを使用する
• loading-buttons - 非同期処理中はボタンを無効にする
• error-feedback - 問題の近くに明確なエラーメッセージを表示する
• cursor-pointer - クリック可能な要素に cursor-pointer を追加する

3. パフォーマンス（高）

• image-optimization - WebP、srcset、遅延読み込みを使用する
• reduced-motion - prefers-reduced-motion を確認する
• content-jumping - 非同期コンテンツ用のスペースを確保する

4. レイアウトとレスポンシブ（高）

• viewport-meta - width=device-width initial-scale=1 を設定する
• readable-font-size - モバイルの本文テキストは最小 16px にする
• horizontal-scroll - コンテンツがビューポート幅に収まるようにする
• z-index-management - z-index のスケール（10、20、30、50）を定義する

5. タイポグラフィと色（中）

• line-height - 本文テキストには 1.5〜1.75 を使用する
• line-length - 1 行あたり 65〜75 文字に制限する
• font-pairing - 見出し用と本文用のフォントの印象を合わせる

6. アニメーション（中）

• duration-timing - マイクロインタラクションには 150〜300ms を使用する
• transform-performance - width/height ではなく transform/opacity を使用する
• loading-states - スケルトンスクリーンまたはスピナーを使用する

7. スタイルの選択（中）

• style-match - 製品の種類にスタイルを合わせる
• consistency - すべてのページで同じスタイルを使用する
• no-emoji-icons - 絵文字ではなく SVG アイコンを使用する

8. チャートとデータ（低）

• chart-type - データの種類に合ったチャートを選ぶ
• color-guidance - アクセシブルなカラーパレットを使用する
• data-table - アクセシビリティのためにテーブル形式の代替手段を用意する

使用方法

以下の CLI ツールを使用して、特定のドメインを検索します。

---

前提条件

python3 が必要です（Claude Code のシェルと claude.ai のコード実行サンドボックスでは、デフォルトで利用できます）。このスキルは何もインストールしません。

--design-system では必ず -f markdown を指定してください。 デフォルトは ascii です。これはターミナル向けに作られており、約 7,000 バイトの生の ANSI カラーエスケープを出力します。また、hex_to_ansi には isatty ガードがないため、パイプで渡してもエスケープがそのまま残り、コンテキストウィンドウにゴミとして入り込みます。-f markdown を指定すると、同じ情報を約 2,100 バイトのクリーンな Markdown で返します。ここでの利用者はターミナルではなくモデルなので、このスキルで最もよく実行されるコマンドのトークン数を 3.3 分の 1 に削減できます。

---

このスキルの使い方

ユーザーが UI/UX に関する作業（デザイン、構築、作成、実装、レビュー、修正、改善）を依頼した場合は、次のワークフローに従います。

以下の各コマンドは、このブロックと同じシェル呼び出しで実行します。 シェルの状態は呼び出し間で保持されず、作業ディレクトリも保証されないため、UIUX_DIR は毎回あらためて導出し、各コマンドではスクリプトのフルパスを指定します。このブロックでは、次の順に確認します。 同じ呼び出し内でオーケストレーターのスキルベースブロックが先に実行されている場合は $SKILL_BASE/ui-ux-pro-max、 ブロックの前に UIUX_DIR='/absolute/path/to/ui-ux-pro-max' を指定して自分で指定したディレクトリ、 ホストが CLAUDE_SKILL_DIR を代入する場合は、このスキル自体のディレクトリ（スタンドアロンインストール）、 その後、一般的なスキルディレクトリを範囲を限定して検索します。絶対パスがすでに分かっている場合は、$UIUX_DIR の代わりにそのパスを記述できます。

# Commands run from the project, so --persist writes to the project root and
# never into the skill directory.
PROJECT_ROOT="$PWD"
uiux_given="${UIUX_DIR:-}"
UIUX_DIR=""
for uiux_c in "${SKILL_BASE:+$SKILL_BASE/ui-ux-pro-max}" "$uiux_given" "${CLAUDE_SKILL_DIR}"; do
  [ -n "$uiux_c" ] && [ -f "$uiux_c/scripts/search.py" ] && { UIUX_DIR="$uiux_c"; break; }
done
if [ -z "$UIUX_DIR" ]; then
  for uiux_root in "$HOME/.agents/skills" "$HOME/.claude/skills" "$HOME/.claude/plugins" /mnt/skills; do
    [ -d "$uiux_root" ] || continue
    uiux_hit="$(find -L "$uiux_root" -maxdepth 9 -type f -path '*/ui-ux-pro-max/scripts/search.py' 2>/dev/null | sort -V | tail -1)"
    [ -n "$uiux_hit" ] && { UIUX_DIR="${uiux_hit%/scripts/search.py}"; break; }
  done
fi
[ -n "$UIUX_DIR" ] || echo "genjutsu: ui-ux-pro-max not found. Say so in one line and derive the design system from the thesis by hand." >&2

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

ユーザーのリクエストから重要な情報を抽出します。

• 製品タイプ：SaaS、eコマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード：ミニマル、遊び心のある、プロフェッショナル、エレガント、ダークモードなど
• 業界：ヘルスケア、フィンテック、ゲーム、教育など
• スタック：React、Vue、Next.js。指定がなければ html-tailwind を使用

ステップ 2：デザインシステムを生成する（必須）

まず必ず --design-system を実行して、根拠を含む包括的な推奨事項を取得します。

python3 "$UIUX_DIR/scripts/search.py" "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] -f markdown

このコマンドでは、次の処理を行います。

1. 5 つのドメイン（製品、スタイル、カラー、ランディング、タイポグラフィ）を並行して検索します
2. ui-reasoning.csv の推論ルールを適用して、最適な候補を選びます
3. パターン、スタイル、カラー、タイポグラフィ、エフェクトを含む完全なデザインシステムを返します
4. 避けるべきアンチパターンも含まれます

例：

python3 "$UIUX_DIR/scripts/search.py" "beauty spa wellness service" --design-system -p "Serenity Spa" -f markdown

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

セッションをまたいで階層的に取得できるようにデザインシステムを保存するには、--persist を追加します（ファイルがスキルディレクトリではなくプロジェクトルートに保存されるように、--output-dir にはプロジェクトルートを指定します）。

python3 "$UIUX_DIR/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --output-dir "$PROJECT_ROOT" -f markdown

次のものが作成されます。

• design-system/<project-slug>/MASTER.md - すべてのデザインルールを含む、グローバルな信頼できる情報源
• design-system/<project-slug>/pages/ - ページ固有のオーバーライド用フォルダー

--persist は MASTER.md がすでに存在する場合、書き込みをスキップします。上書きするには --force を追加します。

ページ固有のオーバーライドを指定する場合：

python3 "$UIUX_DIR/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --page "dashboard" --output-dir "$PROJECT_ROOT" -f markdown

これにより、次のものも作成されます。

• design-system/<project-slug>/pages/dashboard.md - Master からのページ固有の差分

階層的な取得の仕組み：

1. 特定のページ（例：「Checkout」）を構築する際は、まず design-system/<project-slug>/pages/checkout.md を確認します
2. ページファイルが存在する場合、そのルールが Master ファイルのルールを上書きします
3. 存在しない場合は、design-system/<project-slug>/MASTER.md のみを使用します

コンテキストに応じた取得プロンプト：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

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

デザインシステムを取得した後、ドメイン検索を使って詳細情報を追加で取得します。

python3 "$UIUX_DIR/scripts/search.py" "<keyword>" --domain <domain> [-n <max_results>]

詳細検索を使う場面：

必要な情報	ドメイン	例
その他のスタイル候補	style	--domain style "glassmorphism dark"
チャートの推奨事項	chart	--domain chart "real-time dashboard"
UX のベストプラクティス	ux	--domain ux "animation accessibility"
別のフォント候補	typography	--domain typography "elegant luxury"
ランディングページの構成	landing	--domain landing "hero social-proof"

ステップ 4：スタックのガイドライン（デフォルト：html-tailwind）

実装に特化したベストプラクティスを取得します。ユーザーがスタックを指定していない場合は、デフォルトで html-tailwind を使用します。

python3 "$UIUX_DIR/scripts/search.py" "<keyword>" --stack html-tailwind

利用可能なスタック：html-tailwind、react、nextjs、astro、vue、nuxtjs、nuxt-ui、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose、threejs、angular、laravel、javafx、wpf、winui、avalonia、uno、uwp

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	プロダクトの種類に関する推奨	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI のスタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	カラーパレット（すべてのトークンセット）	SaaS、eコマース、ヘルスケア、美容、フィンテック、サービス
landing	ページ構成、CTA 戦略	ヒーロー、ヒーロー中心、推薦文、料金設定、ソーシャルプルーフ
chart	チャートの種類、ライブラリの推奨	トレンド、比較、タイムライン、ファネル、円グラフ
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み
icons	アイコンセットとインポート方法	アウトライン、塗りつぶし、ブランド、ナビゲーション
react	React/Next.js のパフォーマンス	ウォーターフォール、バンドル、サスペンス、メモ、再レンダリング、キャッシュ
web	アプリ／ウェブのインターフェースガイドライン	aria、フォーカス、キーボード、セマンティック、仮想化
gsap	モーションのスニペット（--motion ダイヤルに反映）	リビール、パララックス、スタッガー、スクロール
google-fonts	Google Fonts の検索	セリフ、等幅、ディスプレイ、可変

利用可能なスタック

スタック	対象
html-tailwind	Tailwind ユーティリティ、レスポンシブ、a11y（デフォルト）
react	状態、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
astro	アイランドアーキテクチャ、部分的なハイドレーション、コンテンツ主導
vue	Composition API、Pinia、Vue Router
nuxtjs	Nuxt 3、コンポーザブル、SSR/SSG、自動インポート
nuxt-ui	Nuxt UI コンポーネント、テーマ設定、フォーム
svelte	Runew、ストア、SvelteKit
swiftui	ビュー、状態、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、状態、レイアウト、テーマ設定
shadcn	shadcn/ui コンポーネント、テーマ設定、フォーム、パターン
jetpack-compose	コンポーザブル、修飾子、状態のホイスティング、再コンポジション
threejs	Three.js のシーン、マテリアル、R3F のパターン
angular	コンポーネント、シグナル、RxJS、スタンドアロン API
laravel	Blade、Livewire、Tailwind、フォームのパターン
javafx	シーングラフ、FXML、CSS、コントロール
wpf	XAML、MVVM、バインディング、スタイル
winui	WinUI 3、XAML、Fluent、バインディング
avalonia	クロスプラットフォームの XAML、MVVM、スタイリング
uno	Uno Platform、WinUI XAML のクロスターゲット
uwp	UWP XAML、Fluent、アダプティブ UI

---

ワークフローの例

ユーザーのリクエスト：「プロフェッショナルなスキンケアサービスのランディングページを作成する」

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

• プロダクトの種類：美容／スパサービス
• スタイルのキーワード：エレガント、プロフェッショナル、柔らかい
• 業界：美容／ウェルネス
• スタック：html-tailwind（デフォルト）

ステップ 2：デザインシステムを生成する（必須）

python3 "$UIUX_DIR/scripts/search.py" "beauty spa wellness service elegant" --design-system -p "Serenity Spa" -f markdown

**出力：**パターン、スタイル、色、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。

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

# Get UX guidelines for animation and accessibility
python3 "$UIUX_DIR/scripts/search.py" "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 "$UIUX_DIR/scripts/search.py" "elegant luxury serif" --domain typography

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

python3 "$UIUX_DIR/scripts/search.py" "layout responsive form" --stack html-tailwind

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

---

出力形式

--design-system フラグは 2 種類の出力形式をサポートしています。

# ASCII box (default) - best for terminal display
python3 "$UIUX_DIR/scripts/search.py" "fintech crypto" --design-system -f markdown

# Markdown - best for documentation
python3 "$UIUX_DIR/scripts/search.py" "fintech crypto" --design-system -f markdown

---

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

1. キーワードを具体的にする - 「ヘルスケア SaaS ダッシュボード」＞「アプリ」
2. 複数回検索する - キーワードを変えると、異なる知見が得られます
3. ドメインを組み合わせる - スタイル + タイポグラフィ + 色 = 完全なデザインシステム
4. 常に UX を確認する - よくある問題を見つけるため、「アニメーション」「z-index」「アクセシビリティ」を検索します
5. スタックフラグを使う - 実装に特化したベストプラクティスを取得できます
6. 繰り返し改善する - 最初の検索結果が合わない場合は、キーワードを変えてみます

---

プロフェッショナルな UI の共通ルール

UI をプロらしく見せるうえで、見落とされがちな問題を紹介します。

アイコンと視覚要素

ルール	すること	しないこと
絵文字アイコンを使わない	SVG アイコン（Heroicons、Lucide、Simple Icons）を使用する	🎨 🚀 ⚙️ のような絵文字を UI アイコンとして使用する
安定したホバー状態	ホバー時に色／不透明度のトランジションを使用する	レイアウトがずれるスケール変換を使用する
正しいブランドロゴ	Simple Icons で公式 SVG を調べる	ロゴのパスを推測したり、誤ったものを使用したりする
一貫したアイコンサイズ	固定の viewBox (24x24) と w-6 h-6 を使用する	アイコンサイズをランダムに混在させる

インタラクションとカーソル

ルール	すること	しないこと
ポインターカーソル	クリック可能／ホバー可能なカードすべてに cursor-pointer を追加する	インタラクティブな要素にデフォルトのカーソルを表示する
ホバー時のフィードバック	視覚的なフィードバック（色、影、枠線）を提供する	要素がインタラクティブであることを示さない
滑らかなトランジション	transition-colors duration-200 を使用する	状態を即座に切り替えたり、時間をかけすぎたりする（>500ms）

ライト／ダークモードのコントラスト

ルール	すること	しないこと
ライトモードのガラスカード	bg-white/80 以上の不透明度を使用する	bg-white/10（透明度が高すぎる）を使用する
ライトモードのテキストコントラスト	テキストに #0F172A (slate-900) を使用する	本文テキストに #94A3B8 (slate-400) を使用する
ライトモードの控えめなテキスト	最低でも #475569 (slate-600) を使用する	gray-400 またはそれより薄い色を使用する
枠線の視認性	ライトモードで border-gray-200 を使用する	border-white/10（見えない）を使用する

レイアウトと余白

ルール	すること	しないこと
フローティングナビゲーションバー	top-4 left-4 right-4 の余白を設ける	ナビゲーションバーを top-0 left-0 right-0 に固定する
コンテンツのパディング	固定ナビゲーションバーの高さを考慮する	コンテンツを固定要素の背後に隠す
一貫した最大幅	同じ max-w-6xl または max-w-7xl を使用する	異なるコンテナー幅を混在させる

---

納品前チェックリスト

UI コードを納品する前に、以下の項目を確認してください。

視覚品質

• アイコンとして絵文字を使用していない（代わりに SVG を使用する）
• すべてのアイコンが一貫したアイコンセット（Heroicons／Lucide）のもの
• ブランドロゴが正しい（Simple Icons で確認済み）
• ホバー状態によってレイアウトがずれない
• var() でラップせず、テーマカラーを直接使用する（bg-primary）

インタラクション

• クリック可能な要素すべてに cursor-pointer が設定されている
• ホバー状態で明確な視覚的フィードバックが得られる
• トランジションが滑らかである（150-300ms）
• キーボード操作時にフォーカス状態が見える

ライト／ダークモード

• ライトモードのテキストに十分なコントラストがある（最低 4.5:1）
• ライトモードでガラス／透過要素が見える
• どちらのモードでも枠線が見える
• 納品前に両方のモードでテストする

レイアウト

• フローティング要素が端から適切な余白を確保している
• 固定ナビゲーションバーの背後にコンテンツが隠れていない
• 375px、768px、1024px、1440px でレスポンシブに表示される
• モバイルで横スクロールが発生しない

アクセシビリティ

• すべての画像に alt テキストがある
• フォーム入力にラベルがある
• 色だけを唯一の識別手段にしていない
• prefers-reduced-motion に対応している