How does it verify mobile accessibility?

It programmatically checks if interactive elements meet the 44x44px minimum touch target size and identifies elements that cause horizontal scrolling.

What are the required tools for this skill?

This skill requires the Playwright MCP tools to be configured, allowing Claude to navigate, resize, and inspect web elements programmatically.

Can I use this for local development in Docker?

Yes, it includes specialized instructions for testing against Docker containers using internal IP addresses to ensure the browser can reach your local dev server.

What breakpoints does this skill test?

It tests all standard sizes including mobile portrait/landscape, tablet, and small/large desktop viewports ranging from 375px to 1920px.

Does it support full-page screenshots?

Yes, it intelligently scrolls through the entire page height at each breakpoint to capture a complete visual record of the UI.

Mobile Responsive Testing

Name: Mobile Responsive Testing
Author: usmanali4073

byusmanali4073

•

セキュリティとテスト

Automates comprehensive UI responsiveness checks across multiple device breakpoints and touch interaction standards.

概要

The Mobile Responsive Testing skill empowers Claude to perform exhaustive QA on web interfaces by simulating diverse device viewports, from mobile portraits to large desktops. It automatically captures full-page screenshots through programmatic scrolling, detects horizontal overflow issues, and validates mobile accessibility standards like touch target sizes. Ideal for developers and QA engineers, it provides a structured workflow to ensure pixel-perfect layouts and smooth user experiences across all screen sizes before deployment, specifically optimized for integration with Playwright MCP tools.

主な機能

Multi-breakpoint testing for mobile, tablet, and desktop viewports
1 GitHub stars
Detection of horizontal scroll violations and layout shifts
Integration with Docker container IPs for local environment testing
Automated full-page scrolling with sequential screenshot capture
Touch target size and spacing verification for mobile accessibility

ユースケース

Verifying UI layouts after major frontend feature implementations
Pre-deployment QA audits to ensure WCAG-aligned touch accessibility
Automated regression testing for mobile-specific layout bugs

概要

主な機能

Multi-breakpoint testing for mobile, tablet, and desktop viewports
1 GitHub stars
Detection of horizontal scroll violations and layout shifts
Integration with Docker container IPs for local environment testing
Automated full-page scrolling with sequential screenshot capture
Touch target size and spacing verification for mobile accessibility

ユースケース

Verifying UI layouts after major frontend feature implementations
Pre-deployment QA audits to ensure WCAG-aligned touch accessibility
Automated regression testing for mobile-specific layout bugs