Ui/ux Tools React + Material Ui

🎨 React + Material-UI 向け UX/UI ツール（MCP サーバー）

React コンポーネントに Material-UI の UX/UI ベストプラクティスを適用する、AI を活用したツールを提供する Model Context Protocol（MCP）サーバーです。

MCP に対応する GitHub Copilot、Claude Desktop、その他の AI アシスタントでの利用に最適です。

---

✨ 特長

• �� レスポンシブデザイン - MUI ブレークポイントを使用したモバイルファーストのパターン
• 🎨 Material-UI のベストプラクティス - テーマのスペーシング、アルファ透過、sx プロパティ
• 🍎 Apple のデザインパターン - カスタムスクロールバー、滑らかなアニメーション、ミニマルなデザイン
• 🎯 ニールセンの10のヒューリスティック - 使いやすさに関する包括的なガイドライン
• 🧠 認知バイアス - フィッツの法則、グルーピング効果、近接の原則など
• ✅ UX チェックリスト - すぐに使える検証チェックリスト

---

📦 インストール

オプション 1：npx を使用（推奨）

インストールは不要です！npx で直接使用できます。

npx @marcusbarcelos/uiux-tools-react-mui

オプション 2：グローバルインストール

npm install -g @marcusbarcelos/uiux-tools-react-mui

オプション 3：Docker

docker run -i marcusbarcelos/uiux-tools-react-mui

---

⚙️ 設定

GitHub Copilot（VS Code）

~/.config/Code/User/mcp.json（Linux/Mac）または %APPDATA%\Code\User\mcp.json（Windows）に追加します。

{
  "servers": {
    "uiux-tools": {
      "command": "npx",
      "args": ["-y", "@marcusbarcelos/uiux-tools-react-mui"]
    }
  }
}

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json（Mac）または %APPDATA%\Claude\claude_desktop_config.json（Windows）に追加します。

{
  "mcpServers": {
    "uiux-tools": {
      "command": "npx",
      "args": ["-y", "@marcusbarcelos/uiux-tools-react-mui"]
    }
  }
}

Docker の設定

{
  "servers": {
    "uiux-tools": {
      "command": "docker",
      "args": ["run", "-i", "marcusbarcelos/uiux-tools-react-mui"]
    }
  }
}

---

🚀 利用可能なツール

1. apply_responsiveness

モバイルファーストのレスポンシブデザインパターンを適用します。

入力：

• component：コンポーネントのコードまたはファイル名

例：

Use tool apply_responsiveness on src/components/MyComponent.tsx

2. apply_material_ui_best_practices

Material-UI のベストプラクティス（theme.spacing、alpha、sx プロパティ）を適用します。

3. apply_apple_design

Apple のデザインパターン（カスタムスクロールバー、アニメーション、ミニマリズム）を適用します。

4. apply_nielsen_heuristic

指定したニールセンのヒューリスティック（1～10）を適用します。

入力：

• component：コンポーネントのコード
• heuristic：ヒューリスティックの番号（1～10）

例：

Use tool apply_nielsen_heuristic with heuristic=1 on current component

5. apply_cognitive_bias

UX を向上させる認知バイアスを適用します。

入力：

• component：コンポーネントのコード
• bias：fitts、grouping、proximity、zeigarnik、serial-position、hicks のいずれか

6. apply_complete_ux

すべての UX/UI ガイドラインを一度に適用します。

7. get_ux_checklist

UX/UI レビュー用の検証チェックリストを取得します。

---

💡 使用例

GitHub Copilot で使用

Use tool apply_complete_ux on src/components/Notification.tsx

Use tool get_ux_checklist

Use tool apply_responsiveness on current file

Claude Desktop で使用

次のように尋ねます。

「このコンポーネントに UX ガイドラインをすべて適用して」

「UX チェックリストを見せて」

---

📚 含まれる内容

ニールセンの10のユーザビリティヒューリスティック

1. システム状態の可視性 - 読み込み状態、進行状況インジケーター
2. システムと現実世界の一致 - ユーザーにとって分かりやすい言葉
3. ユーザーのコントロールと自由 - キャンセルボタン、操作の取り消し
4. 一貫性と標準 - 統一された色、アイコン、パターン
5. エラーの防止 - リアルタイム検証、入力制限
6. 想起より再認 - 表示される選択肢、ツールチップ
7. 柔軟性と効率性 - キーボードショートカット、クイックアクション
8. 美的でミニマルなデザイン - 視覚的なノイズを取り除く
9. ユーザーがエラーを認識できるようにする - 分かりやすいエラーメッセージ、提案
10. ヘルプとドキュメント - ツールチップ、補助テキスト、プレースホルダー

認知バイアス

• フィッツの法則 - 大きなタッチターゲット（≥44px）、近くに配置されたアクション
• グルーピング効果 - 関連項目をまとめ、視覚的に分離
• 近接の原則 - 関連する要素を近くに配置
• ツァイガルニク効果 - 未完了タスクのインジケーター（バッジ、進行状況）
• 系列位置効果 - 重要なアクションを上部または下部に配置
• ヒックの法則 - 選択肢を制限し、段階的に開示

Material-UI のパターン

• 一貫した間隔設定には theme.spacing() を使用します
• 透明度の設定には alpha() を使用します
• styled components の代わりに sx prop を使用します
• theme.transitions で滑らかなトランジションを実現します
• カスタムスクロールバー
• タッチ操作に適したターゲット

---

🐳 Docker

イメージのビルド

docker build -t MarcusViniciusBarcelos/uiux-tools-react-mui .

サーバーの実行

docker run -i MarcusViniciusBarcelos/uiux-tools-react-mui

Docker Hub

docker pull MarcusViniciusBarcelos/uiux-tools-react-mui

---

🛠️ 開発

リポジトリのクローン

git clone https://github.com/MarcusViniciusBarcelos/uiux-tools-react-mui.git
cd uiux-tools-react-mui
npm install

ローカルで実行

npm start

Inspector でテスト

npx @modelcontextprotocol/inspector node index.js

---

📄 ライセンス

MIT © Datacred Team

---

🤝 コントリビューション

コントリビューションを歓迎します。お気軽に Pull Request を送信してください。

1. リポジトリをフォークします
2. 機能ブランチを作成します（git checkout -b feature/AmazingFeature）
3. 変更をコミットします（git commit -m 'Add some AmazingFeature'）
4. ブランチにプッシュします（git push origin feature/AmazingFeature）
5. Pull Request を作成します

---

🔗 リンク

• Model Context Protocol ドキュメント
• Material-UI ドキュメント
• Nielsen Norman Group - 10 Usability Heuristics
• Laws of UX

---

📧 サポート

• 🐛 問題を報告
• 💬 ディスカッション

---

React アプリケーションの UX/UI を向上させるために ❤️ を込めて作成