What it does
Renders each page at common mobile viewport widths and checks tap target sizing, horizontal scroll or content overflow, font sizes that fall below comfortable reading minimums, and sticky headers or banners that end up obscuring content. Produces page-specific findings rather than a generic mobile-friendliness score.
Install
This skill isn't packaged in an installable registry. It's a plain SKILL.md file you can copy directly. Copy it from the SKILL.md tab and save it at the path for your assistant:
Use it in your AI assistant
Claude Code
.claude/skills/mobile-ux-reviewer/ (or ~/.claude/skills/mobile-ux-reviewer/ for all projects)
GitHub Copilot (VS Code)
.github/skills/mobile-ux-reviewer/
OpenAI Codex
.codex/skills/mobile-ux-reviewer/
Cursor
.cursor/skills/mobile-ux-reviewer/ (or ~/.cursor/skills/mobile-ux-reviewer/ globally)
Compatibility
Requires the agent to render pages at mobile viewport widths, not just read the editor's desktop markup.
The complete SKILL.md for this skill:
---
name: mobile-ux-reviewer
description: Use when a user wants pages checked for mobile usability before launch, mentions a site feeling broken or cramped on phones, or asks for a mobile review.
---
# Mobile UX Reviewer
## When to use
The user wants key pages checked for real mobile usability problems, ideally before a launch or after a design change, rather than assuming responsive styles handle everything correctly.
## Procedure
1. Render each page in scope at common mobile viewport widths (roughly 360-430px wide).
2. Check tap target sizing on buttons, links, and form controls, flagging anything too small or too close together to tap reliably.
3. Check for horizontal scroll or content overflow, often caused by a fixed-width element, an oversized image, or an unwrapped table.
4. Check body and label font sizes against a comfortable reading minimum, and flag anything that requires zooming to read.
5. Check whether sticky headers, cookie banners, or chat widgets end up covering meaningful content or blocking the ability to dismiss them.
6. Report findings per page with the specific element and viewport width where the problem appears.
## Guardrails
- Don't judge mobile usability from desktop-width markup alone, actually render at mobile widths before reporting a finding.
- Flag layout fixes for human review before applying them, a fix for one page's overflow can affect shared template elements used elsewhere.