skills.rest
gwpjp
gwpjpCOMMUNITY
Explore all skills by this author →
GitHub

responsive-tester

Resize app viewports across four breakpoints and generate a findings report.

3|Updated Jan 31, 2026
Search Tags:#screenshots#layout#UI testing#responsive#breakpoints#visual QA
One-click install
npx skills add https://github.com/gwpjp/Web3-Claude --skill responsive-tester
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-tester
Source: https://github.com/gwpjp/Web3-Claude/tree/main/.claude/skills/responsive-tester
Command: npx skills add https://github.com/gwpjp/Web3-Claude --skill responsive-tester

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The responsive-tester helps UI teams quickly identify layout and interaction issues that arise when the app is viewed at different screen sizes, preventing overflow and misalignment.

Core Features & Use Cases

  • Four breakpoint testing (Mobile, Tablet, Desktop, Wide) to verify responsive behavior across devices.
  • Route-based navigation and page inspection to catch overflow, clipped text, broken grids, and touch-target problems.
  • Documentation-driven workflow: produce a findings report detailing issues and suggested fixes.

Quick Start

Ensure the app runs on the port configured in vite.config.ts, then run the responsive-tester workflow to resize the browser across the four breakpoints, navigate routes, capture screenshots, and compile a final report.

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 layout issues across multiple breakpoints?▼

Automated viewport resizing across Mobile, Tablet, Desktop, and Wide breakpoints validates responsive UI behavior. It navigates defined routes to capture screenshots and detect layout issues like clipped text, broken grids, and touch-target problems.

What's the best way to automate visual QA for responsive web apps?▼

Automating visual QA involves running a predefined workflow that resizes the browser across four standard breakpoints and inspects the route map. It captures screenshots and compiles a final report detailing discovered UI issues and suggested fixes.

Does responsive testing work with my Vite configuration?▼

Responsive testing works with Vite by utilizing the port configured in vite.config.ts. You must ensure your application runs on this specified port before executing the automated viewport resizing and page navigation workflow.

Can I inspect specific routes to catch broken grids and touch-target problems?▼

You can inspect specific routes by navigating the page map during viewport resizing. This route-based navigation catches broken grids, overflow, clipped text, and touch-target problems across Mobile, Tablet, Desktop, and Wide screen sizes.

What output does an automated responsive UI test generate?▼

Automated responsive UI tests generate a documentation-driven findings report. This report details identified layout and interaction issues discovered across breakpoints and routes, complete with suggested fixes for your UI team.

Related Skills

Explore More Software Engineering Skills→
pmarashianpmarashian
2

dev-server-port-detection

Detects development server ports from configuration files, running processes, and terminal output.

Community
Intermediate
dogkeeper886dogkeeper886

analyzing-logs

Parse Robot Framework XML and HTML logs to classify failures by type.

Community
Intermediate
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
pacphipacphi
6

compatibility-testing

Validate web applications across browsers, devices, and cloud platforms with Playwright.

Community
Advanced