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.

主要功能

01Multi-breakpoint testing for mobile, tablet, and desktop viewports

021 GitHub stars

03Detection of horizontal scroll violations and layout shifts

04Integration with Docker container IPs for local environment testing

05Automated full-page scrolling with sequential screenshot capture

06Touch target size and spacing verification for mobile accessibility

使用场景

01Verifying UI layouts after major frontend feature implementations

02Pre-deployment QA audits to ensure WCAG-aligned touch accessibility

03Automated regression testing for mobile-specific layout bugs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add usmanali4073/stylemate-plugins mobile-responsive-testing

For use in Claude.ai and ChatGPT

Download Skill