ui-ux-pro-max

概要

ui-ux-pro-max とは？

ui-ux-pro-max は、Web やモバイルのインターフェースでより良いデザイン判断を行うための UI/UX デザインインテリジェンススキルです。レイアウトやカラー、タイポグラフィ、インタラクションパターンを勘で決めるのではなく、以下のような構造化されたデータセットに基づいて提案します。

• 50 以上のビジュアルスタイル
• 161 のカラーパレット
• 57 のフォントペアリング
• 推論ルール付きの 161 のプロダクトタイプ
• 99 の UX ガイドライン
• 25 のチャートタイプ
• 10 スタックをカバー: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS

このスキルは「デザイン判断レイヤー」として機能するよう設計されており、パターン選定、デザインの根拠付け、UX 品質の維持を、設計と実装の両方のフェーズで支援します。

ui-ux-pro-max の対象ユーザー

ui-ux-pro-max は次のような人に向いています。

• レイアウト、カラースキーム、タイポグラフィ、インタラクションパターンについて体系的なガイドが欲しい プロダクトデザイナー / UI/UX デザイナー。
• React, Next.js, Vue, Svelte, React Native, Tailwind でフロントエンドを実装しながら、デザインを意識した提案が欲しい フロントエンドエンジニア。
• 専任デザイナーがいないが、モダンで一貫した UI/UX を実現したい ファウンダーやソロ開発者。
• 複数スタックにまたがってスタイル、チャートパターン、UX ガイドラインをそろえたい デザインシステムのメンテナ。

特に次のようなシーンで役立ちます。

• ランディングページ、ダッシュボード、管理画面、SaaS アプリ、EC、および モバイルアプリ の設計・レビュー時。
• glassmorphism、minimalism、brutalism、neumorphism、bento grid、dark mode など、スタイルの方向性を選ぶとき。
• ボタン、モーダル、ナビゲーションバー、サイドバー、カード、テーブル、フォーム、チャート といったコンポーネントをベストプラクティスに沿って整えたいとき。

ui-ux-pro-max が解決する課題

ui-ux-pro-max は、次のような形でデザインの曖昧さや UX の不整合を減らすことを目的に設計されています。

• 根拠あるデザイン選定：プロダクトタイプとコンテキストに基づき、カラー・タイポグラフィ・レイアウトパターンを推奨します。
• UX 品質管理：99 の UX ガイドラインにより、本番前にインタラクションやユーザビリティ上の問題を洗い出します。
• スタック横断のガイダンス：React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS それぞれで、デザイン判断を実装上の考慮点にマッピングします。
• アイデア出しの高速化：あらかじめキュレーションされ、互換性のあるスタイル方向性・パレット・フォントペアリングを素早く組み合わせられます。

「何をどうデザインすべきか」「なぜその方向性がそのプロダクトタイプとプラットフォームに向いているのか」を明確にしたいときに、ui-ux-pro-max は特に有用です。

ui-ux-pro-max が向いているケース / 向いていないケース

向いているケース：

• ページレイアウト、ナビゲーション構造、インタラクションフローを検討している。
• 新規・既存プロダクトのカラーパレット、タイポグラフィ、スペーシングシステムを選定している。
• React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui で UI を実装するにあたり、デザインを踏まえたガイドが欲しい。
• ダッシュボード、ランディングページ、モバイル画面の UI/UX 品質を体系的にレビューしたい。

向いていないケース：

• デザイン判断を伴わない、汎用的なフロントエンド実装支援（複雑な状態管理、バックエンド連携、DevOps など）だけが必要な場合。
• すでに厳格で完全なデザインシステムがあり、コードレベルのリファクタだけを行いたい場合。
• 視覚要素やインタラクティブ要素のほとんどない、テキスト中心のインターフェースに取り組んでいる場合。

主なニーズが ビジュアルの方向性、インタラクションパターン、UX 品質管理 にあるなら、ui-ux-pro-max を追加する価値は高いでしょう。

使い方

1. インストール手順

対応するエージェント環境に ui-ux-pro-max をスキルとしてインストールするには、次のコマンドを使います。

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

インストール後、上流リポジトリ構造の `.claude/skills/ui-ux-pro-max` ディレクトリ配下にスキルファイルが配置されます。主なファイルは次の通りです。

- `SKILL.md` – スキルのメイン定義と利用意図
- `data/` – スタイル、パレット、UX ガイドライン、チャートタイプなどのデザインインテリジェンスデータセット
- `scripts/` – デザインデータの検索や解釈を支援するスクリプト

