Uimax Mcp

io.github.prembobby39-gif由 GitHub 帳號 prembobby39-gif 發布v0.7.0更新於 Oct 24, 2026

Frontend expert for Claude Code. Screenshots, Lighthouse, axe-core, code analysis, auto-fix.

已驗證STDIO僅桌面瀏覽器自動化開發者工具安全與監控

服務詳細資訊

識別碼: io.github.prembobby39-gif/uimax-mcp
傳輸: STDIO
執行環境: Desktop only
信任: Verified
發布於: Sep 16, 2026

安全提示

MCP 服務會接收對話中的工具呼叫請求，並可能執行外部操作。啟用前請先了解該服務能做什麼，並只授予它所需的權限。

註冊中心已驗證此條目所屬的 GitHub 帳號 prembobby39-gif。這並不表明該帳號就是產品方。

SourceWeft 的檢查只涵蓋條目是否完整、端點是否回應；不審查伺服器的程式碼，也不審查其工具的行為。

在 README 中新增徽章

向讀者展示該 MCP 服務已收錄於 SourceWeft，徽章連結到本頁。

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/io.github.prembobby39-gif%2Fuimax-mcp.svg)](https://sourceweft.com/mcp/io.github.prembobby39-gif%2Fuimax-mcp?utm_source=readme&utm_medium=badge)

概覽

AI 產生的概覽

一個本機 MCP 伺服器，讓 Claude Code 對網頁介面截圖、稽核與審查，並直接修改原始碼修正發現的問題。

可以做什麼: 執行完整 UI 審查流程：截圖、Lighthouse、axe-core 無障礙、Core Web Vitals、SEO 與程式碼分析，產生字母等級評分卡並保存歷史，還支援修正驗證與網站比較。擷取一般、響應式與深色模式截圖，進行像素級或語意化前後對比。執行 Lighthouse、SEO、PWA、安全、效能、未使用程式碼、LCP 與無障礙稽核。以基於 AST 的規則和可設定的預算分析原始碼。操作頁面：導覽、點擊、輸入、選擇、捲動、等待與檢視元素。擷取主控台訊息、網路請求與錯誤，最多爬取 10 個頁面，並匯出獨立 HTML 報告。
適用情境: 適合在開發或維護 Web 前端時，讓助理稽核執行中的應用程式或公開網站的无障礙、效能、SEO 與程式碼品質，然後套用修正並驗證成效。也適合做修改前後的視覺對比與競品基準比較。
執行需求: 透過 stdio 在本機執行，通常以 npx 或全域 npm 安裝。需要 Node.js 18 或更新版本，以及供 Puppeteer 使用的系統 Chrome/Chromium。README 表示無需 API 金鑰，並在 Claude Code 中使用。被稽核的網址必須能從本機連線。

安裝前請注意

審查流程會自動修改你實際的原始碼檔案，請使用版本控制並檢查變更。它可以稽核本機可連線的任何網址，包括公開的正式站台，並把審查資料存到 .uimax-reviews.json、.uimax-history.json 等本機檔案。瀏覽器互動工具會在實際頁面上點擊與輸入。

安裝

在 SourceWeft 中

開啟儀表板中的 Uimax Mcp，將其新增到工作區。
為需要使用其工具的對話啟用該服務。

Desktop only，透過 STDIO。 STDIO 服務會啟動本機處理程序，因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照儲存庫中的啟動說明。

README

UIMax MCP

Turns Claude Code into a frontend expert that reviews and fixes your UI automatically.

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

One command — "review my UI at localhost:3000" — and it:

Sees your app — captures a real screenshot via Puppeteer
Audits accessibility — runs axe-core for WCAG 2.1 violations
Runs Lighthouse — real Google Lighthouse scores (Performance, Accessibility, Best Practices, SEO)
Measures performance — captures Core Web Vitals (FCP, LCP, CLS, TBT)
Audits SEO — 18 checks: meta tags, Open Graph, Twitter cards, structured data, heading hierarchy, canonical URLs
Scans your code — AST-based analysis for 25+ anti-patterns across accessibility, design, and code quality
Grades everything — per-section Report Card with letter grades (A+ through F) for Accessibility, Performance, Best Practices, SEO, and Code Quality
Generates an expert review — Claude acts as a senior frontend engineer with a baked-in review methodology
Implements the fixes — edits your actual code files, starting from critical issues down
Tracks everything — auto-saves review history so you can see progress over time

Works on any URL — localhost, staging, production. Any site your machine can reach.

Free for all Claude Code users (Pro plan and above). No API keys. No extra costs. Just install and go.

Quick Start

Install as MCP Server (for Claude Code)

That's it. Now in any Claude Code conversation:

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

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

Install Globally

Tools (37)

Review Pipeline

Tool	Description
`review_ui`	The main tool. Full automated pipeline: screenshot + Lighthouse + axe-core + performance + SEO + code analysis + Report Card (A+-F letter grades) + expert review methodology. Auto-saves to review history.
`verify_fixes`	New in v0.9.0. Re-run the full audit after applying fixes. Compares against the previous review and shows a before/after Report Card with grade transitions, resolved issue count, and verdict (improved/regressed/mixed). Closes the review-fix-verify loop.
`compare_sites`	New in v0.9.0. Competitive benchmarking — audit two URLs side-by-side. Returns screenshots of both sites plus a comparison Report Card with grades for Accessibility, Performance, SEO, and weighted Overall score.
`quick_review`	Fast design-only review. Screenshot + focused design methodology. No code analysis or performance audit.
`export_report`	Generate a standalone HTML report with everything embedded. Now includes Report Card grade cards and SEO section. Dark themed, zero dependencies. Share with your team.

Screenshots & Visual

Tool	Description
`screenshot`	Capture a high-resolution PNG screenshot of any URL.
`responsive_screenshots`	Screenshots at mobile (375px), tablet (768px), and desktop (1440px) viewports.
`check_dark_mode`	Compare light mode vs dark mode (emulated). Returns both screenshots + difference percentage.
`compare_screenshots`	Pixel-level diff using `pixelmatch`. Returns both screenshots + red-highlighted diff image + exact pixel difference %.
`semantic_compare`	AI-powered visual comparison. Captures before/after + pixel diff, returns structured methodology for Claude to evaluate whether changes match the intended design request.

Lighthouse, Performance & SEO

Tool	Description
`lighthouse_audit`	Full Google Lighthouse audit — Performance, Accessibility, Best Practices, SEO scores + failing audits.
`seo_audit`	New in v0.8.0. Dedicated SEO audit checking 18 signals: meta title/description, heading hierarchy, Open Graph, Twitter cards, structured data (JSON-LD), canonical URLs, image alt text, viewport meta, lang attribute, and more. Weighted scoring by impact.
`pwa_audit`	PWA readiness: installable, service worker, HTTPS, manifest, offline capability.
`security_audit`	Security analysis: HTTPS, CSP, mixed content, vulnerable JS libraries, external links without `noopener`.
`unused_code`	Find unused JavaScript and CSS with exact byte savings per resource.
`lcp_optimization`	Deep LCP analysis: what the element is, resource load time, render delay, TTFB, optimization suggestions.
`resource_analysis`	Full resource breakdown by type, transfer sizes, request count, top 10 largest, render-blocking resources.
`performance_audit`	Core Web Vitals via Performance API: FCP, LCP, CLS, TBT, DOM node count, JS heap size.
`accessibility_audit`	axe-core WCAG 2.1 Level A & AA audit. Violations grouped by severity with fix instructions.

Code Analysis

Browser Interaction

Tool	Description
`navigate`	Navigate to a URL, wait for network idle. Returns page info + screenshot.
`click`	Click an element by CSS selector. Returns screenshot after click.
`type_text`	Type into input fields. Options: `clearFirst`, `pressEnter`. Returns screenshot after.
`select_option`	Select a dropdown option by value. Returns screenshot after.
`scroll`	Scroll by pixel amount or to a specific element. Returns screenshot after.
`wait_for`	Wait for an element to appear in the DOM. Returns tag name and text content.
`get_element`	Get element details: attributes, bounding box, computed styles, visibility.

Debugging

Tool	Description
`capture_console`	Capture all console messages (log, warn, error, info, debug) + uncaught exceptions during page load.
`capture_network`	Capture all network requests with status, size, timing, resource type. Summary grouped by type.
`capture_errors`	Capture JS exceptions, unhandled rejections, and failed resource loads.

Multi-Page

Baselines & Budgets

Tool	Description
`save_baseline`	Save current audit state to `.uimax-history.json`. Track scores over time.
`compare_to_baseline`	Compare current state vs previous baseline. Shows improvements and regressions with letter grade transitions (e.g., "D -> B+ (+22)").
`check_budgets`	Enforce performance budgets from `.uimaxrc.json`. Pass/fail for Lighthouse scores, Web Vitals, violation counts.

Review History

Tool	Description
`get_review_history`	View past UIMax reviews for this project. Filter by URL, limit count. Now includes letter grades alongside scores.
`get_review_stats`	Aggregate statistics: total reviews, score trends, most common issues, most problematic files. Includes Code Quality grades.
`review_diff`	Compare two specific reviews — new issues, resolved issues, score changes with letter grade transitions.

Every review is auto-saved. When you run review_ui, the results are automatically persisted to .uimax-reviews.json. No manual save needed — just ask "show me my review history" anytime.

Report Card (A+ through F)

Every review_ui run now generates a per-section Report Card with letter grades on a 13-tier scale:

┌─────────────────────────────────────────────────────┐│                    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          │└──────────────────┴──────────┴───────┴───────────────┘

┌─────────────────────────────────────────────────────┐│                    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          │└──────────────────┴──────────┴───────┴───────────────┘

Grades appear in:

review_ui output — Report Card table at the top of every review
export_report HTML — color-coded grade cards (green A -> red F)
compare_to_baseline — grade transitions showing improvement (e.g., D -> B+ (+22))
get_review_history / get_review_stats / review_diff — grades alongside numeric scores for quick scanning

The grading scale: 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-Powered Code Analysis

The analyze_code tool uses the TypeScript compiler API for .ts/.tsx/.js/.jsx files — catching bugs that regex misses with zero false positives.

Rule	What AST catches that regex misses
`react-hooks-conditional`	Hooks inside nested if/for/while/ternary — proper scope traversal
`missing-key-prop`	`.map()` callbacks returning JSX without `key` — handles arrow/block bodies
`empty-catch`	Empty catch blocks — not fooled by comments
`any-type`	`any` in type positions only — ignores "any" in strings/comments
`direct-dom-access`	`document.querySelector` etc. — proper call expression matching
`console-log`	`console.log/warn/error` — not fooled by variable names containing "console"
`inline-style`	JSX `style={}` attributes — proper attribute detection

Falls back to regex for file types that can't be AST-parsed and for rules without AST implementations (hardcoded colors, z-index, font sizes, etc.).

Configuration

Create a .uimaxrc.json in your project root to customize code analysis and performance budgets:

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": {    "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 — Set any rule to "off", "warn", or "error"
severity — Override severity: "low", "medium", "high", "critical"
ignore — Additional glob patterns to exclude from analysis
budgets — Performance thresholds enforced by the check_budgets tool

UIMax searches for .uimaxrc.json in the target directory and up to 3 parent directories, so it works in monorepos.

Prompts

Expert review prompts that guide Claude's analysis:

Prompt	Use Case
`ui-review`	Comprehensive review (design + UX + a11y + perf + code)
`responsive-review`	Responsive design review across viewports
`quick-design-review`	Fast visual/UX feedback from a screenshot only
`semantic-compare`	AI-powered before/after visual comparison

Example Workflows

Full Review (the main workflow)

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 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]

