responsive-testing

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 94fd3401595c · 28 Oct 2026Report an issue or request a re-scan

• Publisherspencerpauly GitHub userOwner of the repository this skill is read from
• Source folderspencerpauly/awesome-cursor-skills/resources/responsive-testingThe exact folder we audited
• LicenceCC0-1.0As the repository states it
• Commit pinned for this verdict94fd3401595cA new audit runs when the source changes
• Repository statusNot archivedLast push 86 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

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

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

Excerpt, first 2,053 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-28
   ✓SAFE B 89 / 100

   first audit · source 94fd3401595c

Questions about responsive-testing

• github.com/spencerpauly/awesome-cursor-skills/tree/main/resource — the audited source at commit 94fd3401595c and every finding aboveObserved · 28 Oct 2026

Spotted something wrong? Report a correction · Methodology