mcpField
U
UIMax MCP

UIMax MCP

ローカル
github.com/prembobby39-gif開発ツール1030 週間前に更新
リポジトリ

UIMax MCP について

UIMax MCPは、Claude Code向けのフロントエンドレビュー・修正サーバーです。ブラウザーのスクリーンショット、アクセシビリティ、Lighthouse、性能、SEO、コード検査を組み合わせ、修正やレビュー履歴の記録も行えます。

主な機能

  1. 01UIの自動レビューと修正
  2. 02スクリーンショットと複数ビューポートの撮影
  3. 03アクセシビリティ、Lighthouse、SEO監査
  4. 04Core Web Vitalsとリソース分析
  5. 05ASTベースのコード検査
  6. 06レビュー履歴、ベースライン、比較

活用シーン

  1. 01ローカルまたは到達可能なWebサイトの監査
  2. 02アクセシビリティ、性能、SEOの問題の特定
  3. 03UIスクリーンショットやレビュー結果の比較
  4. 04修正の適用と変更の検証

MCP 対応

UIMax MCPはMCP経由でClaude Codeにレビュー、ブラウザー操作、監査、レポートのツールを提供します。アクセス可能なURLとソースコードを検査でき、レビューの流れで修正も実装できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "uimax": {
      "command": "npx",
      "args": [
        "-y",
        "uimax-mcp"
      ]
    }
  }
}
起動コマンドnpx -y uimax-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmuimax-mcp0.7.0

ツール

34

掲載時のツール一覧 · 3 週間前に更新

パラメーター型必須説明
urlstringはい実行中のアプリケーションの URL（例：http://localhost:3000）
widthnumberいいえビューポートの幅（ピクセル）
heightnumberいいえビューポートの高さ（ピクセル）
codeDirectorystringはいフロントエンドのソースディレクトリの絶対パス（例：/Users/me/project/src）

詳細

UIMax MCP

Claude Code を、UI を自動でレビューして修正するフロントエンドのエキスパートに変えます。

npm version npm downloads license 37 tools 463 tests passing free for Pro plan

「localhost:3000 の UI をレビューして」というコマンドを実行すると、次の処理が行われます。

  1. アプリを確認 — Puppeteer で実際のスクリーンショットを撮影します
  2. アクセシビリティを監査 — axe-core を実行して WCAG 2.1 の違反を検出します
  3. Lighthouse を実行 — Google Lighthouse の実際のスコアを取得します（パフォーマンス、アクセシビリティ、ベストプラクティス、SEO）
  4. パフォーマンスを測定 — Core Web Vitals（FCP、LCP、CLS、TBT）を取得します
  5. SEO を監査 — メタタグ、Open Graph、Twitter カード、構造化データ、見出しの階層、canonical URL を18項目チェックします
  6. コードをスキャン — アクセシビリティ、デザイン、コード品質に関する25種類以上のアンチパターンを AST ベースで分析します
  7. すべてを評価 — アクセシビリティ、パフォーマンス、ベストプラクティス、SEO、コード品質を A+ から F のレターグレードで評価する、セクション別のレポートカードを作成します
  8. 専門家によるレビューを作成 — 組み込みのレビュー手法に基づき、Claude がシニアフロントエンドエンジニアとしてレビューします
  9. 修正を実装 — 重要度の高い問題から順に、実際のコードファイルを編集します
  10. すべてを記録 — レビュー履歴を自動保存するため、時間の経過に伴う進捗を確認できます

あらゆる URL で動作します — localhost、ステージング、本番環境に対応。お使いのマシンからアクセスできるサイトなら、どこでも利用できます。

すべての Claude Code ユーザーが無料で利用できます（Pro プラン以上）。API キーも追加費用も不要です。インストールするだけですぐに使えます。

claude mcp add uimax -- npx -y uimax-mcp

クイックスタート

MCP サーバーとしてインストール（Claude Code 用）
# Add to Claude Code — that's it, no API keys needed
claude mcp add uimax -- npx -y uimax-mcp