Review Any Public Website

You: Review the UI at https://stripe.com
Claude: [Calls review_ui]        [Full audit of the live production site]        [Returns findings + recommendations]

You: Review the UI at https://stripe.com
Claude: [Calls review_ui]        [Full audit of the live production site]        [Returns findings + recommendations]

Track Progress Over Time

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: 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]

Interact with Your App

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: 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]

Deep Performance Analysis

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: 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]

Verify Fixes (Close the Loop)

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: 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

Competitive Benchmarking

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 |

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 Audit

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: 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]

Debug Page Load Issues

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: 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]

Before/After Comparison

You: Compare localhost:3000 with localhost:3001
Claude: [Calls compare_screenshots]        [Pixel-level diff with red-highlighted changes]        [Reports exact pixel difference %]

You: Compare localhost:3000 with localhost:3001
Claude: [Calls compare_screenshots]        [Pixel-level diff with red-highlighted changes]        [Reports exact pixel difference %]

Semantic Visual Review

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: 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]

Enforce Performance Budgets

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: Check if my site meets our performance budgets
Claude: [Calls check_budgets]        [Reads thresholds from .uimaxrc.json]        [Returns ✅ pass or ❌ fail for each metric]

Generate Shareable Report

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: 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]

Multi-Page Audit

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]

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]

