브라우저 자동화를 사용하여 뷰포트 너비 전반에 걸쳐 웹사이트 응답성을 테스트합니다. 중단점을 통해 단일 세션의 크기를 조정하고, 각 너비의 스크린샷을 찍고, 레이아웃 전환(열 변경, 탐색 스위치, 오버플로)을 감지합니다. 레이아웃이 중단되는 위치를 정확하게 보여주는 비교 보고서를 생성합니다. '응답성 확인', '응답성 확인', '중단점 테스트', '뷰포트 테스트', '반응성 스윕', '중단점 확인' 또는 '모바일에서 테스트'로 트리거합니다.
명령줄에서 responsiveness-check AI 스킬을 개발 환경에 빠르게 설치
출처: jezweb/claude-skills.
Test how a website's layout responds to viewport width changes. Resizes through breakpoints in a single browser session, screenshots each width, compares adjacent sizes, and reports where layouts break.
What this tests: Layout responsiveness — overflow, stacking, navigation transitions, content reflow.
What this does NOT test: General accessibility (ARIA, semantic HTML, heading hierarchy, colour contrast). Those don't vary by viewport width — use the ux-audit skill instead.
브라우저 자동화를 사용하여 뷰포트 너비 전반에 걸쳐 웹사이트 응답성을 테스트합니다. 중단점을 통해 단일 세션의 크기를 조정하고, 각 너비의 스크린샷을 찍고, 레이아웃 전환(열 변경, 탐색 스위치, 오버플로)을 감지합니다. 레이아웃이 중단되는 위치를 정확하게 보여주는 비교 보고서를 생성합니다. '응답성 확인', '응답성 확인', '중단점 테스트', '뷰포트 테스트', '반응성 스윕', '중단점 확인' 또는 '모바일에서 테스트'로 트리거합니다. 출처: jezweb/claude-skills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/jezweb/claude-skills --skill responsiveness-check브라우저 자동화를 사용하여 뷰포트 너비 전반에 걸쳐 웹사이트 응답성을 테스트합니다. 중단점을 통해 단일 세션의 크기를 조정하고, 각 너비의 스크린샷을 찍고, 레이아웃 전환(열 변경, 탐색 스위치, 오버플로)을 감지합니다. 레이아웃이 중단되는 위치를 정확하게 보여주는 비교 보고서를 생성합니다. '응답성 확인', '응답성 확인', '중단점 테스트', '뷰포트 테스트', '반응성 스윕', '중단점 확인' 또는 '모바일에서 테스트'로 트리거합니다. 출처: jezweb/claude-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/jezweb/claude-skills --skill responsiveness-check 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/jezweb/claude-skills