agentleFS
Sign inStart free
witi-projectswiti-projects/Skills/responsive-testing/SKILL.md

responsive-testing

Skill2 starsChanged 6 months agoMITView on GitHub

Open the app in Cursor's browser at multiple viewport sizes, screenshot each, and report any layout breakage. Use when the user says "/responsive-testing", "responsive testing", or asks about responsive testing.

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 1 is distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

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

    line 9
  2. Very specific:

    Use browser_navigate to open the target URL (usually http://localhost:3000 or whatever the dev server is running on).

    line 25
  3. Very specific:

    Check browser_snapshot for the aria tree — look for:

    line 33

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free