mcpField
R
responsive-testing

responsive-testing

github.com/revitalb-portTesting & quality055 installsUpdated 10w ago
Repository

About responsive-testing

A skill for checking UI layouts across five standard viewport widths after changes. It guides browser-based inspection, screenshots, common responsive issue checks, and reporting for frontend developers.

Key features

  1. 01Test five viewport widths
  2. 02Navigate and resize browser
  3. 03Capture screenshots and inspect aria tree
  4. 04Check overflow, scaling, and layout issues
  5. 05Report results and re-test fixes

Use cases

  1. 01Validate a page after a UI change
  2. 02Find mobile navigation or touch-target problems
  3. 03Check image and modal behavior on small screens

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/revitalb-port/skills-registry-demo --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