responsive-tester

Validate responsive design across mobile, tablet, and desktop viewports with Playwright.

Updated Dec 20, 2023
One-click install
npx skills add https://github.com/Hakiick/ChessGame --skill responsive-tester-hakiick
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: responsive-tester
Source: https://github.com/Hakiick/ChessGame/tree/main/.claude/skills/responsive-tester
Command: npx skills add https://github.com/Hakiick/ChessGame --skill responsive-tester-hakiick

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures your web application looks and functions perfectly across a wide range of devices and screen sizes, preventing usability issues and maintaining a consistent user experience.

Core Features & Use Cases

  • Multi-Viewport Testing: Validates layouts and functionality on predefined mobile, tablet, and desktop viewports.
  • Accessibility Checks: Verifies WCAG AA contrast ratios, ARIA attributes, and keyboard navigation.
  • Performance Audits: Assesses metrics like Cumulative Layout Shift (CLS) and image loading.
  • Use Case: After deploying a new feature, use this Skill to automatically test its responsiveness on an iPhone, an iPad, and a desktop browser, ensuring no visual regressions or broken interactions.

Quick Start

Use the responsive-tester skill to test the responsiveness of the homepage across mobile, tablet, and desktop viewports.

Frequently Asked Questions about responsive-tester

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

FAQPage Schema
How do I test responsive design across multiple device viewports?

Playwright enables responsive design testing across multiple device viewports by automating browsers to validate predefined mobile, tablet, and desktop screen resolutions for layout and interaction regressions.

Can I automate WCAG AA accessibility checks during cross-device testing?

You can automate WCAG AA accessibility checks during cross-device testing to verify contrast ratios, validate ARIA attributes, and ensure functional keyboard navigation across web application viewports.

How do I measure Cumulative Layout Shift and web performance with Playwright?

You can measure Cumulative Layout Shift and web performance with Playwright by executing Lighthouse performance audits that assess CLS metrics and image loading behavior to catch visual regressions.

Do I need Playwright to verify mobile navigation patterns and touch events?

You need Playwright installed to verify mobile navigation patterns and touch events, as it provides the required automated browser testing framework to execute cross-device compatibility checks.

What is the best way to prevent visual regressions on mobile and tablet screens?

The best way to prevent visual regressions on mobile and tablet screens is running automated multi-viewport testing that validates layout integrity, touch events, and accessibility after deploying new features.

Does cross-device testing work for checking keyboard navigation and ARIA attributes?

Cross-device testing works for checking keyboard navigation and ARIA attributes by running automated accessibility audits that verify WCAG AA compliance across defined screen resolutions and viewports.