What Claude Reviews

When using the full review_ui pipeline, Claude evaluates:

Category	What's Checked
Visual Design	Layout, typography, color contrast, whitespace, shadows, icon consistency
User Experience	Navigation, interaction states, loading/error/empty states, edge cases
Accessibility	WCAG 2.1 AA, keyboard nav, screen reader compat, focus management
Performance	Lighthouse scores, Core Web Vitals, render-blocking resources, bundle size
SEO	Meta tags, Open Graph, Twitter cards, structured data, heading hierarchy, canonical URLs, image alt text
Code Quality	Component architecture, CSS organization, error boundaries, TypeScript safety
Security	HTTPS, CSP, vulnerable libraries, mixed content
Report Card	Per-section letter grades (A+ through F) for Accessibility, Performance, Best Practices, SEO, Code Quality
Creative	Modern UI patterns (Linear, Vercel, Raycast), micro-interactions, animations

Code Analysis Rules

The analyze_code tool checks for 25+ rules across categories:

Rule	Severity	Category
`img-no-alt`	High	Accessibility
`click-no-keyboard`	High	Accessibility
`no-form-label`	High	Accessibility
`missing-viewport-meta`	High	Accessibility
`no-lang-attr`	Medium	Accessibility
`no-focus-visible`	Medium	Accessibility
`empty-catch`	High	Code Quality
`react-hooks-conditional`	High	Code Quality
`missing-key-prop`	High	Bug
`console-log`	Low	Code Quality
`todo-fixme`	Low	Code Quality
`inline-style`	Medium	Code Quality
`any-type`	Medium	Code Quality
`magic-number`	Low	Code Quality
`direct-dom-access`	Medium	Code Quality
`event-handler-inline`	Low	Code Quality
`important-css`	Medium	Design
`hardcoded-color`	Low	Design
`z-index-high`	Medium	Design
`font-too-small`	Medium	Design
`no-lazy-image`	Medium	Performance
`large-bundle-import`	Medium	Performance
`no-error-boundary`	Medium	UX
`missing-meta-description`	Medium	UX
`large-file`	Medium/High	Code Quality
`deep-nesting`	Medium/High	Code Quality

