responsive-testing

Checks if your app looks right on phones, tablets, and computers by testing different screen sizes.

Installation

Run `npx skills add "https://github.com/spencerpauly/awesome-cursor-skills" --skill "responsive-testing"` to install this skill, then follow its SKILL.md instructions for my next request.

Paste this into Claude Code, Cursor, or any agent that can run commands.

SKILL.mdShow the author's original SKILL.md

---
name: responsive-testing
description: Open the app in Cursor's browser at multiple viewport sizes, screenshot each, and report any layout breakage.
user-invocable: true
---

# Responsive Testing

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

## Viewports to Test

| Name | Width | Tailwind |
|------|-------|----------|
| Mobile (small) | 375px | default |
| Mobile (large) | 428px | default |
| Tablet | 768px | `md:` |
| Desktop | 1280px | `xl:` |
| Ultrawide | 1536px | `2xl:` |

## 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.

Mirrored from the author's public source. Install counts from the open skills registry.