혼자 개발할 때 무조건 챙길 클로드 필수 스킬 4개 설치 가이드

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

“사이트 만들어줘” 다음에 맡길 일까지 준비하는 가이드입니다. 로그인 화면 하나를 예로, 필요한 스킬 찾기부터 버튼 확인·오류 조사·작업 저장까지 연결합니다.

준비물: Node.js·npm, 프로젝트 폴더에서 실행한 Claude Code, 내가 확인해도 되는 테스트 사이트 주소. 일반 클로드 웹 채팅에 설치 명령을 붙여 넣는 방식은 아닙니다.

이미 agent-browser 스킬과 실행 도구를 준비했다면 아래 요청으로 첫 결과부터 확인하세요. 아직 없다면 STEP 1~2부터 진행하세요.

웹사이트 테스트 담당으로 agent-browser를 사용해줘.
대상은 <내 테스트 사이트의 로그인 페이지 주소>야.
입력창을 비운 채 로그인 버튼을 눌러봐.
누른 버튼, 실제 표시된 안내 문구, 스크린샷을 남겨줘.
예상 반응을 지어내지 말고 화면에서 확인한 것만 알려줘.
게시·결제·계정 생성·삭제는 하지 마.

아래는 직접 설치하고 하나씩 써보는 순서입니다. 각 요청문의 결과는 확인할 기준이며, 이 글에서 실제 실행해 얻은 출력 로그는 아닙니다.

STEP 1 · 설치필요한 네 개만 설치하기

이 단계에서는 네 스킬을 현재 프로젝트에 연결합니다. 한 저장소 전체를 무작정 추가하면 이번 작업과 관계없는 스킬까지 들어올 수 있기 때문입니다.

먼저 터미널에서 프로젝트 폴더로 이동한 뒤 현재 목록을 확인하세요.

npx skills list

이미 Superpowers 플러그인을 쓰고 있고 systematic-debugging이 제공된다면 해당 설치 줄은 건너뛰세요. 아래는 선택한 스킬만 Claude Code 프로젝트에 설치하는 방식입니다. 확인 질문이 나오면 대상 이름과 범위를 읽고 진행하세요.

npx skills add vercel-labs/skills --skill find-skills -a claude-code

npx skills add vercel-labs/agent-browser --skill agent-browser -a claude-code

npx skills add obra/superpowers --skill systematic-debugging -a claude-code

npx skills add anthropics/skills --skill skill-creator -a claude-code

skill not found처럼 대상을 찾지 못하면 이름을 추측해서 바꾸지 마세요. npx skills add <저장소> --list로 저장소가 제공하는 이름을 확인하세요. 이미 설치한 파일을 지우고 처음부터 다시 시작할 필요는 없습니다.

STEP 2 · 실행 준비agent-browser의 실행 도구까지 준비하기

이 단계에서는 클로드가 실제로 브라우저를 열 수 있게 준비합니다. 스킬 문서는 사용법을 알려주지만, 그 문서만으로 브라우저 실행 프로그램이 생기지는 않기 때문입니다.

공식 README의 npm 설치 경로입니다. 이 명령은 실행 도구를 전역에 설치합니다. 회사 컴퓨터라면 허용된 설치 범위를 먼저 확인하세요.

npm install -g agent-browser
agent-browser install

이미 실행 도구가 있으면 중복 설치하지 말고 아래 명령부터 확인하세요.

agent-browser --version
agent-browser skills get core

브라우저 준비가 끝나면 Claude Code의 새 세션을 여세요. 기존 세션에 새 스킬이 보이지 않을 때는 설치 실패와 세션 갱신 문제를 구분해야 합니다.

STEP 3 · find-skills필요한 기능부터 말하기

이 단계에서는 스킬 이름을 외우지 않고 할 일에 맞는 후보를 찾습니다. 인기 순위에 있는 것을 전부 설치하는 것보다, 지금 맡길 작업이 분명해야 후보를 비교하기 쉽기 때문입니다.

find-skills를 사용해줘.
내가 만든 웹사이트의 로그인 흐름을 점검할 스킬을 찾아줘.
입력창, 로그인 버튼, 실패 안내까지 확인하고 싶어.
후보별로 무엇을 확인할 수 있는지와 설치 출처를 비교해줘.
이미 설치된 것으로 해결되면 그것부터 제안하고, 아직 설치하지 마.

여기서 볼 것은 후보 개수가 아닙니다. 내가 말한 로그인 흐름을 실제로 확인할 수 있는지입니다. 검색 결과가 디자인 스킬뿐이라면 테스트·브라우저 같은 작업 단어로 범위를 바꾸세요.

직접 검색하고 싶다면 같은 작업을 짧은 검색어로 넣을 수도 있습니다.

npx skills find browser testing

STEP 4 · agent-browser만든 화면을 직접 눌러보기

