Mobile Review MCP

Front-end QA on mobile is the thing everyone says matters but nobody actually does consistently. Opening an emulator, resizing to different viewports, checking each page for overflow or tap target issues — it always gets deferred. I wanted to make mobile review as easy as running a lint check: something you could wire into a workflow and actually run.

The solution is a Claude Code MCP server — a set of 13 tools that Claude Code can call to drive iOS and Android emulators directly. The server handles device emulation setup, URL navigation, page snapshots via accessibility trees, user interaction simulation (clicking, typing, scrolling), and screenshot capture with base64 encoding. I chose accessibility trees over raw screenshots to keep Claude's context usage manageable; trees encode the semantic structure of a page much more efficiently than pixel data. Chrome for Testing is downloaded automatically on first run — no manual setup beyond Node.js 18+.

The hardest design problem was making the output useful rather than verbose. Early versions produced descriptions like "some text might be too small on mobile" — accurate, technically, but not actionable. The fix was to force classification. I defined eight issue categories (layout, overflow, text, tap-target, navigation, accessibility, performance, visual) and four severity levels (critical, high, medium, informational). Every reported issue must be tagged with both. That structure forces the model to be specific, which makes the report output something a developer can actually prioritize and work through.

Reports are saved as timestamped JSON and Markdown files, so you can track testing history and compare results across iterations. Once you configure the MCP server in Claude Code, running a full mobile review against a URL is a single prompt.