tool-ui-ux-pro-max

ツール：UI/UX Pro Max（検索可能なデザインインテリジェンス）

これは検索ツールであり、ページ生成ツールではありません。

パレットトークン、タイポグラフィの組み合わせ、UX 制約、スタック固有の実装メモなど、具体的な情報を素早く取得し、以下にまとめるために使用します。

• design-system.md
• UI リファクタリング計画／受け入れ基準
• 「見た目はよいのに、使い心地に問題がある」課題のレビュー用チェックリスト

前提条件

Python が使用できることを確認してください。

python3 --version || python --version

基本コマンド

ドメイン検索：

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> [-n <max_results>]

スタック検索：

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --stack <stack> [-n <max_results>]

利用可能なスタック： html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter

推奨ワークフロー

UI のデザインや改善を依頼された場合は、次の手順に従います。

1. 次の入力を特定します。

• プロダクトの種類：SaaS／eコマース／コンテンツ／ツール／ダッシュボード／ランディングページ
• トーンのキーワード：ミニマル／プレミアム／遊び心のある／温かみのある／企業向け／技術的／大胆
• 業界：ヘルスケア／フィンテック／教育／消費者向け／…
• スタック：React／Next.js／…（指定がない場合は html-tailwind をデフォルトにします）

2. ドメインを検索します（各ドメインから1～3件の結果を選び、内容をまとめます）。

1. product — プロダクトの種類 → スタイルの方向性
2. style — スタイルの詳細（色／形状／動き／複雑さ）
3. typography — 見出しと本文の組み合わせ（Google Fonts と CSS のインポートを含む）
4. color — パレットトークン（プライマリ／セカンダリ／CTA／背景／テキスト／境界線）
5. landing — ランディングページの構成（セクションの順序と CTA の配置）
6. chart — チャートの推奨事項（ダッシュボード）
7. ux — UX とアクセシビリティのルール、アンチパターン

3. スタックで検索し、実装上の制約に基づいて判断します。

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack nextjs

ドメイン一覧

ドメイン	用途	キーワード例
product	プロダクトの種類に応じたスタイルの方向性	SaaS、eコマース、ポートフォリオ、ヘルスケア
style	UI スタイルの概念と実装のヒント	ミニマリズム、ブルータリズム、グラスモーフィズム
typography	フォントの組み合わせとインポート手順	エレガント、遊び心のある、プロフェッショナル
color	パレットトークン（16進数）	SaaS、eコマース、フィンテック
landing	ランディングページの構成と CTA 戦略	ヒーロー、推薦文、料金プラン
chart	チャートの種類の選択	推移、比較、ファネル
ux	UX とアクセシビリティのルール、アンチパターン	アクセシビリティ、アニメーション、ナビゲーション
prompt	プロンプト／技術的なキーワード	（スタイル名）

例（美容／ウェルネスのランディングページ）

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

次に、パレット＋タイポグラフィ＋動きの制約＋コンポーネントのルールを design-system.md にまとめ、以下のチェックリストを受け入れ基準に変換します。

プロフェッショナルな UI の基本ルール（クイック確認）

アイコンとビジュアル

ルール	推奨事項	避けること
絵文字アイコンを使わない	一貫した SVG アイコンセット（Heroicons／Lucide／Simple Icons）を使用する	絵文字とアイコンを無秩序に混在させる
安定したホバー状態	色／不透明度／影のトランジションを使用する	レイアウトシフトを引き起こす transform を使用する
正しいブランドロゴ	公式の SVG ソースを使用する	ロゴを推測したり、一貫性のないバリエーションを使用したりする
サイズを統一する	アイコンのサイズ（例：24×24）を標準化する	異なる viewBox やサイズを混在させる

インタラクション

ルール	推奨事項	避けること
ポインターカーソル	クリック可能な領域に cursor-pointer を追加する	操作可能であることが伝わらない状態でクリック可能な領域を放置する
明確なフィードバック	ホバー時に境界線／影／色を変える	ホバー状態を判別しにくくする
適切なトランジション	150～300ms で一貫させる	即座に変化させたり、500ms を超える遅い変化にしたりする

レイアウト

ルール	推奨事項	避けること
端から適切な間隔を確保する	フローティングナビゲーション用のスペースを設ける	UI をビューポートの端にぴったり配置する
コンテンツを隠さない	固定ヘッダーを考慮する	コンテンツを固定バーの背後に配置する
コンテナーを統一する	コンテナー幅のシステムを一つに統一する	複数のコンテナー幅を無秩序に使う

納品前チェックリスト（受け入れ基準として使用）

視覚的な品質

• UI アイコンとして絵文字を使用していない
• アイコンに一貫性のあるアイコンセットを使用している
• ブランドロゴが正しい（推測で選んでいない）
• ホバー状態でレイアウトがずれない
• 色の使用がトークンシステムに従っている（散在する生の 16 進値を避ける）

インタラクション

• クリック可能なすべての領域に cursor-pointer が指定されている
• ホバー／フォーカス状態で明確なフィードバックが得られる
• トランジションに一貫性がある（150～300ms）
• キーボードフォーカスが視認できる

レイアウトとレスポンシブ対応

• 320px／768px／1024px／1440px で動作する
• モバイルで横スクロールが発生しない
• 固定要素がコンテンツを覆わない

アクセシビリティ（a11y）

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