これで完了です。あとは Claude Code の会話で次のように入力します。

You: Review the UI at http://localhost:3000, source code is in ./src

Claude Code calls review_ui ->
  1. Captures screenshot of your running app
  2. Runs axe-core accessibility audit
  3. Runs Google Lighthouse (Performance, A11y, Best Practices, SEO)
  4. Measures Core Web Vitals
  5. Runs dedicated SEO audit (18 checks)
  6. Scans source code with AST-based analysis
  7. Generates per-section Report Card (A+ through F letter grades)
  8. Returns screenshot + all data + expert review methodology
  9. Claude Code generates expert review (using YOUR Pro plan -- $0 extra)
  10. Claude Code implements every fix automatically
  11. Review saved to .uimax-reviews.json for tracking
グローバルにインストール
npm install -g uimax-mcp

ツール（37）

レビューパイプライン
ツール説明
review_uiメインツール。 スクリーンショット、Lighthouse、axe-core、パフォーマンス、SEO、コード分析、レポートカード（A+〜F のレターグレード）、専門家によるレビュー手法を含む、完全自動化されたパイプラインです。レビュー履歴に自動保存します。
verify_fixesv0.9.0 の新機能。 修正を適用した後、監査全体を再実行します。前回のレビューと比較し、成績の変化、解決した問題の数、判定（改善／悪化／混在）を含む修正前後のレポートカードを表示します。レビュー、修正、検証のループを完結させます。
compare_sitesv0.9.0 の新機能。 競合ベンチマーク — 2つの URL を並べて監査します。両サイトのスクリーンショットに加え、アクセシビリティ、パフォーマンス、SEO の成績と、重み付けされた総合スコアを含む比較レポートカードを返します。
quick_reviewデザインに絞った素早いレビューです。スクリーンショットと、デザインに重点を置いたレビュー手法を使用します。コード分析やパフォーマンス監査は行いません。
export_reportすべての情報を埋め込んだ、単独で利用できる HTML レポートを生成します。レポートカードの成績カードと SEO セクションも含まれるようになりました。ダークテーマで、依存関係は不要です。チームと共有できます。
スクリーンショットとビジュアル
ツール説明
screenshot任意の URL の高解像度 PNG スクリーンショットを撮影します。
responsive_screenshotsモバイル（375px）、タブレット（768px）、デスクトップ（1440px）のビューポートでスクリーンショットを撮影します。
check_dark_modeライトモードとダークモード（エミュレーション）を比較します。両方のスクリーンショットと差異の割合を返します。
compare_screenshotspixelmatch を使ってピクセル単位で差分を検出します。両方のスクリーンショット、差分を赤く強調した画像、正確なピクセル差分率を返します。
semantic_compareAI を活用したビジュアル比較。 変更前後の画像とピクセル差分を取得し、変更が意図したデザイン要件に合っているかを Claude が評価するための、構造化された手法を返します。
Lighthouse、パフォーマンス、SEO
ツール説明
lighthouse_auditGoogle Lighthouse による総合監査です。パフォーマンス、アクセシビリティ、ベストプラクティス、SEO のスコアと不合格となった監査項目を確認します。
seo_auditv0.8.0 で追加。 18 のシグナルを確認する専用 SEO 監査です。メタタイトル／説明、見出しの階層、Open Graph、Twitter カード、構造化データ（JSON-LD）、正規 URL、画像の代替テキスト、viewport メタ、lang 属性などを確認します。影響度に応じた重み付けスコアを算出します。
pwa_auditPWA 対応状況を確認します。インストール可能か、サービスワーカー、HTTPS、マニフェスト、オフライン対応を調べます。
security_auditセキュリティ分析です。HTTPS、CSP、混在コンテンツ、脆弱な JS ライブラリ、noopener のない外部リンクを確認します。
unused_code未使用の JavaScript と CSS を検出し、リソースごとの正確なバイト削減量を示します。
lcp_optimizationLCP の詳細分析です。対象要素、リソースの読み込み時間、描画遅延、TTFB、最適化の提案を確認します。
resource_analysis種類別のリソース内訳、転送サイズ、リクエスト数、サイズが大きい上位 10 件、描画をブロックするリソースを確認します。
performance_auditPerformance API を使用した Core Web Vitals の監査です。FCP、LCP、CLS、TBT、DOM ノード数、JS ヒープサイズを確認します。
accessibility_auditaxe-core による WCAG 2.1 レベル A および AA の監査です。違反を重大度ごとに分類し、修正方法を示します。
コード分析
ツール説明
analyze_codeTypeScript コンパイラ API を使用した AST ベースの分析で、25 以上のルールを確認します。文字列リテラルによる誤検出はありません。JS 以外のファイルでは正規表現にフォールバックします。.uimaxrc.json で設定できます。
ブラウザー操作
ツール説明
navigateURL に移動し、ネットワークがアイドル状態になるまで待機します。ページ情報とスクリーンショットを返します。
clickCSS セレクターで要素をクリックします。クリック後のスクリーンショットを返します。
type_text入力フィールドに文字を入力します。オプション：clearFirst、pressEnter。入力後のスクリーンショットを返します。
select_option値を指定してドロップダウンの項目を選択します。選択後のスクリーンショットを返します。
scrollピクセル数を指定してスクロールするか、特定の要素までスクロールします。スクロール後のスクリーンショットを返します。
wait_forDOM に要素が表示されるまで待機します。タグ名とテキストコンテンツを返します。
get_element要素の詳細を取得します。属性、境界ボックス、計算済みスタイル、表示状態を確認できます。
デバッグ
ツール説明
capture_consoleページの読み込み中に発生したすべてのコンソールメッセージ（log、warn、error、info、debug）と捕捉されていない例外を記録します。
capture_networkすべてのネットワークリクエストについて、ステータス、サイズ、タイミング、リソースの種類を記録します。概要は種類ごとに分類されます。
capture_errorsJS の例外、処理されていない拒否、読み込みに失敗したリソースを記録します。
複数ページ
ツール説明
crawl_and_reviewURL から内部リンクを検出し、最大 10 ページを監査します。各ページのスクリーンショット、axe-core、パフォーマンスを確認します。
ベースラインと予算
ツール説明
save_baseline現在の監査状態を .uimax-history.json に保存します。スコアの推移を追跡できます。
compare_to_baseline現在の状態を前回のベースラインと比較します。改善と悪化を、評価の変化とともに表示します（例：「D -> B+ (+22)」）。
check_budgets.uimaxrc.json で設定されたパフォーマンス予算を適用します。Lighthouse のスコア、Web Vitals、違反件数について合否を判定します。
レビュー履歴
ツール説明
get_review_historyこのプロジェクトの過去のUIMaxレビューを表示します。URLで絞り込み、件数を指定できます。スコアとあわせて文字評価も表示されるようになりました。
get_review_stats集計統計：レビュー総数、スコアの推移、よくある問題、最も問題の多いファイルを表示します。コード品質の評価も含まれます。
review_diff2つの特定のレビューを比較します。新たな問題、解決済みの問題、文字評価の変化を含むスコアの変更を確認できます。