이 단계에서는 코드 설명이 아니라 브라우저의 실제 반응을 확인합니다. 로그인 함수가 있다는 것과 사용자가 로그인을 끝낼 수 있다는 것은 다른 일이기 때문입니다.

다음 요청문의 주소를 내 테스트 사이트로 바꾸세요. 처음에는 비밀번호가 필요 없는 빈 폼 제출부터 확인하는 편이 간단합니다.

agent-browser로 <테스트 사이트 주소>의 로그인 페이지를 열어줘.
먼저 페이지의 입력창과 버튼을 확인해줘.
아무 값도 넣지 않은 상태로 로그인 버튼을 눌러보고,
어떤 안내가 나오는지 스크린샷과 함께 알려줘.
게시, 결제, 계정 생성, 삭제는 하지 마.

성공 여부는 “문제없습니다” 한 줄로 받지 마세요. 누른 버튼·입력 상태·실제 표시된 문구가 있어야 합니다. 에러가 안 보인다면 그것도 관찰 결과입니다.

보고는 다음 항목으로 받으면 다시 화면을 찾아다닐 필요가 줄어듭니다. 아래는 실행 결과가 아닌 출력 양식입니다.

대상 페이지: <확인한 주소>
수행한 동작: <입력 상태와 누른 버튼>
화면 반응: <실제로 표시된 문구 또는 변화>
스크린샷: <저장한 파일 경로>
추가 확인: <아직 확인하지 않은 동작>

직접 명령으로 확인할 때는 open → snapshot → 동작 → snapshot 순서입니다. 화면이 바뀐 뒤에는 새로 얻은 요소 참조를 써야 합니다. 이전 화면의 @e2가 다음 화면에서도 같은 버튼이라는 보장은 없습니다.

STEP 5 · systematic-debugging고치기 전에 원인부터 좁히기

이 단계에서는 오류를 재현하고 값이 어디서 달라졌는지 추적합니다. 화면에 보이는 증상만 고치면 다른 곳에서 같은 문제가 다시 나올 수 있기 때문입니다.

아래는 로그인 요청이 실제로 401을 반환할 때 쓰는 요청문입니다. 다른 오류가 발생했다면 상태 코드와 재현 순서를 실제 내용으로 바꾸세요.

systematic-debugging을 사용해줘.
테스트 계정으로 로그인하면 요청이 401로 실패해.
재현 순서를 먼저 확인하고 요청이 어디서 거절되는지 좁혀줘.
요청을 보내는 코드부터 인증 값이 만들어지는 곳까지 추적해줘.
비밀값은 출력하지 말고, 값의 존재 여부와 전달 경로만 확인해줘.
원인과 근거를 설명한 다음 수정안을 제시해줘. 아직 파일은 바꾸지 마.

이 스킬은 오류를 무조건 해결하는 버튼이 아닙니다. 원인 조사 → 정상 사례와 비교 → 가설 확인 → 수정의 순서를 지키게 합니다. 고칠 위치가 좁혀졌다면 그다음에 수정과 재현 테스트를 요청하세요.

“세션 문제인 것 같습니다”에서 끝났다면 아직 원인을 확인한 것이 아닙니다. 실패한 요청 → 값이 달라진 위치 → 근거 → 수정할 범위로 보고받으세요. 위치를 못 찾았다면 추측으로 파일을 고치기보다 다음에 확인할 항목을 받는 단계입니다.

STEP 6 · skill-creator잘된 작업을 다시 쓸 수 있게 남기기

이 단계에서는 앞에서 잘된 절차와 내 피드백을 스킬로 만듭니다. 대화 전체를 저장하는 것보다, 언제 어떤 입력으로 시작하고 무엇을 확인해야 하는지 남기는 편이 재사용하기 쉽기 때문입니다.

실제로 완료한 작업을 재료로 주는 것이 중요합니다. 아직 실행하지 않은 로그인 점검 예시를 성공 사례라고 넣지 마세요.

skill-creator로 방금 완료한 로그인 점검 과정을 스킬로 정리해줘.
내가 고친 부분과 잘됐다고 확인한 결과를 먼저 찾아줘.
언제 쓸지, 어떤 주소와 테스트 정보가 필요한지,
어떤 순서로 확인하고 어떤 결과를 남길지 적어줘.
게시·결제·삭제 금지와 비밀값을 저장하지 않는 조건도 넣어줘.
특정 사이트 주소나 계정은 고정하지 마.
초안을 보여주고, 다른 테스트 페이지에 적용할 시험 요청도 제안해줘.

skill-creator의 핵심은 파일 생성에서 끝내지 않는 것입니다. 초안 → 새 입력으로 실행 → 결과 비교 → 피드백 반영까지 이어져야 합니다.

