사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill responsive-testing시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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.