すべてのレビューは自動保存されます。 review_ui を実行すると、結果は .uimax-reviews.json に自動的に保存されます。手動で保存する必要はありません。「レビュー履歴を見せて」といつでも尋ねるだけです。

レポートカード（A+からF）

review_ui の実行時に、13段階の評価尺度による文字評価を使ったセクションごとのレポートカードが生成されるようになりました。

┌─────────────────────────────────────────────────────┐
│                    REPORT CARD                       │
├──────────────────┬──────────┬───────┬───────────────┤
│ Section          │ Score    │ Grade │ Rating        │
├──────────────────┼──────────┼───────┼───────────────┤
│ Accessibility    │ 95       │ A     │ Excellent     │
│ Performance      │ 72       │ C-    │ Below Average │
│ Best Practices   │ 88       │ B+    │ Very Good     │
│ SEO              │ 61       │ D-    │ Very Weak     │
│ Code Quality     │ 83       │ B     │ Good          │
└──────────────────┴──────────┴───────┴───────────────┘

評価は次の場所に表示されます。

  • review_ui の出力 — 各レビューの先頭にあるレポートカードの表
  • export_report のHTML — 色分けされた評価カード（緑のAから赤のF）
  • compare_to_baseline — 改善を示す評価の変化（例：D -> B+ (+22)）
  • get_review_history / get_review_stats / review_diff — 素早く確認できるよう、数値スコアとあわせて評価を表示

