Cómo usar
- Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
- Consulta las herramientas, credenciales y entornos necesarios en el documento original.
- Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill responsive-testingAntes de empezar
- La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
- Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
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.
