Skip to content
UXClaim
UX Design

Mobile UX Fixer

Automated mobile UX audit with 40+ checks, visual inspection, and auto-fix for viewport, animations, Core Web Vitals, and accessibility.

View source More in UX Design

What It Does

Mobile UX Fixer runs comprehensive audits on your web projects to catch and fix mobile-specific UX problems automatically. Using Playwright for visual inspection and 40+ pattern-based checks, it identifies issues across 10 audit phases—from viewport behavior to Core Web Vitals to accessibility.

How It Works

Run mobile audit in Claude Code and the skill:

  1. Captures visual evidence at mobile viewports (320px–412px) using Playwright
  2. Scans your codebase for 40+ known mobile UX patterns
  3. Fixes problems directly by updating your files with explanations
  4. Reports results with file paths, line numbers, and remediation steps

Every check comes from real production bugs discovered across React, GSAP, Lenis, Tailwind, Vue, Svelte, and vanilla projects.

Use Cases

Performance: Detect animations that trigger layout shifts, suboptimal image loading, and Core Web Vitals blockers.

Usability: Verify touch targets, iOS font zoom handling, keyboard interaction, and hamburger menu accessibility.

Quality: Check for scroll-jank, overflow issues, address bar jumps, and dark mode/RTL compatibility.

Who Benefits

Product designers and UX leads who want to catch mobile issues before they reach users. Works framework-agnostic but has specialized checks for React, Next.js, GSAP, Framer Motion, and Lenis.

Frequently asked questions

How do I run a mobile UX audit?
Tell Claude Code 'mobile audit', 'fix mobile', or 'check mobile'. The skill auto-installs Playwright MCP if needed, then scans your codebase and takes screenshots at mobile viewports. You'll get a report with issues and auto-fixes.
What 10 audit phases does it check?
Viewport & Layout, Scroll & Parallax, Animations, Images & Media, Touch & Forms, Typography, Core Web Vitals, SEO & PWA, Accessibility, and RTL & Dark Mode. Each phase has 2–6 specific checks for a total of 40+.
Does it work with my framework?
Yes. Mobile UX Fixer works framework-agnostic on any web project. It has specialized detection for React/Next.js, GSAP ScrollTrigger, Framer Motion, Lenis, Tailwind CSS, Vue, and Svelte.
What is Playwright MCP visual inspection?
Playwright MCP gives Claude Code 'eyes' to take mobile screenshots, scroll through pages, and detect horizontal overflow visually. The skill auto-installs it and uses it to verify animations and landscape behavior.
Can it auto-fix the issues it finds?
Yes. The skill can update your files directly with fixes for layout-triggering animations, suboptimal image loading, accessibility patterns, touch targets, and more. Each fix includes an explanation.
What Core Web Vitals issues does it catch?
It detects LCP blockers (font loading, third-party scripts), CLS from animations and images, INP/TBT from JavaScript, and layout-shift triggers. Checks are specific to mobile performance.
Does it check accessibility?
Yes. It audits hamburger menu keyboard/screen reader behavior, focus management, skip-to-content links, ARIA patterns, touch target sizes (44px minimum), and iOS-specific interaction issues.
How do I install Mobile UX Fixer?
Run `claude skill add --url https://github.com/mediawave-dev/mobile-ux-fixer` in Claude Code. Or manually copy the SKILL.md file to ~/.claude/skills/mobile-ux-fixer/SKILL.md.

Glossary

Core Web Vitals
Three metrics Google uses to measure page experience: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint). Mobile UX Fixer detects issues that harm these scores.
Cumulative Layout Shift (CLS)
A measure of unexpected layout changes on a page. On mobile, animations, images without dimensions, and ad insertions often trigger shifts. Mobile UX Fixer catches animation-triggered CLS.
Playwright MCP
A Model Context Protocol tool that allows Claude Code to automate browser tasks like taking screenshots, scrolling, and testing. Mobile UX Fixer uses it for visual mobile inspection.
Touch Target
An interactive element users tap on mobile. Apple and WCAG recommend minimum 44×44 pixels. Mobile UX Fixer checks form inputs, buttons, and links meet this standard.
RTL & Dark Mode
RTL (Right-to-Left) layout for Arabic and Hebrew. Dark Mode is user-preferred dark color scheme. Mobile UX Fixer checks CSS logical properties and prefers-color-scheme support for both.

More in UX Design

All →
UX Design

Canvas Design

Creates beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, designs, and static pieces.

ComposioHQ
UX Design

Claude Design

AI design workspace for prototyping, design systems, and marketing collateral using Claude's vision model and conversation-to-artifact workflow.

Julpygo
UX Design

Design Thinking Skills

Claude-powered Design Thinking coach guiding teams from user research through shipped solutions with phase-by-phase methods, templates, and facilitation scri...

rastian
UX Design

Eagle Skills

Expert UX audits, product diagnostics, ad review, and AI detection for Claude Code with 65+ UX laws and anti-slop filtering.