responsive-testing-automation
OfficialAutomated responsive testing across all devices.
Software Engineering#automation#nextjs#playwright#ui-testing#visual-regression#responsive-testing#device-presets
AuthorJKKN-Institutions
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Manually testing webpages across multiple device sizes is time-consuming and error-prone; this skill automates discovering all pages in a Next.js app, runs tests across mobile, tablet, and desktop presets, and reports layout issues with visual evidence.
Core Features & Use Cases
- Automatically discovers all pages in a Next.js app and tests them across predefined device presets
- Detects common responsive issues (horizontal overflow, elements outside viewport, tiny text, overlapping elements) and captures full-page screenshots
- Generates an interactive HTML report with filtering and per-device comparison for quick validation
- Suitable for CI/CD workflows and local development to validate responsive design across pages
Quick Start
Install dependencies, start the Next.js dev server, and run the automated test script to generate the responsive testing report.
Dependency Matrix
Required Modules
playwright
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: responsive-testing-automation Download link: https://github.com/JKKN-Institutions/rr_builders_roja/archive/main.zip#responsive-testing-automation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.