Cursor Skill

responsive-testing

Open the app in Cursor's browser at multiple viewport sizes, screenshot each, and report any layout breakage.

LLM Mart · 0 points · 28 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download spencerpauly-awesome-cursor-skills-resources_responsive-testing-99cd265.zip · 1 KB

spencerpauly/awesome-cursor-skills 790 140 forks CC0-1.0 Updated 53d ago

Part of spencerpauly/awesome-cursor-skills — 65 skills

Install

skills CLI npx skills add https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/responsive-testing

Claude Code

claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install spencerpauly-awesome-cursor-skills@llmmart

Git git clone https://github.com/spencerpauly/awesome-cursor-skills.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole spencerpauly/awesome-cursor-skills collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

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:

Resize the viewport using browser_navigate with viewport parameters, or use browser_snapshot to inspect the layout
Take a screenshot with browser_take_screenshot
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.

Files (awesome-cursor-skills)

SKILL.md 2 KB

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