All rules can be toggled via .uimaxrc.json.

Supported Frameworks

Auto-detected from package.json:

React / Next.js
Vue / Nuxt
Svelte / SvelteKit
Angular
Plain HTML/CSS/JS

Requirements

Node.js >= 18.0.0
Chrome/Chromium (uses your system Chrome — no extra download)
Claude Code (for MCP integration)
No API keys needed — runs entirely within Claude Code using your existing Pro plan

How It Works

+----------------------------------------------------------------------+|                    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           ||                                                                       |+----------------------------------------------------------------------+

+----------------------------------------------------------------------+|                    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 ships with a reusable GitHub Action that runs audits on every PR and posts a Report Card comment.

Quick Setup

Copy the example workflow to your project:

yaml

# .github/workflows/uimax-ci.ymlname: UIMax Reviewon:  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

# .github/workflows/uimax-ci.ymlname: UIMax Reviewon:  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 Inputs

Input	Description	Required	Default
`url`	URL to audit	Yes	—
`github-token`	Token for PR comments	No	`GITHUB_TOKEN`
`budget-performance`	Min performance score (0-100)	No	—
`budget-accessibility`	Min accessibility score (0-100)	No	—
`budget-seo`	Min SEO score (0-100)	No	—
`max-violations`	Max allowed a11y violations	No	—
`fail-on-regression`	Fail if grades regress	No	`false`

Action Outputs

Output	Description
`accessibility-grade`	Letter grade (A+ through F)
`performance-grade`	Letter grade
`seo-grade`	Letter grade
`total-violations`	Accessibility violation count
`passed`	Whether all budgets passed (`true`/`false`)
`report`	Full markdown report

The action updates existing UIMax comments on re-push (no duplicate comments).

See examples/uimax-ci.yml for a complete working example.

Development

bash

# Clonegit clone https://github.com/prembobby39-gif/uimax-mcp.gitcd uimax-mcp
# Installnpm install
# Buildnpm run build
# Run testsnpm test
# Run tests with coveragenpm run test:coverage
# Test locally with Claude Codeclaude mcp add uimax-dev -- node /path/to/uimax-mcp/dist/index.js

# Clonegit clone https://github.com/prembobby39-gif/uimax-mcp.gitcd uimax-mcp
# Installnpm install
# Buildnpm run build
# Run testsnpm test
# Run tests with coveragenpm run test:coverage
# Test locally with Claude Codeclaude mcp add uimax-dev -- node /path/to/uimax-mcp/dist/index.js

Contributing

Contributions welcome! Some ideas:

License

MIT

來源：README.md，提交 66a3819

工具

SourceWeft 尚未在沙箱中啟動過該軟體包，因此其工具未知。

版本歷史

v0.7.0最新Sep 16, 2026

評分

已滿足適用檢查項的 50%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

近 30 天內可連通25 分
請保持端點能夠回應 MCP 握手；SourceWeft 每 30 天探測一次。
已宣告認證方式10 分
請在註冊中心條目中宣告憑證請求標頭，或保持端點能夠回應探測，以便判定其認證方式。
已列出工具15 分
請讓伺服器在無憑證時回應 tools/list，或發布可在沙箱中無憑證啟動的軟體包。
描述必需15 分
圖示10 分
文件15 分
授權條款10 分