Uimax MCP

UIMax MCP

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

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

1. Sees your app — captures a real screenshot via Puppeteer
2. Audits accessibility — runs axe-core for WCAG 2.1 violations
3. Runs Lighthouse — real Google Lighthouse scores (Performance, Accessibility, Best Practices, SEO)
4. Measures performance — captures Core Web Vitals (FCP, LCP, CLS, TBT)
5. Audits SEO — 18 checks: meta tags, Open Graph, Twitter cards, structured data, heading hierarchy, canonical URLs
6. Scans your code — AST-based analysis for 25+ anti-patterns across accessibility, design, and code quality
7. Grades everything — per-section Report Card with letter grades (A+ through F) for Accessibility, Performance, Best Practices, SEO, and Code Quality
8. Generates an expert review — Claude acts as a senior frontend engineer with a baked-in review methodology
9. Implements the fixes — edits your actual code files, starting from critical issues down
10. 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.

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

---

Quick Start

Install as MCP Server (for Claude Code)

# Add to Claude Code — that's it, no API keys needed

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

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

Install Globally

npm install -g uimax-mcp

---

Tools (37)

Review Pipeline

Screenshots & Visual

Lighthouse, Performance & SEO

Code Analysis

Browser Interaction

Debugging

Multi-Page

Baselines & Budgets

Review History

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

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.

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:

{

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