99%가 모르는 클로드 스킬 5개 세팅 지도

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

역할: 클로드 스킬 다섯개의 설치와 동작 확인을 맡는 담당

깔 것
1. find-skills      (vercel-labs/skills)
2. grill-me         (mattpocock/skills)
3. tdd              (mattpocock/skills)
4. frontend-design  (anthropics/skills)
5. agent-browser    (npm 전역 + 크롬 내려받기)

순서
1. 위 네 저장소를 `npx skills add <owner>/skills` 로 설치한다. 이미 있으면 건너뛴다.
2. agent-browser 는 `npm install -g agent-browser` 뒤에 반드시 `agent-browser install` 까지 실행한다.
   두 번째 명령이 크롬(Chrome for Testing)을 내려받는다. 빠뜨리면 실행할 때 크롬을 못 찾는다.
3. 설치가 끝나면 `/skills` 로 다섯개가 목록에 있는지 확인해서 보여준다.
4. 아래 다섯 문장을 하나씩 나에게 던져, 각각 의도한 스킬이 걸리는지 확인한다.
   - "쇼핑몰 만들고 싶은데 쓸 만한 스킬 있어?"        → find-skills
   - "이 기획 좀 물고 늘어져 줘"                      → grill-me
   - "이 버그 테스트 먼저 짜고 고치자"                → tdd
   - "이 서비스 랜딩 화면 만들어줘"                   → frontend-design
   - "이 페이지 열어서 폼 채우고 스크린샷 찍어와"     → agent-browser
5. 안 걸린 것이 있으면 그 스킬만 다시 설치하고, 세션을 새로 열어 한 번 더 확인한다.

규칙
- 설치 명령을 실행하기 전에 무엇을 왜 까는지 한 줄로 말한다.
- 확인 단계에서 스킬이 실제로 걸렸는지는 네 판단이 아니라 화면에 뜬 스킬 이름으로 답한다.
- 다 끝나면 「깔린 것 / 안 걸린 것 / 다음에 볼 것」 세 줄로 정리한다.

스킬이 뭔지부터

스킬은 md 파일 한 장입니다. 「이런 상황에서는 이런 순서로 해라」를 적어둔 문서고, 클로드가 그 상황을 만나면 알아서 읽습니다. 프롬프트를 매번 길게 쓰는 대신 한 번 깔아두는 것입니다.

그래서 두 가지가 중요합니다.

• 많이 깐다고 좋아지지 않습니다. 안 걸리는 스킬은 그냥 파일입니다.
• 언제 걸리는지를 알아야 합니다. 아래 다섯개를 고른 기준도 「자주 오는 상황」입니다.

다섯개 — 설치 수와 언제 걸리나

수치는 2026-08-24 skills.sh · npmjs.com 각 페이지 실측입니다. agent-browser 는 npm 주간 다운로드가 107만이고, 저장소 별은 41,233개입니다.

Quick Start

네 개는 저장소 단위로 한 줄씩입니다.

npx skills add vercel-labs/skills

npx skills add mattpocock/skills

npx skills add anthropics/skills

agent-browser 만 다릅니다. 명령이 두 줄입니다.

npm install -g agent-browser
agent-browser install

맥이면 brew install agent-browser 로도 됩니다. 어느 쪽이든 agent-browser install 은 한 번 실행해야 합니다.

걸리는지 확인

쇼핑몰 만들고 싶은데 쓸 만한 스킬 있어?

1 · find-skills — 뭘 깔지 몰라서 헤매는 걸 없앤다

npx skills 는 스킬의 패키지 매니저입니다. find-skills 는 그 CLI 를 클로드가 대신 쓰게 만듭니다.

원본 SKILL.md 가 정한 걸리는 순간은 이렇습니다.

• "어떻게 하면 X 를 하지?" — X 가 흔한 작업일 때
• "X 하는 스킬 있어?"
• "너 X 도 돼?" — X 가 전문 기능일 때

걸리면 클로드가 이 순서로 움직입니다. 먼저 skills.sh 순위표를 보고 이미 알려진 스킬이 있는지 확인한 뒤, 없으면 npx skills find <검색어> 로 찾고, 마지막에 npx skills add <패키지> 명령을 띄웁니다.

