UIMax MCP

What is UIMax MCP?

UIMax MCP is a Model Context Protocol server that turns Claude Code into a frontend expert. It automatically reviews and fixes web UI by capturing screenshots, running accessibility audits (axe-core), Google Lighthouse, Core Web Vitals, SEO checks, AST-based code analysis, and generating letter-grade Report Cards — then implementing the fixes directly in your code.

How to use UIMax MCP?

Install in one command: claude mcp add uimax -- npx -y uimax-mcp. Then in any Claude Code conversation, say “Review the UI at http://localhost:3000, source code is in ./src” and UIMax runs the full pipeline automatically. You can also install globally with npm install -g uimax-mcp.

Key features of UIMax MCP

• 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

Use cases of UIMax MCP

• Automatically identify and fix accessibility violations (WCAG 2.1)
• Optimize frontend performance with Lighthouse and Core Web Vitals
• Enforce SEO best practices across staging, production, and localhost
• Compare before/after screenshots and scores after applying fixes
• Benchmark your site against competitors side-by-side

FAQ from UIMax MCP

Is UIMax MCP free?

Yes, it is free for all Claude Code users on the Pro plan and above. No API keys and no extra costs.

What does UIMax MCP work on?

It works on any URL your machine can reach — localhost, staging, or production. It captures real screenshots via Puppeteer.

How does UIMax MCP save reviews?

Every review is automatically saved to .uimax-reviews.json in your project root. You can view history with get_review_history and track trends with get_review_stats.

What tools does UIMax MCP provide?

It provides 37 tools organized into categories: Review Pipeline, Screenshots & Visual, Lighthouse/Performance/SEO, Code Analysis, Browser Interaction, Debugging, Multi-Page, Baselines & Budgets, and Review History.

How can I configure code analysis and budgets?

Create a .uimaxrc.json file in your project root. You can set rules to "off", "warn", or "error", override severity, ignore patterns, and define performance budgets for Lighthouse scores and Web Vitals.