THE PRIMARY TOOL — Fully automated UI review pipeline. Captures a screenshot, runs accessibility/performance/code audits, then returns ALL data along with an expert frontend review methodology so you can generate a comprehensive review and implement fixes.

Use this when the user asks to "review my UI", "audit my frontend", or "find UI issues". After receiving the results, you MUST:

1. Study the screenshot carefully for visual/UX issues

2. Analyze the audit data following the expert methodology provided

3. Generate a comprehensive review with SPECIFIC fixes (exact CSS values, code changes)

4. Implement the fixes directly in the codebase

This tool is FREE — it runs entirely within Claude Code using the user's existing plan. No API keys needed.

Generate a standalone HTML report file with all audit findings embedded. Runs the full review pipeline (screenshot, accessibility, performance, code analysis) and outputs a beautiful, shareable HTML file with zero external dependencies.

Use this when the user wants a downloadable/shareable report of their UI review.

This tool is FREE — runs entirely within Claude Code.

Quick design-only review. Captures a screenshot and returns it with a focused design review methodology. No code analysis, no performance audit — just visual/UX feedback. Great for rapid design iteration.

After receiving the screenshot, analyze it as a senior UI designer and provide 5-10 high-impact observations with specific fixes.

This tool is FREE — runs entirely within Claude Code.

Capture a screenshot of a webpage. Returns a PNG image that you can visually analyze for design issues, layout problems, and UI quality.

Capture screenshots at mobile (375px), tablet (768px), and desktop (1440px) viewports. Perfect for reviewing responsive design.

Detect whether a webpage supports dark mode. Captures two screenshots — one in light mode and one with prefers-color-scheme: dark emulated — then compares them. Returns both screenshots and a difference percentage. Great for checking if dark mode is properly implemented.

Before/after visual comparison with pixel-level diffing. Captures screenshots of two URLs at the same viewport size, computes an accurate pixel-level difference using pixelmatch, and returns BOTH images plus a red-highlighted diff image showing exactly which pixels changed. Use this to verify UI changes, compare staging vs production, or check before/after states of a redesign.

AI-powered visual comparison. Captures before/after screenshots and provides a structured methodology for Claude to semantically evaluate whether UI changes match the intended design request. Goes beyond pixel diffing to understand intent.

Returns both screenshots as images, a pixel-level diff image, the difference percentage, and a detailed semantic methodology prompt. Claude's vision analyzes the screenshots to determine if the changes match what was requested, checking for regressions and unintended side effects.

This tool is FREE — it runs entirely within Claude Code using the user's existing plan. No API keys needed.

Run an automated accessibility audit using axe-core. Checks for WCAG 2.1 Level A and AA violations, reporting issues by severity with specific fix instructions.

Measure Core Web Vitals and performance metrics: FCP, LCP, CLS, TBT, load time, resource count, DOM size, and JS heap usage.

Run a full Lighthouse audit against a URL. Returns scores for Performance, Accessibility, Best Practices, and SEO (0-100), plus detailed audit findings for render-blocking resources, image optimization, unused code, and more. Heavier than performance_audit but provides industry-standard Lighthouse scores.

Run a comprehensive SEO audit. Checks 18 SEO signals including meta tags, heading hierarchy, Open Graph tags, Twitter cards, structured data (JSON-LD), canonical URLs, image alt text, and more. Returns a 0-100 score and specific recommendations for each failing check.

Use this when the user wants to check their page's SEO health, improve search engine visibility, or ensure proper social sharing metadata.

This tool is FREE — runs entirely within Claude Code.

Check Progressive Web App readiness: installable manifest, service worker, HTTPS, offline capability, and more. Runs a full Lighthouse audit under the hood and extracts all PWA-related audit results with pass/fail for each requirement.

Check security posture via Lighthouse: HTTPS usage, mixed content, CSP headers, vulnerable JavaScript libraries, external links without noopener, and more. Returns pass/fail findings with severity levels.

Find unused JavaScript and CSS on a page. Runs Lighthouse and extracts the unused-javascript and unused-css-rules audits, showing each resource with total bytes, unused bytes, and potential savings. Great for reducing bundle size.

Deep Largest Contentful Paint (LCP) analysis. Identifies the LCP element, measures TTFB, resource load time, and render delay. Provides specific optimization suggestions to improve LCP below the 2.5s threshold.

Full resource breakdown of a page: total transfer size, breakdown by type (JS, CSS, images, fonts), number of requests, top 10 largest resources, and render-blocking resources. Helps identify what is making your page heavy.

Analyze frontend source code for quality issues: accessibility anti-patterns, CSS problems, component complexity, design inconsistencies, and performance concerns.