완성할 것은 “로그인 확인을 잘하라”는 한 줄이 아닙니다. 어떤 주소를 받고, 빈 폼·버튼·실패 안내를 어떤 순서로 확인하며, 스크린샷을 어떻게 남길지 적힌 절차입니다. 다른 테스트 페이지를 주었을 때도 앞 단계의 보고 항목이 나오는지 확인하세요.

네 개를 한 작업에 연결하기

네 스킬을 항상 전부 호출할 필요는 없습니다. 이미 필요한 스킬을 알면 검색을 생략하고, 브라우저에서 문제가 없으면 오류 조사도 건너뛰세요. 처음 연결해 볼 때는 다음처럼 맡길 수 있습니다.

이번 작업은 <테스트 사이트 주소>의 로그인 흐름 점검이야.

1. 필요한 스킬이 없다면 find-skills로 후보를 찾고 설치를 제안해줘.
2. 준비된 agent-browser로 입력과 버튼 반응을 실제로 확인해줘.
3. 오류가 재현되면 systematic-debugging으로 원인을 좁혀줘.
   원인이 확인되기 전에는 임의로 코드를 바꾸지 마.
4. 수정이 필요하면 변경 범위를 먼저 보여줘.
   내가 승인한 변경만 적용하고 같은 동작을 다시 확인해줘.
5. 내가 결과를 확인한 뒤 skill-creator로 재사용할 절차를 정리해줘.

건너뛴 단계와 그 이유를 남겨줘.
실제 확인한 결과와 예상 결과를 분리하고, 계정 비밀값은 저장하지 마.

자주 막히는 곳

스킬을 설치했는데 보이지 않습니다. 설치 대상이 Claude Code인지, 현재 프로젝트와 사용자 영역 중 어디에 넣었는지 확인하세요. 같은 환경의 새 세션에서도 보이지 않으면 실제 설치 파일 경로를 확인하세요.

agent-browser 안내만 있고 브라우저가 열리지 않습니다. 스킬 설치와 실행 도구 설치를 구분하세요. 터미널이 명령을 찾는지 확인하고, 실행은 되지만 브라우저를 못 찾으면 agent-browser install 단계의 오류를 확인하세요. 권한 오류를 무조건 관리자 실행으로 덮지 마세요.

로그인을 대신할 수 없습니다. 자동화 브라우저가 평소 사용하는 브라우저의 로그인 상태를 자동으로 공유한다고 가정하지 마세요. 인증이 필요하면 직접 완료하고, 쿠키나 비밀번호를 채팅에 통째로 붙여 넣지 마세요.

똑같은 스킬이 두 번 보입니다. 프로젝트·사용자 영역·플러그인 중 어디에서 제공되는지 확인하세요. 잘 작동하는 기존 설치를 지우기 전에 실제로 중복된 이름과 경로부터 비교하세요.

FAQ

네 개를 전부 깔아야 합니까?

아닙니다. 지금 맡길 일이 있는 것부터 쓰세요. 이번 묶음은 스킬 탐색, 브라우저 조작, 오류 조사, 작업 재사용처럼 서로 다른 자리를 담당하도록 골랐습니다.

systematic-debugging만 설치하면 Superpowers 전체가 실행됩니까?

아닙니다. 위 명령은 개별 스킬을 선택합니다. Superpowers 전체 플러그인에는 다른 스킬과 초기 지시도 포함되므로 별도 설치 경로입니다. 전체 방식이 필요하면 공식 README의 Claude Code 설치 절을 읽고 선택하세요.

일반 클로드 채팅에서도 같은 명령을 쓰면 됩니까?

이 글의 설치 명령은 터미널과 Claude Code 기준입니다. 웹 채팅의 스킬 추가 방식과 실행 가능한 도구는 다릅니다. agent-browser 실행 도구를 설치하지 않은 채 웹 채팅에 이름만 적는다고 브라우저가 연결되지는 않습니다.

만든 스킬을 다른 프로젝트에 옮겨도 됩니까?

가능하지만 주소·파일 경로·완료 기준이 첫 프로젝트에 고정돼 있지 않은지 보세요. 새 프로젝트에서 시험하고 어긋나는 부분을 고쳐야 합니다. 계정 정보나 고객 데이터가 섞인 원본 대화를 그대로 배포하지 마세요.

공식 자료

• Skills CLI — 설치 대상·범위·선택 옵션
• find-skills — 공식 스킬 원문
• agent-browser — 설치와 기본 사용법
• systematic-debugging — 공식 스킬 원문
• Superpowers — 전체 플러그인 설치 안내
• skill-creator — 공식 스킬 원문

설치 명령과 지원 범위는 2026-09-10 조회한 공식 안내를 기준으로 정리했습니다. 이 글의 요청문은 직접 작성한 예시이며, 실제 실행 결과나 자동 해결을 보장하는 기록은 아닙니다.