評価尺度：A+（97以上）> A（93以上）> A-（90以上）> B+（87以上）> B（83以上）> B-（80以上）> C+（77以上）> C（73以上）> C-（70以上）> D+（67以上）> D（63以上）> D-（60以上）> F（60未満）

ASTを活用したコード分析

analyze_code ツールは、.ts/.tsx/.js/.jsx ファイルに対してTypeScriptコンパイラAPIを使用し、正規表現では見逃されるバグを誤検知ゼロで検出します。

ルール正規表現では見逃されるASTの検出内容
react-hooks-conditionalネストされたif/for/while/三項演算子内のフック — スコープを適切にたどります
missing-key-propkey のないJSXを返す .map() コールバック — アロー関数本体とブロック本体に対応します
empty-catch空のcatchブロック — コメントに惑わされません
any-type型の位置にある any のみ — 文字列やコメント内の「any」は無視します
direct-dom-accessdocument.querySelector など — 呼び出し式を適切に照合します
console-logconsole.log/warn/error — 「console」を含む変数名に惑わされません
inline-styleJSXの style={} 属性 — 属性を適切に検出します

AST解析に対応していないファイル形式や、ASTによる実装のないルール（ハードコードされた色、z-index、フォントサイズなど）には、正規表現を使用します。

設定

コード分析とパフォーマンス予算をカスタマイズするには、プロジェクトのルートに .uimaxrc.json を作成します。

{
  "rules": {
    "console-log": "off",
    "magic-number": "off",
    "hardcoded-color": "warn",
    "inline-style": "error"
  },
  "severity": {
    "todo-fixme": "high"
  },
  "ignore": [
    "node_modules",
    "dist",
    "*.test.*",
    "*.spec.*"
  ],
  "budgets": {
    "lighthouse": {
      "performance": 90,
      "accessibility": 95,
      "bestPractices": 90,
      "seo": 90
    },
    "webVitals": {
      "fcp": 1800,
      "lcp": 2500,
      "cls": 0.1,
      "tbt": 300
    },
    "maxAccessibilityViolations": 0,
    "maxCodeIssues": 10
  }
}
  • rules — 任意のルールを "off"、"warn"、または "error" に設定します
  • severity — 深刻度を上書きします："low"、"medium"、"high"、"critical"
  • ignore — 分析対象から除外する追加のglobパターン
  • budgets — check_budgets ツールで適用されるパフォーマンスのしきい値

UIMaxは対象ディレクトリと最大3階層上の親ディレクトリから .uimaxrc.json を検索するため、モノレポでも動作します。

プロンプト

Claudeの分析を導く、専門家によるレビュー用プロンプト：

プロンプト用途
ui-review包括的なレビュー（デザイン＋UX＋アクセシビリティ＋パフォーマンス＋コード）
responsive-reviewビューポート全体にわたるレスポンシブデザインのレビュー
quick-design-reviewスクリーンショットだけを使った、迅速なビジュアル／UXフィードバック
semantic-compareAIを活用した変更前後のビジュアル比較

ワークフローの例

全体レビュー（メインのワークフロー）
You: Review the UI at http://localhost:3000
     Source code is in ./src

Claude: [Calls review_ui]
        [Captures screenshot, runs Lighthouse + axe + perf + code scan]
        [Generates 20+ findings with specific fixes]
        [Implements every fix automatically]
        [Auto-saves review to .uimax-reviews.json]