環境によってはこれらのパスがマウント・ミラーされる場所が異なる場合がありますが、スキルが依存する中核部分は同じです。

### 2. まず確認しておくべきファイル
インストール後、ui-ux-pro-max の挙動を把握するために、まず次のファイルから確認するとスムーズです。

#### `SKILL.md`

- Web とモバイル向けの UI/UX デザインインテリジェンスという、高レベルの目的を説明しています。
- 50 以上のスタイル、161 のカラーパレット、57 のフォントペアリング、161 のプロダクトタイプ、99 の UX ガイドライン、25 のチャートタイプといったスコープを明示しています。
- スキルを **いつ適用すべきか** や **必ず使うべき場面** を明確にし、デザイン判断が必要なときだけ呼び出されるようにしています。

このファイルが、スキルが何を優先し、どのような条件でトリガーされるべきかを理解するための一次リファレンスです。

#### `data/`

- ui-ux-pro-max を支える構造化データセットが格納されています。
- プロダクトタイプ、カラ―システム、タイポグラフィの選択肢、UX ガイドライン、チャートタイプなどを含みます。
- SaaS ダッシュボードなのか EC チェックアウトなのか、といったコンテキストに応じて、エージェントが最適な推奨案を検索・選択できるようにします。

インストール時にこれらを編集する必要は基本的になく、ナレッジベースとして利用します。

#### `scripts/`

- データを読み込み・解釈するためのヘルパースクリプト群が入っています。
- パレット → フォントペアリング → レイアウトパターンのように、優先度ベースのレコメンドや構造化された検索を可能にします。

スキルを拡張したり独自のワークフローに統合したりする場合は、このディレクトリで再利用できるフックやロジックを探すとよいでしょう。

### 3. 典型的なワークフロー

#### 新しいページや画面のデザイン
次のような計画段階で ui-ux-pro-max を利用します。

- **ランディングページ** やマーケティングサイト
- **ダッシュボード / 管理画面**
- **SaaS アプリ / EC フロー**
- **モバイルアプリの画面**

一般的な流れは次の通りです。

1. プロダクトタイプ、ターゲットユーザー、プラットフォームを記述します（例: “B2B SaaS analytics dashboard in React with Tailwind”）。
2. ui-ux-pro-max を利用可能にしたエージェントに対し、次のような提案を依頼します。
   - 全体のレイアウト構造とナビゲーション
   - おすすめのスタイル（例: minimalism, bento grid, dark mode）
   - プロダクトタイプに適したカラーパレットとフォントペアリング
   - 追従すべき主要なインタラクションパターンと UX ガイドライン
3. ボタン、モーダル、フォーム、テーブル、チャートなど、コンポーネントレベルでのパターン提案を受けます。
4. React, Next.js, Vue, Svelte, React Native, Tailwind, shadcn/ui を使っている場合は、選んだデザイン方向を前提にした実装寄りのガイドを依頼します。

#### 既存 UI の改善・レビュー
すでに UI があり、改善したい場合は次のように使います。

1. 現在のデザイン、課題点、使用スタックを説明します。
2. ui-ux-pro-max に次のような観点での評価・提案を依頼します。
   - 99 の UX ガイドラインと照らし合わせた課題の洗い出し。
   - スペーシング、情報の階層構造、色の使い方、タイポグラフィを改善するための具体的な調整案。
   - データに対してより適切なチャートタイプ（25 のチャートパターンから）の提案。
3. プロダクトタイプとベストプラクティスに紐づけた、Before/After の提案セットとその根拠を求めます。

#### デザインシステムやコンポーネントライブラリとの整合
Tailwind ベースのデザインシステムや shadcn/ui などと組み合わせる場合は、次のように活用します。

- プロダクトタイプに応じて、どの **パターン** や **トークンの組み合わせ**（カラー、フォントサイズ、スペーシング）を重視すべきかを ui-ux-pro-max に判断させます。
- 環境側で shadcn/ui MCP 連携が有効になっている場合は：
  - ui-ux-pro-max に適切なコンポーネントパターンを特定させる。
  - MCP を使って、そのパターンに対応する具体的なコード例を検索する。

これにより、ドキュメントを一つひとつ手作業で調べなくても、デザイン判断とコンポーネント選定を同期できます。

### 4. スキルを明示的に呼び出すべきタイミング
`SKILL.md` の上流ガイドラインに従うと、次のようなタスクを扱うときに ui-ux-pro-max を呼び出すのが適しています。

