UIMax MCP

by prembobby39-gif

7 188 downloads Not rated yet MIT

About

UIMax MCP — Turns Claude Code into a frontend expert that reviews and fixes your UI automatically. Free for Pro plan users.

Details

License
MIT

Explore

- Full automated UI review pipeline (10 steps)
- AST-based code analysis with 25+ anti-pattern rules
- Per-section Report Card with letter grades (A+ through F)
- Auto-saves review history to .uimax-reviews.json
- Competitive benchmarking using compare_sites
- Performance budgets enforcement via .uimaxrc.json

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

---


bash npm install -g uimax-mcp

---

Copy the example workflow to your project:

yaml

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

<p align="center">
npm version
npm downloads
license
37 tools
463 tests passing
free for Pro plan-brightgreen)
</p>

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)

```bash

No reviews yet — be the first

Sign in to leave a review

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.