任意の公開ウェブサイトをレビュー
You: Review the UI at https://stripe.com

Claude: [Calls review_ui]
        [Full audit of the live production site]
        [Returns findings + recommendations]
経時的な進捗の追跡
You: Show me my review history

Claude: [Calls get_review_history]
        [Shows table of past reviews: dates, scores, issue counts]

You: Compare my last two reviews

Claude: [Calls review_diff]
        [Shows what improved ✅, what regressed ❌, new issues, resolved issues]

You: What are my most common issues?

Claude: [Calls get_review_stats]
        [Shows trends, most common issues, most problematic files]
アプリを操作
You: Navigate to localhost:3000, click the login button,
     type "[email protected]" in the email field

Claude: [Calls navigate → click → type_text]
        [Returns a screenshot after each action]
        [Verifies each step visually]
詳細なパフォーマンス分析
You: Find unused code on https://myapp.com

Claude: [Calls unused_code]
        [Lists every unused JS/CSS file with byte savings]
        [Suggests what to tree-shake]

You: Why is my LCP slow?

Claude: [Calls lcp_optimization]
        [Identifies the LCP element, breakdown of load time]
        [Specific optimization suggestions]
修正を検証（フィードバックループを完了）
You: Review and fix my UI at localhost:3000

Claude: [Calls review_ui → finds 14 issues → implements fixes]

You: Now verify the fixes worked

Claude: [Calls verify_fixes]
        [Re-runs full audit → compares to previous review]

  Fix Verification — Before vs After
  | Metric                   | Before | After | Change  |
  | Accessibility violations | 5      | 0     | ✅ -5   |
  | Code findings            | 9      | 2     | ✅ -7   |
  | Total issues             | 14     | 2     | ✅ -12  |

  Verdict: ✅ IMPROVED
競合ベンチマーク
You: Compare my site vs stripe.com

Claude: [Calls compare_sites]
        [Audits both URLs concurrently]
        [Returns screenshots of both sites + comparison table]

  | Category      | myapp.com | stripe.com | Winner       |
  | Accessibility | C+ (78)   | A  (94)    | ✅ stripe.com |
  | Performance   | B- (81)   | A+ (98)    | ✅ stripe.com |
  | SEO           | D  (63)   | A  (93)    | ✅ stripe.com |
  | Overall       | C  (74)   | A  (95)    | ✅ stripe.com |
SEO監査
You: Run an SEO audit on https://myapp.com

Claude: [Calls seo_audit]
        [Checks 18 SEO signals: meta tags, Open Graph, structured data, etc.]
        [Returns score, passing checks, and failed checks with fix recommendations]
        [Weighted by impact: critical > high > medium > low]
ページ読み込みの問題をデバッグ
You: What console errors does localhost:3000 produce?

Claude: [Calls capture_console]
        [Returns all console messages + uncaught exceptions]

You: Show me all network requests on page load

Claude: [Calls capture_network]
        [Returns every request: URL, status, size, timing]
        [Summary grouped by resource type]
変更前後の比較
You: Compare localhost:3000 with localhost:3001

Claude: [Calls compare_screenshots]
        [Pixel-level diff with red-highlighted changes]
        [Reports exact pixel difference %]
意味的なビジュアルレビュー
You: I changed the header to be sticky. Compare before and after.

Claude: [Calls semantic_compare with change description]
        [Captures both states + pixel diff]
        [Evaluates whether changes match the intent]
        [Checks for visual regressions]
パフォーマンス予算の適用
You: Check if my site meets our performance budgets

Claude: [Calls check_budgets]
        [Reads thresholds from .uimaxrc.json]
        [Returns ✅ pass or ❌ fail for each metric]
共有可能なレポートを生成
You: Export a full report of localhost:3000 to ./report.html

Claude: [Calls export_report]
        [Generates standalone dark-themed HTML report]
        [Open in any browser, share with team]
複数ページの監査
You: Crawl localhost:3000 and audit all pages