- **UI 構造** – ページレイアウト、コンテンツ階層、ナビゲーションパターン。
- **ビジュアルデザインの判断** – スタイル、カラー、タイポグラフィ、スペーシング、シャドウ、グラデーション。
- **インタラクションパターン** – hover/focus 状態、ローディング状態、エラーハンドリング、マイクロインタラクション。
- **UX 品質管理** – 摩擦ポイントの特定と UX ガイドラインの適用。

デザインへの影響がない、純粋なコードタスクのみの場合は、このスキルを有効化せず、エンジニアリングに特化した応答に絞ることもできます。


## FAQ

### ui-ux-pro-max には実際に何が含まれていますか？
ui-ux-pro-max は、キュレーションされたデザインナレッジベースを搭載しています。50 以上のスタイル、161 のカラーパレット、57 のフォントペアリング、推論ルール付きの 161 のプロダクトタイプ、99 の UX ガイドライン、10 のスタック（React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS）にまたがってマッピングされた 25 のチャートタイプです。これらはデータとスクリプトとして保存され、エージェントがクエリしてデザイン意識のある推奨を返せるようになっています。

### 通常のコーディング支援と何が違いますか？
一般的なコーディング支援は、構文や API、実装の詳細にフォーカスします。一方 ui-ux-pro-max は、**デザイン判断と UX 品質** にフォーカスします。どのレイアウトを選ぶか、どのパレットがプロダクトに適しているか、フォームをどう構造化するか、どのチャートタイプを使うか、どのように UX のアンチパターンを避けるか、といった点を重視します。その上で、選んだ判断をあなたのフロントエンドスタックと整合させます。

### ui-ux-pro-max がサポートしている技術スタックは？
このスキルは次のスタックに対するデザインガイダンスをカバーするよう構築されています。

- Web フレームワーク: **React, Next.js, Vue, Svelte**
- モバイル / アプリフレームワーク: **SwiftUI, React Native, Flutter**
- スタイリングとコンポーネント: **Tailwind, shadcn/ui, HTML/CSS**

概念的には他のスタックでも応用できますが、明示的にターゲットとしているのはこれらのエコシステムです。

### Tailwind や shadcn/ui と一緒に使えますか？
はい。ui-ux-pro-max は Tailwind と shadcn/ui を明示的に認識しています。デザインパターン、カラ―システム、スペーシング、タイポグラフィを、Tailwind の utility class や shadcn/ui のコンポーネントに落とし込みやすい形で選ぶ手助けをします。shadcn/ui MCP が利用可能な環境であれば、コンポーネント検索やサンプルコードも併用できます。

### ui-ux-pro-max は UI コードを丸ごと生成してくれますか？
このスキルの主眼は **デザインインテリジェンス** であり、その次のステップとして実装ガイドを提供します。例えば次のような支援が可能です。

- UI コンポーネント構造と振る舞いを定義する。
- React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, HTML/CSS での実装方法を提案する。

ただし、最大の価値は **デザイン判断を行い、その根拠を示すこと** であって、コード断片だけを大量に生成することではありません。

### どんなときに ui-ux-pro-max を使うべきではありませんか？
次のようなタスクでは、このスキルはあまり役に立ちません。

- 完全にバックエンドやインフラに関する作業。
- UI や UX に影響しない、低レベルなリファクタリング。
- アルゴリズムやパフォーマンス最適化に特化した狭い問題。

こうしたケースでは、デザイン判断の余地がほとんどないため、ui-ux-pro-max を有効にしても恩恵は限定的です。

### ui-ux-pro-max を効果的に使い始めるには？
スキルをインストールしたら、次のステップで活用すると効果的です。

1. `SKILL.md` を読み、スコープと推奨される使い方を把握します。
2. UI を新規作成・更新する際、プロダクトタイプ、ターゲットユーザー、プラットフォーム、技術スタックをエージェントに明確に伝えます。
3. レイアウト案、スタイル方向性、カラーとフォントの推奨、UX チェックリスト、チャートの選定など、構造化されたアウトプットを依頼します。
4. ブリーフを少しずつ詰めながら、実装に近づくにつれて ui-ux-pro-max に UX 品質の再評価を依頼し、反復します。

### 内部のデータやスクリプトはどこで確認できますか？
スキルの Files タブを開き、次のファイルを確認してください。

- `SKILL.md` – スキルの高レベルな定義と適用ルール。
- `data/` – 構造化されたデザインデータセット。
- `scripts/` – レコメンデーションの基盤となるヘルパーロジック。

これらを読むことで、ui-ux-pro-max がどのように UI/UX を推論しているかを理解でき、提案内容を自分のプロジェクトに合わせて信頼・調整しやすくなります。