Verwendung
- Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
- Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
- Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill responsive-testingVor dem Start
- Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
- Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
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_navigatewith viewport parameters, or usebrowser_snapshotto inspect the layout - Take a screenshot with
browser_take_screenshot - Check
browser_snapshotfor 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 wideFix any issues found, then re-test the affected viewports.
