# uimax-mcp [Health: Active]

**Category:** 📂 Browser Automation  
**Repository:** https://github.com/prembobby39-gif/uimax-mcp  
**GitHub Stars:** 10  
**npm Downloads (last month):** 268  
**Views:** 1  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/uimax-mcp

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

## Tools
Capabilities this server exposes over MCP:

- **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.
- **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_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.
- **analyze_code** — AST-based analysis (TypeScript compiler API) for 25+ rules. Zero false positives on string literals. Falls back to regex for non-JS files. Configurable via `.uimaxrc.json`.
- **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.
- **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.
- **crawl_and_review** — Discover internal links from a URL and audit up to 10 pages — screenshot + axe-core + performance each.
- **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.
- **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.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "uimax-mcp": {
    "command": "npx",
    "args": ["-y","uimax-mcp"]
  }
}
```

## Documentation

## What uimax-mcp does

The uimax-mcp MCP server connects an MCP client to a browser-driven frontend review workflow. Its main pipeline, `review_ui`, combines a page screenshot with Lighthouse scores, axe-core findings, Core Web Vitals, SEO checks, source-code analysis, letter grades, and a review methodology. Results are stored in project review history so later runs can show changes.

The server can also review a narrower concern. `quick_review` focuses on visual design, while `lighthouse_audit`, `seo_audit`, `accessibility_audit`, `performance_audit`, `security_audit`, and `pwa_audit` target specific areas.

## How it works

A request supplies a reachable URL and, where relevant, a source-code path. Browser automation uses Puppeteer to navigate, wait for network idle, capture images, inspect elements, and perform actions such as clicking, typing, selecting options, and scrolling. Diagnostic tools collect console messages, network requests, JavaScript exceptions, unhandled rejections, and failed resource loads.

Visual checks include responsive captures at 375px, 768px, and 1440px, light-versus-dark comparisons, pixel-level diffs, and before/after semantic comparisons. Performance checks cover metrics such as FCP, LCP, CLS, TBT, DOM node count, and JavaScript heap size. Code analysis uses the TypeScript compiler API for JavaScript and TypeScript rules, with a regex fallback for non-JavaScript files.

The uimax-mcp MCP server can compare a new audit with a prior review or saved baseline. `verify_fixes` reports grade transitions, resolved issues, and an improved, regressed, or mixed result. Baseline and history tools support score trends, recurring issues, problematic files, and review-to-review differences.

## Setup and configuration

Add the server to Claude Code with:

```bash
claude mcp add uimax -- npx -y uimax-mcp
```

```bash
npm install -g uimax-mcp
```

The target application must be reachable from the machine running the browser. Source analysis can be configured with a `.uimaxrc.json` file; the same file can define performance budgets used by `check_budgets`. Review records are written to `.uimax-reviews.json`, while baseline data uses `.uimax-history.json`.

## Tools and capabilities

- Run complete reviews, quick design reviews, fix verification, side-by-side site comparisons, and embedded HTML report exports.
- Capture high-resolution, responsive, dark-mode, pixel-diff, and semantic-comparison screenshots.
- Inspect Lighthouse categories, 18 documented SEO signals, WCAG 2.1 Level A and AA issues, PWA readiness, security conditions, unused assets, LCP details, and resource usage.
- Analyze code for more than 25 documented rules and report exact byte savings for unused JavaScript and CSS.
- Navigate pages and interact with controls using selectors, typed text, dropdown values, scrolling, and element waits.
- Save baselines, enforce configured budgets, inspect review history and statistics, and compare individual reviews.

## Limitations and notes

`quick_review` intentionally omits code analysis and performance auditing. Code analysis has different behavior for JavaScript files and other file types because non-JavaScript files use a regex fallback.

The uimax-mcp MCP server reports audit data and review methodology, but the documented fix workflow relies on Claude Code applying changes to the project. Audit scores, visual diffs, and grade transitions should therefore be interpreted as measurements of the current page and configuration, not as proof that every issue has been corrected.

_Full upstream README: https://allmcps.com/mcp/uimax-mcp/readme_