responsive-design-tester

Audit web pages across six viewports for responsive design issues.

1|Updated Jan 9, 2026

Search Tags:#design #testing #accessibility #audit #playwright #responsive #viewports

Ready to run

npx skills add https://github.com/anouar1991/binaryPetsClaude --skill responsive-design-tester

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-design-tester
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/responsive-design-tester
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill responsive-design-tester

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates a full responsive design audit across six viewports to surface layout issues, overflow, touch target compliance, and image responsiveness, then compiles per-viewport diagnostics and a visual record.

Core Features & Use Cases

Viewport coverage: tests mobile S/M/L, tablet, desktop, and ultrawide sizes to reveal cross-device rendering gaps.
Quality checks: validates viewport meta, detects horizontal overflow, checks touch targets, font readability, image srcset usage, and responsive image markup.
Use Case: before shipping a new page, run this skill to generate a side-by-side viewport issue report and screenshots for design QA and developer handoff.

Quick Start

Run the responsive-design-tester against a target page to generate a multi-viewport audit with screenshots and a consolidated report.

Frequently Asked Questions about responsive-design-tester

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

FAQPage Schema

How do I audit responsive design issues across multiple devices automatically?▼

You can automate a responsive design audit by rendering pages across six viewport sizes using Playwright, which surfaces horizontal overflow, touch target compliance, and image responsiveness issues into a consolidated report.

What responsive design problems should I check for before launching a web page?▼

Before launching, check for horizontal overflow, touch target compliance, font readability, viewport meta validation, and responsive image markup across mobile, tablet, desktop, and ultrawide breakpoints.

Can I use Playwright to test mobile and desktop viewports for accessibility?▼

Yes, Playwright can render six viewport sizes from mobile to ultrawide to evaluate accessibility metrics like touch target sizes, font readability, and viewport meta compliance across different breakpoints.

Does automated responsive testing detect horizontal overflow and touch target issues?▼

Automated responsive testing detects horizontal overflow and touch target issues by evaluating common responsive metrics across six viewport sizes, generating per-viewport diagnostics and visual screenshots for design QA.

What is the best way to generate a viewport comparison report for design QA?▼

The best way to generate a viewport comparison report is to run an automated Playwright audit that renders six viewport sizes and compiles side-by-side diagnostics, screenshots, and a consolidated comparison table for developer handoff.

When should I not rely on automated viewport testing for layout issues?▼

You should not rely solely on automated viewport testing when diagnosing subjective visual regressions or complex interactive layout shifts, as it primarily surfaces quantifiable metrics like overflow, touch target sizes, and font readability rather than aesthetic design flaws.