직접 쓸 수 있는 명령도 알아두면 좋습니다.

npx skills find "카드뉴스"

npx skills update

2 · grill-me — 계획을 굳히기 전에 물고 늘어지게 한다

grill-me 파일 자체는 157바이트짜리 얇은 껍데기고, 실제 내용은 같은 저장소의 grilling 스킬에 있습니다. 그래서 mattpocock/skills 를 통째로 깔면 둘 다 들어옵니다.

동작이 특이합니다. 질문을 한 번에 한 개씩 던지지 않고, 지금 답할 수 있는 질문을 전부 모아 한 라운드로 묻습니다.

원본이 정한 형식이 이렇습니다.

❓ **Q1** - **결제 수단**: 카드만 받나요, 계좌이체도 받나요?

➡️ 카드만으로 시작하는 걸 권합니다. 이체는 정산 로직이 따로 붙습니다.

---

❓ **Q2** - **재고 관리**: 품절을 실시간으로 막나요?

➡️ 주문 시점에만 확인하는 쪽을 권합니다.

여기서 흔히 오해하는 게 있습니다. 답을 아예 안 주는 게 아닙니다. 질문마다 ➡️ 로 자기 추천안을 같이 냅니다. 그래서 답하기 쉽고, 동의하면 넘어가고 아니면 그 줄만 뒤집으면 됩니다.

라운드가 끝나면 답한 내용이 다음 라운드의 질문을 바꿉니다. 아직 답이 안 나온 질문에 의존하는 질문은 다음 라운드로 미룹니다. 그래서 추측으로 답할 일이 생기지 않습니다.

사실 확인은 사용자 몫이 아니라 클로드 몫입니다 — 원본에 그렇게 적혀 있습니다.

3 · frontend-design — "어디서 본 듯한 화면"을 막는다

앤트로픽이 직접 쓴 스킬입니다. 시작 문장이 이 스킬의 전부를 말합니다. "템플릿 같다는 이유로 이미 제안을 반려한 클라이언트" 를 상대하는 작은 스튜디오의 디자인 리드처럼 굴라고 지시합니다.

핵심 규칙 둘.

• 주제에서 뽑는다. 브리프에 제품이 뭔지 안 적혀 있으면 먼저 정하게 합니다 — 구체적인 대상, 그 대상의 사용자, 이 페이지가 할 단 하나의 일. 그걸 말한 다음에 디자인을 시작합니다.
• 정당화할 수 있는 위험을 하나 감수한다. 팔레트·서체·레이아웃에서 의도적으로 튀는 선택을 하나 넣되, 왜 그랬는지 말할 수 있어야 합니다.

기억에 사용자 취향이나 이전 작업이 있으면 그것도 단서로 쓰라고 적혀 있습니다. 그래서 쓸수록 우리 톤에 가까워집니다.

4 · tdd — "다 됐습니다"가 검사를 거쳐 나오게 한다

이 스킬은 「테스트를 짜라」가 아니라 버릴 만한 테스트를 안 짜게 하는 기준입니다.

좋은 테스트의 정의부터 못 박습니다. 테스트는 공개 인터페이스로 동작을 확인하지 내부 구현을 확인하지 않습니다. 코드가 통째로 바뀌어도 테스트는 그대로여야 합니다.

피해야 할 것 세 가지를 이름 붙여 잡아둡니다.

• 구현에 붙은 테스트 — 내부 협력 객체를 모킹하거나 비공개 메서드를 검사합니다. 티가 나는 지점: 동작은 그대로인데 리팩터링하면 테스트가 깨집니다.
• 동어반복 — 기대값을 코드와 같은 방식으로 다시 계산합니다(expect(add(a,b)).toBe(a+b)). 구조상 항상 통과해서 코드와 어긋날 수가 없습니다. 기대값은 독립된 출처에서 와야 합니다.
• 가로로 자르기 — 테스트를 전부 먼저 쓰고 구현을 전부 나중에 합니다. 그러면 *상상한* 동작을 검사하게 됩니다. 대신 세로로 자릅니다 — 테스트 하나 → 구현 하나 → 반복.

루프 규칙도 짧습니다.

