visual-debugger
✓Playwright 브라우저 자동화를 사용한 대화형 시각적 디버깅. 웹 사이트/앱을 시각적으로 검사하고, UI 요소를 테스트하고, 버튼 기능을 확인하고, 반응형 디자인을 확인하고, 레이아웃 문제를 디버그하고, 콘솔 오류를 모니터링하거나, 브라우저 기반 시각적 테스트를 수행하라는 요청을 받을 때 사용합니다. 일반적인 트리거에는 버튼 작동 여부 확인, 페이지 로드 확인, 양식 테스트, 요소 검사, 페이지 디버깅, URL 탐색 및 동작 확인 요청, 시각적 브라우저 검사 및 테스트와 관련된 요청이 포함됩니다.
SKILL.md
Interactive visual debugging tool using Playwright MCP browser automation to inspect, test, and debug web applications and websites.
Before using this skill, verify Playwright MCP tools are available:
Security Note: Never hardcode real credentials. Ask user for test credentials or use environment variables.
Playwright 브라우저 자동화를 사용한 대화형 시각적 디버깅. 웹 사이트/앱을 시각적으로 검사하고, UI 요소를 테스트하고, 버튼 기능을 확인하고, 반응형 디자인을 확인하고, 레이아웃 문제를 디버그하고, 콘솔 오류를 모니터링하거나, 브라우저 기반 시각적 테스트를 수행하라는 요청을 받을 때 사용합니다. 일반적인 트리거에는 버튼 작동 여부 확인, 페이지 로드 확인, 양식 테스트, 요소 검사, 페이지 디버깅, URL 탐색 및 동작 확인 요청, 시각적 브라우저 검사 및 테스트와 관련된 요청이 포함됩니다. 출처: jarrodmedrano/jarrod-claude-skills.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/jarrodmedrano/jarrod-claude-skills --skill visual-debugger- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
visual-debugger이란?
Playwright 브라우저 자동화를 사용한 대화형 시각적 디버깅. 웹 사이트/앱을 시각적으로 검사하고, UI 요소를 테스트하고, 버튼 기능을 확인하고, 반응형 디자인을 확인하고, 레이아웃 문제를 디버그하고, 콘솔 오류를 모니터링하거나, 브라우저 기반 시각적 테스트를 수행하라는 요청을 받을 때 사용합니다. 일반적인 트리거에는 버튼 작동 여부 확인, 페이지 로드 확인, 양식 테스트, 요소 검사, 페이지 디버깅, URL 탐색 및 동작 확인 요청, 시각적 브라우저 검사 및 테스트와 관련된 요청이 포함됩니다. 출처: jarrodmedrano/jarrod-claude-skills.
visual-debugger 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/jarrodmedrano/jarrod-claude-skills --skill visual-debugger 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/jarrodmedrano/jarrod-claude-skills
상세
- 카테고리
- *크리에이티브
- 출처
- skills.sh
- 최초 등록
- 2026-02-01