Claude: [Calls crawl_and_review]
        [Discovers internal links, audits up to 10 pages]
        [Per-page: screenshot + accessibility + performance]

Claude のレビュー項目

完全な review_ui パイプラインを使用すると、Claude は次の項目を評価します。

カテゴリ確認項目
ビジュアルデザインレイアウト、タイポグラフィ、色のコントラスト、余白、影、アイコンの一貫性
ユーザーエクスペリエンスナビゲーション、操作状態、読み込み／エラー／空の状態、エッジケース
アクセシビリティWCAG 2.1 AA、キーボード操作、スクリーンリーダー対応、フォーカス管理
パフォーマンスLighthouse スコア、Core Web Vitals、レンダリングをブロックするリソース、バンドルサイズ
SEOメタタグ、Open Graph、Twitter カード、構造化データ、見出しの階層、正規 URL、画像の代替テキスト
コード品質コンポーネントアーキテクチャ、CSS の構成、エラーバウンダリ、TypeScript の安全性
セキュリティHTTPS、CSP、脆弱性のあるライブラリ、混在コンテンツ
評価レポートアクセシビリティ、パフォーマンス、ベストプラクティス、SEO、コード品質のセクションごとの評価（A+ から F）
クリエイティブモダンな UI パターン（Linear、Vercel、Raycast）、マイクロインタラクション、アニメーション

コード分析ルール

analyze_code ツールは、各カテゴリにわたる 25 以上のルールをチェックします。

ルール重大度カテゴリ
img-no-alt高アクセシビリティ
click-no-keyboard高アクセシビリティ
no-form-label高アクセシビリティ
missing-viewport-meta高アクセシビリティ
no-lang-attr中アクセシビリティ
no-focus-visible中アクセシビリティ
empty-catch高コード品質
react-hooks-conditional高コード品質
missing-key-prop高バグ
console-log低コード品質
todo-fixme低コード品質
inline-style中コード品質
any-type中コード品質
magic-number低コード品質
direct-dom-access中コード品質
event-handler-inline低コード品質
important-css中デザイン
hardcoded-color低デザイン
z-index-high中デザイン
font-too-small中デザイン
no-lazy-image中パフォーマンス
large-bundle-import中パフォーマンス
no-error-boundary中UX
missing-meta-description中UX
large-file中／高コード品質
deep-nesting中／高コード品質

すべてのルールは .uimaxrc.json で切り替えられます。

対応フレームワーク

package.json から自動検出されます。

  • React / Next.js
  • Vue / Nuxt
  • Svelte / SvelteKit
  • Angular
  • プレーンな HTML/CSS/JS

要件

  • Node.js >= 18.0.0
  • Chrome/Chromium（システムの Chrome を使用します。追加のダウンロードは不要です）
  • Claude Code（MCP 統合用）
  • API キーは不要 — 既存の Pro プランを使用し、すべて Claude Code 内で実行されます

仕組み

+----------------------------------------------------------------------+
|                    Claude Code (your Pro plan)                         |
|                                                                       |
|  User: "Review my UI at localhost:3000 and fix everything"            |
|           |                                                           |
|           v                                                           |
|  +----------------------------------------------------------------+  |
|  |                UIMax MCP (37 tools)                             |  |
|  |                                                                 |  |
|  |  Screenshot -------> Puppeteer ----------> PNG Image            |  |
|  |  Accessibility ----> axe-core ------------> WCAG Violations     |  |
|  |  Lighthouse -------> Google LH ----------> Scores + Audits     |  |
|  |  Deep LH ----------> PWA/Security/LCP --> Granular Analysis    |  |
|  |  SEO Audit --------> 18 checks ----------> SEO Score           |  |
|  |  Performance ------> Perf API ----------> Web Vitals           |  |
|  |  Code Scan --------> TypeScript AST -----> Anti-patterns       |  |
|  |  Report Card ------> Grading Engine -----> A+ to F Grades      |  |
|  |  Browser ----------> Click/Type/Scroll --> Interaction          |  |
|  |  Debugging --------> Console/Network ----> Runtime Data        |  |
|  |  History ----------> .uimax-reviews.json > Progress Tracking   |  |
|  |  Expert Prompt ----> Baked-in methodology                      |  |
|  +----------------------------+-----------------------------------+  |
|                               |                                      |
|                               v                                      |
|  Claude Code receives: screenshot + data + expert methodology        |
|                               |                                      |
|                               v                                      |
|  Claude acts as world-class frontend expert (FREE -- Pro plan)       |
|     Generates comprehensive review with exact fixes                  |
|                               |                                      |
|                               v                                      |
|  Claude implements every fix in the codebase automatically           |
|                                                                       |
+----------------------------------------------------------------------+