• 빨강 먼저. 실패하는 테스트를 쓰고, 그걸 통과할 만큼만 짭니다. 앞으로 필요할 것 같은 걸 미리 만들지 않습니다.
• 한 번에 한 조각.
• 리팩터링은 루프에 없습니다. 그건 리뷰 단계 일입니다.

프로젝트에 CONTEXT.md 가 있으면 먼저 읽어서 테스트 이름이 그 프로젝트 용어를 쓰게 합니다.

5 · agent-browser — 클로드가 크롬을 직접 만진다

나머지 넷과 성격이 다릅니다. 문서가 아니라 실행 파일입니다. 러스트로 짠 네이티브 CLI 고, 버셀이 만들었습니다.

깔고 나면 클로드가 이런 명령을 직접 씁니다.

agent-browser open example.com

agent-browser snapshot

agent-browser click "#submit"
agent-browser fill "#email" "test@every.ai"

스크린샷·텍스트 추출도 같은 방식입니다. 즉 "이 페이지 열어서 로그인하고 화면 찍어와" 가 실제로 됩니다.

이미 크롬·브레이브·Playwright·Puppeteer 가 깔려 있으면 자동으로 찾아 씁니다. 없으면 agent-browser install 이 구글 공식 자동화용 크롬을 내려받습니다.

agent-browser install --with-deps

안 걸릴 때 확인할 것

세션을 새로 엽니다. 설치 전에 열어둔 세션에는 스킬 목록이 안 실려 있습니다. 이게 제일 흔합니다.

말투를 바꿔봅니다. 스킬은 description 에 적힌 상황 표현으로 걸립니다. "스킬 찾아줘" 가 안 먹으면 "이런 거 해주는 스킬 있어?" 처럼 원본이 예시로 든 문장에 가깝게 말해봅니다.

/skills 로 목록을 확인합니다. 목록에 없으면 설치가 안 된 것이고, 있는데 안 걸리면 상황 표현 문제입니다.

agent-browser 는 agent-browser install 을 했는지 봅니다. npm install -g 만 하고 끝내면 크롬이 없어서 실행 시점에 실패합니다.

FAQ

다섯개를 다 깔아야 하나요.

아닙니다. 하나만 깔아 보고 실제로 걸리는지 확인한 뒤 늘리는 편이 낫습니다. 안 걸리는 스킬은 목록만 차지하고 매 세션 토큰을 씁니다.

깔면 클로드가 느려지나요.

스킬은 이름과 description 만 항상 실리고, 본문은 걸릴 때만 읽힙니다. 다섯개 정도는 체감되지 않습니다. 수십 개를 깔면 그때부터 목록이 무거워집니다.

회사 계정에서도 되나요.

됩니다. 다만 npx 가 사내 저장소를 보고 있으면 설치가 E404 로 떨어집니다. npm config get registry 로 확인하고 공개 저장소를 지정해 실행하세요.

스킬을 직접 만들 수 있나요.

할 수 있습니다. 스킬은 앞머리에 name 과 description 을 적은 md 파일 하나입니다. 앤트로픽 공식 skill-creator 에게 만들고 싶은 것을 말하면 파일 생성부터 포장까지 해줍니다.

깔았는데 목록에 안 보입니다.

설치 전에 열어둔 세션에는 목록이 안 실립니다. 세션을 새로 열고 /skills 로 다시 확인하세요.

공식 자료

• skills.sh 공식 순위·검색
• find-skills 공식 GitHub
• frontend-design — 앤트로픽 공식 스킬 저장소
• agent-browser — 설치 후 agent-browser install 까지 해야 크롬이 붙습니다
• 클로드 코드 공식 문서

다음에 볼 것

skills.sh 순위표를 한 번 훑어보시길 권합니다. 여기 고른 다섯개는 「자주 오는 상황」 기준이고, 하는 일에 따라 더 잘 걸리는 게 있습니다. npx skills find <키워드> 로 찾거나, find-skills 를 깔아뒀으니 그냥 클로드한테 물어보면 됩니다.

스킬은 md 파일이라 고쳐 쓸 수 있습니다. 깔아둔 파일을 열어 우리 방식으로 문장을 바꾸면 그대로 걸립니다. 남의 것을 그대로 쓰는 것보다 그쪽이 훨씬 잘 맞습니다.