Crawl multiple pages from a starting URL and run accessibility + performance audits on each. Discovers internal links from the start page, deduplicates them, and visits up to maxPages (default 5, max 10). Each page gets a screenshot, axe-core accessibility audit, and Performance API metrics. Does NOT run Lighthouse (too slow for multi-page). Use this to audit an entire site section quickly.

This tool is FREE — runs entirely within Claude Code.

Save the current audit state for a URL as a baseline snapshot. Runs screenshot, accessibility, performance, and Lighthouse audits, then saves the results to .uimax-history.json in the project directory. Use this to establish a baseline before making changes, so you can compare later.

This tool is FREE — runs entirely within Claude Code.

Compare the current audit state of a URL against its most recent saved baseline. Runs fresh audits, loads the previous baseline from .uimax-history.json, and shows what improved and what regressed. Use this after making changes to verify you improved the metrics you intended.

This tool is FREE — runs entirely within Claude Code.

Check if the current site meets performance budgets defined in .uimaxrc.json. Runs fresh audits and compares results against budget thresholds for Lighthouse scores, Web Vitals, accessibility violations, and code issues. Returns pass/fail with details of any exceeded budgets.

Configure budgets in .uimaxrc.json under the "budgets" key: { "budgets": { "lighthouse": { "performance": 90, "accessibility": 95 }, "webVitals": { "lcp": 2500, "cls": 0.1 }, "maxAccessibilityViolations": 0 } }

This tool is FREE — runs entirely within Claude Code.

Capture all console messages (log, warn, error, info, debug) during page load. Navigates to the URL, listens for console output and uncaught exceptions, then returns structured results with message counts by level. Useful for debugging runtime issues, detecting warnings, and finding errors that only appear in the browser console.

Note: Console messages may contain sensitive data (tokens, user info, etc.) — the output is returned unfiltered.

This tool is FREE — runs entirely within Claude Code.

Capture all network requests during page load with status codes, sizes, timing, and resource types. Provides a summary with total requests, failed requests, total transfer size, and breakdown by resource type. Useful for finding failed API calls, slow requests, large assets, and understanding page load behavior.

This tool is FREE — runs entirely within Claude Code.

Capture JavaScript errors, uncaught exceptions, unhandled promise rejections, and failed resource loads (images, scripts, stylesheets, fonts) during page load. Returns structured error list with error kind, message, and source location. Useful for finding runtime JS errors and broken resources that affect user experience.

This tool is FREE — runs entirely within Claude Code.

Navigate to a URL and return page info. Waits for network idle before returning. Returns the final URL, page title, HTTP status code, and a screenshot so you can visually verify the page loaded correctly.

Use this when you need to open a page before performing interactions, or to verify a page loads successfully.

Click an element by CSS selector. Returns a screenshot after the click so you can visually verify the result. Supports standard CSS selectors. If the page hasn't been navigated yet, provide a URL to navigate first.

Type text into an input field or textarea by CSS selector. Returns a screenshot after typing so you can visually verify the result. Options to clear existing text first and press Enter after typing.

Select an option from a dropdown () element by value. Returns a screenshot after selection so you can visually verify the result.

Scroll the page by a pixel amount or to a specific element. Returns a screenshot after scrolling so you can visually verify the new viewport position.

Wait for an element to appear in the DOM. Returns the element's tag name and text content when found. Use this to wait for dynamic content to load before interacting with it.

Get detailed information about a DOM element: tag name, text content, all attributes, bounding box, and computed styles (color, font, background, display, visibility). Returns a screenshot so you can visually identify the element in context.

View past UIMax reviews for this project. Shows when reviews were run, what scores were achieved, and how many issues were found. Use this to understand the project's frontend health over time.

This tool is FREE — runs entirely within Claude Code.

Get aggregate statistics across all UIMax reviews for this project. Shows total reviews, score trends, most common issues, and most problematic files.

This tool is FREE — runs entirely within Claude Code.

Compare two specific reviews to see what changed. Shows new issues, resolved issues, and score changes.

This tool is FREE — runs entirely within Claude Code.

Re-run the full audit pipeline after fixes are applied and compare against the original review. Shows a before/after Report Card with grade transitions, resolved issues count, and remaining issues. Closes the review-fix-verify loop.

Use this AFTER implementing fixes from a review_ui run. Pass the same URL and code directory. The tool re-audits everything and shows what improved.

This tool is FREE — runs entirely within Claude Code.

Competitive benchmarking: audit two URLs side-by-side and produce a comparison Report Card. Runs accessibility (axe-core), performance (Core Web Vitals), and SEO audits on both sites concurrently. Returns screenshots of both sites plus a grade comparison table showing which site wins in each category.

Use this when the user wants to benchmark their site against a competitor, compare staging vs production, or evaluate two different sites.

This tool is FREE — runs entirely within Claude Code.