chrome-mcp-ui-audit은(는) 무엇을 하나요?
Chrome DevTools MCP를 통해 웹 앱의 UI/QA 감사를 수행하는 재사용 가능한 Claude Code 스킬 — 도구 사용 시 발생할 수 있는 함정, 모달/포커스 트랩, 접근성/용어/네트워크 검사 스니펫을 다룹니다.
주요 기능
- UI 감사: 페이지 요소의 시각적 레이아웃, 간격, 정렬 검사
- 접근성 검사: ARIA 속성, 명암비, 키보드 내비게이션 확인
- 모달 및 포커스 트랩 감지: 포커스 관리, 모달 열기/닫기 시 포커스 이동 확인
- 용어 일관성 검사: 페이지 내 텍스트 용어가 일관된지 확인하는 스니펫
- 네트워크 검사: 리소스 로딩, HTTP 상태 코드, API 호출 실패 점검
사용 방법
# Claude Code 내에서 이 스킬 활성화 (예시)
claude use EraWeb3333/chrome-mcp-ui-audit
감사할 URL이나 페이지 상태를 제공하면, 스킬이 Chrome DevTools MCP 명령어를 생성하여 실행합니다.
요구 사항
- Claude Code (또는 Chrome DevTools MCP를 지원하는 에이전트)
- Chrome DevTools MCP 서버 설정
- 대상 웹 애플리케이션에 대한 접근 권한
지원 플랫폼
- Claude Desktop
- Cursor
- Windsurf
- 기타 MCP 호환 클라이언트
참고
자세한 내용은 저장소를 참조하세요: EraWeb3333/chrome-mcp-ui-audit