What viewports does this skill test?

The skill tests across a standardized six-device matrix: Mobile S (320px), Mobile M (375px), Mobile L (425px), Tablet (768px), Desktop (1440px), and Ultrawide (2560px).

What are the requirements to run this skill?

You must have a Playwright MCP server connected with all browser tools available and a Chromium-based browser for full touch emulation support.

Does it check for web accessibility?

Yes, it specifically validates touch target sizes against WCAG 2.5.8 standards (min 48x48px) and checks that body font sizes meet readability standards (min 16px).

How does it handle mobile-specific CSS?

It uses Chrome DevTools Protocol (CDP) to enable touch emulation on mobile viewports, ensuring that touch-specific styles and media queries are correctly activated.

Can it detect layout issues like horizontal scrolling?

Yes, the skill includes a dedicated step to detect horizontal overflow and identifies the specific DOM elements causing the layout break.

Responsive Design Tester

Name: Responsive Design Tester
Author: anouar1991

byanouar1991

•

设计工具

Audits web pages across multiple device viewports to ensure layout integrity, accessibility compliance, and responsive performance.

The Responsive Design Tester is a comprehensive auditing skill for Claude Code that automates the verification of websites across a six-device viewport matrix, ranging from Mobile S to Ultrawide monitors. It systematically evaluates critical frontend factors including CSS media query activation, horizontal overflow detection, WCAG-compliant touch target sizes, font readability, and the implementation of responsive images via srcset and sizes attributes. This skill is essential for developers and QA engineers looking to diagnose layout regressions, verify mobile-first designs, and ensure a seamless, accessible user experience across all screen sizes before deployment.

主要功能

01Responsive image markup and viewport meta tag auditing

02WCAG 2.5.8 compliant touch target validation (minimum 48x48px)

03Font readability analysis and body text size verification

04Six-device viewport matrix testing (Mobile S/M/L, Tablet, Desktop, Ultrawide)

051 GitHub stars

06Automatic horizontal overflow and layout shift detection

使用场景

01Diagnosing specific layout bugs or regressions reported on mobile or tablet devices.

02Pre-shipping verification of new frontend components across all device categories.

03Auditing existing web pages for mobile-friendliness and accessibility compliance.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude responsive-design-tester

For use in Claude.ai and ChatGPT

Download Skill