무료 AI 스킬
Playwright로 로컬 웹앱을 직접 조작하며 테스트하고 스크린샷까지 찍어줘요.
무료 다운로드 (webapp-testing.zip)로컬에서 개발 중인 웹 애플리케이션을 Playwright로 직접 조작하면서 프론트엔드 동작을 검증하고, UI 버그를 디버깅하고, 스크린샷과 브라우저 로그를 확인할 수 있게 해주는 Anthropic 공식 스킬입니다. 버튼 클릭, 폼 입력, 페이지 이동 같은 실제 사용자 행동을 코드로 재현해서 "이 기능이 진짜로 작동하는지" 직접 확인해줍니다. 서버 실행/종료까지 관리해주는 헬퍼 스크립트가 포함되어 있어서, 매번 수동으로 브라우저를 열어 클릭해보는 반복 작업을 줄여줍니다. [사용 예시] "로그인 폼에 이메일/비밀번호 입력하고 로그인 버튼 눌렀을 때 에러 메시지가 뜨는지 확인해줘"라고 요청하면, 실제로 로컬 서버를 띄운 채 그 시나리오를 재현하고 결과(성공/실패, 스크린샷)를 보여줍니다.
1. 이 페이지의 파란색 "무료 다운로드" 버튼을 마우스 왼쪽 버튼으로 한 번 클릭하세요. 2. 다운로드가 끝나면 화면 아래쪽이나 브라우저 오른쪽 위에 다운로드된 파일이 나타납니다. 보통 "다운로드"(Downloads) 폴더에 저장됩니다. 3. 파일 이름이 ".zip"으로 끝나면 압축 파일입니다. 그 파일 위에서 마우스 오른쪽 버튼을 클릭한 뒤 "압축 풀기"(또는 "여기에 풀기")를 선택하세요. 그러면 같은 이름의 폴더가 새로 하나 생깁니다. 이 스킬은 실제 코드를 작성/실행하는 걸 도와주는 성격이라, 일반 채팅(Claude.ai, ChatGPT 등)보다는 개발자용 프로그램에서 가장 잘 작동합니다. [Claude Code에서 쓰는 법] (추천) 4. 컴퓨터에 Claude Code가 설치되어 있어야 합니다. 5. 압축을 푼 폴더를 작업 중인 프로젝트 폴더 안의 ".claude/skills" 폴더에 그대로 넣습니다 (그런 폴더가 없다면 새로 만들어서 넣으면 됩니다). 6. Claude Code를 껐다가 다시 켭니다. 7. 관련 작업을 요청하면 이 스킬 내용을 참고해서 도와줍니다. [Cursor, GitHub Copilot 등 다른 코딩 도구] 요즘 나오는 코딩 도구 대부분이 같은 방식(SKILL.md 파일)을 지원합니다. 각 프로그램의 "Skills" 또는 "Rules" 설정 메뉴에서 이 폴더를 추가하면 됩니다. 정확한 메뉴 위치는 프로그램마다 조금씩 다릅니다. [Claude.ai나 ChatGPT에서도 참고 자료로는 쓸 수 있어요] 실제 스크립트를 실행하지는 못하지만, 파일을 업로드하고 "이 방법대로 알려줘"라고 요청하면 안내 내용을 참고해서 답변해줍니다. [마음에 안 들면 지우는 방법] · Claude.ai / ChatGPT / Grok: 설정의 "Skills" 목록에서 이 스킬 옆에 있는 휴지통(삭제) 아이콘을 누르면 바로 제거됩니다. · Claude Code / 다른 코딩 도구: ".claude/skills" 폴더 안에서 이 스킬 폴더를 찾아 마우스 오른쪽 버튼 → 삭제(휴지통으로 이동)를 누르면 됩니다. 컴퓨터의 다른 프로그램에는 전혀 영향이 없고, 그냥 폴더 하나가 없어지는 것뿐이라 안심하고 지우셔도 됩니다.
원본 출처: https://github.com/anthropics/skills/tree/main/skills/webapp-testing
HANDLED