mcpField
R
responsive-testing

responsive-testing

github.com/spencerpaulyTesting & quality868572 installsUpdated 12w ago
Repository

About responsive-testing

A testing skill for checking responsive layouts after UI changes across multiple viewport sizes. It suits development workflows that need to verify mobile, tablet, and desktop layouts and record issues.

Key features

  1. 01Cover five standard viewport widths
  2. 02Resize viewports through browser navigation
  3. 03Inspect layouts with screenshots and the accessibility tree
  4. 04Check overflow, hidden content, and touch targets
  5. 05Record results and retest fixes

Use cases

  1. 01Verify UI changes on mobile screens
  2. 02Check tablet and desktop navigation layouts
  3. 03Find horizontal scrolling or obscured content
  4. 04Retest affected viewports after fixes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill responsive-testing

After installing, type/responsive-testingin Claude Code to confirm it loaded.

Details

From the project README

Responsive Testing

After a UI change, verify the app looks correct at all standard breakpoints.

Viewports to Test

NameWidthTailwind
Mobile (small)375pxdefault
Mobile (large)428pxdefault
Tablet768pxmd:
Desktop1280pxxl:
Ultrawide1536px2xl:

Workflow

1. Navigate to the Page

Use browser_navigate to open the target URL (usually http://localhost:3000 or whatever the dev server is running on).

2. Test Each Viewport

For each viewport size:

  1. Resize the viewport using browser_navigate with viewport parameters, or use browser_snapshot to inspect the layout
  2. Take a screenshot with browser_take_screenshot
  3. Check browser_snapshot for the aria tree — look for:
    • Content overflowing or hidden behind other elements
    • Navigation that should collapse into a hamburger menu
    • Text that's too small to read
    • Buttons/links too close together (touch target issues)
    • Horizontal scrollbars that shouldn't exist
3. Check for Common Breakage
  • Overflow: Elements wider than the viewport causing horizontal scroll
  • Collapsed layout: Flex/grid items that should stack on mobile but don't
  • Hidden content: Elements that disappear at certain sizes without a menu toggle
  • Font scaling: Text that's readable on desktop but tiny on mobile
  • Fixed positioning: Modals, toasts, or sticky headers that break on small screens
  • Images: Oversized images that don't scale down
4. Report
Responsive Test Results:
  375px (mobile):  PASS — layout stacks correctly
  428px (mobile):  PASS
  768px (tablet):  WARN — nav items overlap, need hamburger menu
  1280px (desktop): PASS
  1536px (ultrawide): WARN — content not centered, stretched too wide

Fix any issues found, then re-test the affected viewports.

Comments

Markdown supported