CI / GitHub Action

UIMax には、すべての PR で監査を実行し、評価レポートのコメントを投稿する、再利用可能な GitHub Action が付属しています。

クイックセットアップ

サンプルのワークフローをプロジェクトにコピーします。

# .github/workflows/uimax-ci.yml
name: UIMax Review
on:
  pull_request:
    branches: [main]

jobs:
  uimax-review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"

      # Build and start your app
      - run: npm ci && npm run build
      - run: npm start &
      - run: npx wait-on http://localhost:3000

      # Run UIMax
      - uses: prembobby39-gif/uimax-mcp/.github/actions/uimax-review@main
        with:
          url: http://localhost:3000
          budget-accessibility: 90
          budget-performance: 80
          budget-seo: 80
          max-violations: 0
Action の入力
入力説明必須デフォルト
url監査対象の URLはい—
github-tokenPR コメント用のトークンいいえGITHUB_TOKEN
budget-performanceパフォーマンスの最低スコア（0-100）いいえ—
budget-accessibilityアクセシビリティの最低スコア（0-100）いいえ—
budget-seoSEO の最低スコア（0-100）いいえ—
max-violations許容される a11y 違反の最大数いいえ—
fail-on-regression評価が低下した場合に失敗させるいいえfalse
アクションの出力
出力説明
accessibility-gradeA+ から F までの評価
performance-grade評価
seo-grade評価
total-violationsアクセシビリティ違反の件数
passedすべての予算を満たしたかどうか（true/false）
report完全な Markdown レポート

このアクションは再プッシュ時に既存の UIMax コメントを更新します（コメントは重複しません）。

完全な動作例については、examples/uimax-ci.yml を参照してください。

開発

# Clone
git clone https://github.com/prembobby39-gif/uimax-mcp.git
cd uimax-mcp

# Install
npm install

# Build
npm run build

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Test locally with Claude Code
claude mcp add uimax-dev -- node /path/to/uimax-mcp/dist/index.js

コントリビューション

コントリビューションを歓迎します！アイデアの一部をご紹介します。

  • CSS の詳細度アナライザー
  • デザイントークンの抽出
  • フレームワーク固有のチェック（Vue Composition API、Svelte のストア）
  • ピクセル単位の差分によるビジュアルリグレッション
  • パフォーマンス予算（スコアがしきい値を下回った場合に失敗）
  • ブラウザー操作（クリック、入力、スクロール、移動）
  • コンソールとネットワークのキャプチャ
  • 詳細な Lighthouse 分析（PWA、セキュリティ、未使用コード、LCP、リソース）
  • AI によるセマンティックなビジュアル比較
  • 自動保存によるレビュー履歴の追跡
  • 専用の SEO 監査（18 項目のチェック、重み付けスコア）
  • セクションごとの評価（A+ から F までの成績表）
  • 修正の検証（評価の変化を含む修正前後の比較）
  • 競合ベンチマーク（サイトの並列比較）
  • CI/CD 統合（PR の自動レビュー用 GitHub Action）
  • カスタムルールプラグイン（ユーザー定義の正規表現ルール）
  • Figma デザインとの比較（スクリーンショットと Figma のモックアップ）
  • クロスブラウザーテスト（Playwright による Firefox、WebKit）

ライセンス

MIT

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。