responsive-testing

Q: How do I install responsive-testing?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill responsive-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/responsive-testing/ (personal) or .claude/skills/responsive-testing/ (project).

by spencerpaulyTesting & QA

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

Installs: 569
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads responsive-testing automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

FAQ

What does the responsive-testing skill do?

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

How do I install responsive-testing?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill responsive-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/responsive-testing/ (personal) or .claude/skills/responsive-testing/ (project).

Which AI agents can use responsive-testing?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is responsive-testing safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains responsive-testing?

It is published by spencerpauly in spencerpauly/awesome-cursor-skills. It has 569 recorded installs.