skills.rest
parisgroup-ai
parisgroup-aiOFFICIAL
Explore all skills by this author →
GitHub

qa-mobile

Detect responsive layout and mobile UX regressions across browser viewports with Playwright MCP.

1|2|Updated Apr 6, 2026
Search Tags:#automation#accessibility#playwright#responsive#visual-testing#viewport#mobile-qa
One-click install
npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill qa-mobile-parisgroup-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-mobile
Source: https://github.com/parisgroup-ai/imersao-ia-setup/tree/main/skills/qa-mobile
Command: npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill qa-mobile-parisgroup-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It streamlines systematic responsive QA by detecting layout regressions, touch-target issues, and visual inconsistencies across common mobile and tablet viewports so teams can find and fix mobile UX defects before release.

Core Features & Use Cases

  • Viewport coverage: Standardized checks for iPhone SE, iPhone 14 Pro Max, iPad Mini, iPad Pro, and desktop widths.
  • Visual and structural validation: Capture pixel-accurate screenshots, accessibility snapshots, and run JS checks for horizontal overflow and touch target sizing using Playwright MCP.
  • Project memory: Read and update a project-scoped qa-mobile.md file to track past runs, recurring issues, and prioritization.
  • Use case: Run a pre-release sweep of marketing and landing pages to catch responsive regressions introduced by a recent CSS refactor.

Quick Start

Run a responsive QA pass on https://your-site.example using Playwright MCP across the listed viewports and update the project's qa-mobile.md memory file with findings.

Frequently Asked Questions about qa-mobile

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I catch mobile layout regressions across different browser viewports?▼

To catch mobile layout regressions, run a responsive QA pass that resizes the browser to standard viewports like iPhone SE and iPad Pro, capturing screenshots and accessibility snapshots to detect visual inconsistencies.

How do I automate touch target sizing checks for responsive web pages?▼

Automate touch target sizing checks using Playwright MCP, which runs JS checks during viewport resizing to validate that interactive elements meet mobile UX standards and identifies touch target issues across different screen widths.

Can I use Playwright MCP to detect horizontal overflow on mobile viewports?▼

Yes, you can use Playwright MCP to detect horizontal overflow by running JS checks during viewport resizing, which identifies layout issues where content extends beyond the defined mobile or tablet browser widths.

Does this responsive QA workflow support iPad and iPhone viewport sizes?▼

Yes, the responsive QA workflow supports iPad and iPhone viewport sizes, including standardized checks for iPhone SE, iPhone 14 Pro Max, iPad Mini, and iPad Pro, alongside standard desktop widths for comprehensive coverage.

What is the best way to track recurring mobile UX issues across QA runs?▼

The best way to track recurring mobile UX issues is by updating a project-scoped memory file, which records past responsive QA runs, recurring layout regressions, and prioritization details to maintain historical context across the team.

How do I run a pre-release visual testing sweep for a CSS refactor?▼

Run a pre-release visual testing sweep by executing viewport resizing and accessibility snapshots across marketing pages and component libraries, validating that recent CSS refactors have not introduced responsive layout regressions or visual inconsistencies.

Related Skills

Explore More Software Engineering Skills→
bikeindexbikeindex
308

frontend-screenshots

Capture desktop and mobile viewport screenshots of Bike Index pages with Playwright.

Official
Intermediate
studyzystudyzy

qa-only

Generate structured QA reports with health scores, screenshots, and repro steps.

Community
Advanced
lucidlabs-hqlucidlabs-hq
2

visual-verify

Capture interactive states and visual snapshots of a running frontend with agent-browser.

Official
Advanced
spencerpaulyspencerpauly
672

responsive-testing

Verify responsive layouts across mobile, tablet, desktop, and ultrawide viewports.

Community
Intermediate