클로드 코드 스킬 추천 5개: 설치·검증·실전 프롬프트
클로드 코드 스킬 추천 5개를 공식 문서 기준으로 정리했습니다. agent-browser, GSD Core, Taste, mcp-builder 설치 명령과 검증법, 실전 프롬프트를 확인하세요.
이런 분을 위한 글입니다
- Claude Code를 더 실전적으로 쓰고 싶은 분
- AI가 만든 결과를 직접 검증하고 싶은 분
읽고 나면 이렇게 달라집니다
- 필수 도구 5개의 설치와 검증 방법을 익힌다
- 바로 써볼 수 있는 실전 프롬프트를 얻는다
Claude Code를 쓰다 보면 모델의 성능과는 별개로 답답한 순간이 생깁니다.
기본 터미널 작업 흐름에서는 완성된 웹 화면을 자동으로 열어 조작하지 않습니다. 대화가 길어지면 앞에서 합의한 내용을 놓칠 수 있습니다. 디자인 기준이 없으면 비슷한 카드와 그라데이션이 반복되기도 합니다. 외부 서비스를 연결하려면 생소한 설정부터 공부해야 합니다.
이럴 때 필요한 것이 스킬과 작업 도구입니다.
스킬은 Claude에게 특정 작업 방식을 알려주는 지침서입니다. 폴더 안의 SKILL.md 파일에 역할, 사용 시점, 작업 순서가 들어 있습니다. Claude Code는 설명과 요청을 바탕으로 관련 스킬을 불러오며, 사용자가 슬래시 명령으로 직접 실행할 수도 있습니다.
클로드 코드에 어떤 스킬을 설치하면 좋을까?
화면 검증에는 agent-browser, 스킬 검색에는 find-skills, 긴 작업 관리에는 GSD Core가 유용합니다. 디자인 기준이 필요하면 design-taste-frontend를, 외부 API를 MCP로 연결해야 한다면 mcp-builder를 선택하세요.
| 도구 | 담당 역할 | 해결하는 문제 |
|---|---|---|
| agent-browser | 화면 확인 | 만든 화면을 직접 열고 조작합니다. |
| find-skills | 스킬 탐색 | 필요한 스킬을 대신 찾아줍니다. |
| GSD Core | 작업 관리 | 긴 작업을 단계와 기록으로 관리합니다. |
| design-taste-frontend | 디자인 기준 | 반복되는 AI 디자인 기본값을 바꿉니다. |
| mcp-builder | 외부 연결 | 외부 서비스와 연결할 MCP 서버 제작을 돕습니다. |
agent-browser, find-skills, design-taste-frontend, mcp-builder는 SKILL.md 중심의 스킬입니다. GSD Core는 명령어와 에이전트, 작업 기록 체계를 함께 설치하는 개발 워크플로 프레임워크입니다. 설치 방식이 다르니 아래 순서대로 진행하세요.
이 글의 명령어와 동작은 2026년 8월 17일 기준으로 각 프로젝트의 공식 문서와 저장소를 확인했습니다. latest 명령은 이후 버전에 따라 동작이 달라질 수 있으므로 오류가 나면 글 하단의 공식 출처를 다시 확인하세요.
복사해서 Claude Code에 바로 맡기는 프롬프트
직접 명령어를 하나씩 실행해도 됩니다. Claude Code에 설치와 검증을 맡기고 싶다면 프로젝트 폴더에서 Claude Code를 연 뒤 아래 프롬프트를 그대로 붙여 넣으세요.
역할: Claude Code용 스킬과 작업 도구의 설치 및 연결 검증 담당자
목표:
이 프로젝트에서 화면 검증, 스킬 탐색, 장기 작업 관리,
디자인 품질 개선, MCP 서버 제작을 할 수 있게 만들고 싶습니다.
설치 대상:
- agent-browser
- find-skills
- GSD Core
- design-taste-frontend
- mcp-builder
진행 순서:
1. node --version과 claude --version을 실행해 준비 상태를 확인하세요.
2. .claude/skills와 ~/.claude/skills를 확인해 이미 설치된 항목을 찾으세요.
3. 이미 설치된 항목은 다시 설치하지 마세요.
4. 없는 항목만 이 글에 나온 공식 설치 명령으로 설치하세요.
5. 설치 후 폴더 목록, 버전 명령, 작은 실행 테스트로 각각 검증하세요.
6. 실패한 항목이 있다면 완료라고 말하지 말고 실패한 명령, 원인, 다음 조치를 알려주세요.
안전 규칙:
- 기존 파일과 설정을 삭제하거나 덮어쓰지 마세요.
- .env와 비밀키가 들어 있을 수 있는 파일은 읽거나 출력하지 마세요.
- 스킬 원본 파일을 임의로 수정하지 마세요.
- 전역 설치가 필요하면 실행 전에 이유를 설명하세요.
마지막 출력:
- 실제로 실행한 명령어
- 확인된 Node.js와 Claude Code 버전
- 새로 생성된 폴더와 파일
- 성공한 항목과 실패한 항목
- 앞으로 각 도구를 호출하는 예시1단계: 설치 전 준비물 확인
Node.js와 Claude Code 확인
먼저 터미널에서 두 명령어를 실행합니다.
node --version
claude --versionNode.js 버전과 Claude Code 버전이 출력되면 준비가 된 것입니다.
GSD Core 공식 튜토리얼의 최소 조건은 Node.js 18 이상입니다. 하지만 Node.js 18과 20은 현재 지원이 끝났습니다. 새로 설치한다면 Node.js 22 LTS 또는 24 LTS를 사용하세요.
명령어를 찾을 수 없다는 메시지가 나오면 먼저 Node.js와 Claude Code를 설치하세요.
설치 명령은 인터넷에서 패키지와 브라우저 파일을 내려받습니다. 회사 컴퓨터라면 사내 보안 정책과 전역 설치 권한을 먼저 확인하세요.
기존 설치 여부 확인
프로젝트용 스킬과 개인용 스킬을 모두 확인합니다.
ls .claude/skills
ls ~/.claude/skills폴더가 없다는 메시지가 나와도 문제는 아닙니다. 아직 그 위치에 스킬을 설치하지 않았다는 뜻입니다.
GSD Core는 설치 범위에 따라 프로젝트의 .claude/commands 또는 개인 영역의 ~/.claude/commands에 파일을 만듭니다.
ls .claude/commands/gsd-*.md
ls ~/.claude/commands/gsd-*.md둘 중 설치한 범위에 해당하는 위치에서 gsd 명령 파일이 보여야 합니다. 마지막에는 Claude Code에서 실제 슬래시 명령이 인식되는지 확인하세요.
2단계: 네 가지 스킬 설치
설치 위치 정하기
처음이라면 작업할 프로젝트 폴더에서 프로젝트 설치로 시작하는 것을 권합니다. 이 프로젝트에만 적용되므로 관리하기 쉽습니다.
agent-browser 스킬
npx --yes skills@latest add vercel-labs/agent-browser --agent claude-code --yes --copy이 스킬은 Claude에게 agent-browser를 어떤 순서로 사용할지 알려줍니다. 하지만 실제 브라우저를 움직이는 명령줄 도구는 별도로 준비해야 합니다.
전역 설치가 가능한 컴퓨터라면 다음과 같이 설치합니다.
npm install -g agent-browser
agent-browser install
agent-browser --version전역 설치를 피하고 싶다면 공식 문서가 안내하는 npx 방식도 사용할 수 있습니다.
npx agent-browser install
npx agent-browser open https://example.comLinux에서 브라우저 실행에 필요한 시스템 라이브러리가 없다고 나오면 다음 명령을 사용합니다.
agent-browser install --with-depsfind-skills
npx --yes skills@latest add vercel-labs/skills --skill find-skills --agent claude-code --yes --copyfind-skills는 만들고 싶은 기능을 설명하면 공개 스킬 목록에서 후보를 찾습니다. 검색 결과만 믿고 바로 설치하기보다 설치 수, 만든 곳, 저장소 활동을 함께 확인하는 용도로 쓰는 것이 좋습니다.
design-taste-frontend
npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code --yes --copy이 저장소에는 여러 스킬이 들어 있습니다. 필요한 스킬 하나만 선택하려면 --skill 옵션을 빼지 마세요.
현재 design-taste-frontend의 기본 설치 대상은 v2 실험 버전입니다. 내용이 계속 바뀔 수 있으므로 팀 프로젝트에서는 변경 기록을 확인하세요. 기존 동작을 고정해야 한다면 공식 저장소가 제공하는 design-taste-frontend-v1 설치 옵션을 검토할 수 있습니다.
mcp-builder
npx --yes skills@latest add anthropics/skills --skill mcp-builder --agent claude-code --yes --copyMCP는 Claude가 외부 서비스의 기능을 도구처럼 사용할 수 있게 하는 공통 규격입니다. mcp-builder는 API 문서를 조사하고, 도구 이름과 입력값을 설계하고, 오류 메시지와 테스트까지 갖춘 MCP 서버를 만드는 과정을 안내합니다.
이 글은 --copy 옵션으로 스킬 파일을 프로젝트에 복사합니다. 복사본은 원본 저장소의 변경 사항을 자동으로 따라가지 않습니다. 업데이트가 필요하면 공식 변경 기록을 확인한 뒤 설치 명령을 다시 실행하세요.
3단계: GSD Core 설치
GSD Core 설치하기
GSD Core는 다른 네 개와 설치 방식이 다릅니다. 스킬 파일 하나만 추가하는 것이 아니라 긴 작업을 관리하는 명령과 기록 체계를 함께 설치합니다.
가장 안전한 시작 방법은 공식 대화형 설치 프로그램입니다.
npx --yes @opengsd/gsd-core@latest질문이 나오면 다음과 같이 선택합니다.
- Runtime: Claude Code
- Scope: Local
- 대상: 현재 작업 중인 프로젝트
명령 옵션을 직접 지정하려면 설치 프로그램이 제공하는 최신 도움말을 먼저 확인하세요.
npx --yes @opengsd/gsd-core@latest --help설치 후 새 프로젝트에서는 다음 명령을 사용합니다.
/gsd-new-project기존 프로젝트의 구조와 상태를 먼저 파악하게 하려면 다음 명령을 사용합니다.
/gsd-onboardGSD를 설치한 뒤 슬래시 명령이 바로 보이지 않는다면 Claude Code를 새로 시작하세요. 특히 실행 중에 최상위 .claude 폴더가 처음 만들어진 경우 재시작이 필요할 수 있습니다.
4단계: 설치 결과를 눈이 아니라 명령어로 확인하기
터미널에 성공 문구가 한 번 나왔다고 모든 연결이 끝난 것은 아닙니다. 폴더, 버전, 실제 동작을 차례로 확인합니다.
스킬 폴더 확인
ls .claude/skills다음 네 이름이 보여야 합니다.
agent-browser
design-taste-frontend
find-skills
mcp-builder개인 영역에 설치했다면 대신 다음 위치를 확인합니다.
ls ~/.claude/skillsAgent Browser 확인
agent-browser --version
agent-browser open https://example.com
agent-browser snapshot -i
agent-browser close버전만 확인하지 말고 실제 페이지를 열고 화면 요소를 읽을 수 있는지까지 확인합니다.
GSD Core 확인
다음 명령은 최신 설치 프로그램을 실행할 수 있는지만 확인합니다. 현재 프로젝트에 GSD가 설치됐다는 증거는 아닙니다.
npx --yes @opengsd/gsd-core@latest --help실제 설치 여부는 설치 범위에 맞는 명령 파일과 Claude Code의 슬래시 명령으로 확인합니다.
ls .claude/commands/gsd-*.md
ls ~/.claude/commands/gsd-*.md새 프로젝트는 /gsd-new-project, 기존 코드베이스는 /gsd-onboard가 인식되어야 합니다.
Claude에게 설치 목록 설명시키기
Claude Code에서 다음 프롬프트를 실행합니다.
현재 프로젝트와 개인 영역에 설치된 스킬 목록을 확인해 주세요.
각 스킬의 SKILL.md에서 이름과 설명만 읽고,
언제 사용하는지 한 줄씩 정리해 주세요.
파일은 수정하지 마세요.5단계: 다섯 도구를 실제로 써보는 프롬프트
작은 요청으로 먼저 검증하기
설치만 해두면 체감하기 어렵습니다. 작은 요청으로 하나씩 실행해 보세요.
agent-browser: 만든 화면 검증하기
로컬 개발 서버를 실행한 뒤 agent-browser로 첫 화면을 열어 주세요.
화면의 주요 버튼과 링크를 실제로 눌러 동작을 확인하세요.
회원가입 폼이 있다면 테스트 데이터로 작성하되
외부 서비스에 실제 데이터가 저장되기 전에는 멈춰 주세요.
데스크톱과 모바일 화면을 각각 캡처하고,
발견한 문제를 재현 순서와 함께 정리해 주세요.로그인이 필요한 서비스나 결제가 발생하는 동작은 자동으로 실행하지 않도록 경계를 적어주는 것이 좋습니다.
find-skills: 필요한 스킬 찾기
Next.js 프로젝트의 접근성과 성능을 점검하려고 합니다.
이미 공개된 스킬이 있는지 find-skills로 찾아주세요.
각 후보에 대해 다음을 알려주세요.
- 스킬 이름과 만든 곳
- 해결하는 문제
- 설치 수와 저장소 신뢰도
- 정확한 설치 명령어
- 이 프로젝트에 추천하는 이유
검색만 하고 아직 설치하지는 마세요.GSD Core: 긴 작업 시작하기
새 프로젝트라면 Claude Code에서 다음 명령으로 시작합니다.
/gsd-new-project질문에 답할 때는 기능 목록보다 성공 기준을 먼저 분명히 하면 좋습니다.
목표:
사용자가 운동 기록을 입력하고 주간 변화를 확인하는 웹앱을 만듭니다.
반드시 필요한 기능:
- 이메일 로그인
- 운동 기록 추가와 수정
- 주간 통계
- 모바일 화면
완료 기준:
- 핵심 사용자 흐름이 브라우저 테스트를 통과합니다.
- 새 대화에서도 결정한 요구사항과 진행 상태를 이어갈 수 있습니다.
- 배포 전 환경 변수와 보안 항목을 점검합니다.design-taste-frontend: 디자인 기본값 바꾸기
개발자를 위한 기술 블로그의 랜딩 페이지를 만들어 주세요.
design-taste-frontend의 기준을 적용하되
먼저 이 페이지에 맞는 디자인 방향을 한 문장으로 선언하세요.
원하는 인상:
- 차분하고 편집 디자인에 가까움
- 본문 가독성이 가장 중요함
- 기술적이지만 차갑지 않음
피할 것:
- 보라색이나 파란색 그라데이션
- 카드 안에 카드를 반복하는 구조
- 의미 없는 장식용 아이콘
- 과한 글래스모피즘
- 모든 요소에 들어가는 바운스 애니메이션
완성 후 agent-browser로 데스크톱과 모바일 화면을 직접 확인하고
가독성, 간격, 대비 문제를 수정해 주세요.디자인 스킬과 브라우저 검증을 함께 사용하면 지침을 읽는 데서 끝나지 않고 결과 화면까지 확인할 수 있습니다.
mcp-builder: 외부 서비스 연결하기
<서비스 이름>을 Claude Code에서 사용하고 싶습니다.
공식 API 문서는 <문서 주소>입니다.
mcp-builder의 절차에 따라 MCP 서버를 설계하고 구현해 주세요.
먼저 문서를 조사한 뒤 다음 내용을 제안해 주세요.
- 필요한 인증 방식과 환경 변수
- 제공할 도구 목록과 도구 이름
- 각 도구의 입력값과 반환값
- 읽기 작업과 쓰기 작업의 구분
- 페이지네이션과 오류 처리 방식
- 실제 연결을 확인할 최소 테스트
비밀키를 코드나 로그에 출력하지 마세요.
삭제, 결제, 발송처럼 되돌리기 어려운 작업은
사용자 확인 없이 실행하지 못하게 설계하세요.
구현 후 테스트 결과와 Claude Code 연결 방법을 알려주세요.자주 막히는 7가지
어떤 순서로 써야 할까?
다섯 개를 항상 동시에 사용할 필요는 없습니다.
작은 화면 수정이라면 design-taste-frontend로 기준을 잡고 agent-browser로 결과를 확인하면 충분합니다. 필요한 전문 기능이 없을 때 find-skills를 사용합니다. 여러 날에 걸친 프로젝트는 GSD Core로 작업 단계를 관리합니다. 외부 API를 Claude의 도구로 만들어야 할 때만 mcp-builder를 꺼냅니다.
정리하면 역할은 다음과 같습니다.
| 필요할 때 | 사용할 도구 |
|---|---|
| 만든 화면을 직접 확인할 때 | agent-browser |
| 필요한 스킬을 찾을 때 | find-skills |
| 긴 작업의 흐름을 관리할 때 | GSD Core |
| 디자인의 기본값을 바꿀 때 | design-taste-frontend |
| 외부 서비스를 연결할 때 | mcp-builder |
모델을 바꾸기 전에 먼저 부족한 기능이 무엇인지 살펴보세요. 필요한 능력을 정확한 위치에 하나씩 붙이는 편이 Claude Code를 훨씬 안정적으로 만드는 방법입니다.
처음에는 다섯 개를 한꺼번에 큰 프로젝트에 적용하지 마세요. 각 도구를 작은 요청으로 한 번씩 검증한 뒤 실제 작업에 연결하면 어디서 문제가 생겼는지 빠르게 찾을 수 있습니다.
마무리: 모델보다 먼저 작업 환경을 바꿔보세요
Claude Code가 답답할 때마다 더 강한 모델만 찾을 필요는 없습니다. 화면을 확인하는 기능, 작업을 기록하는 방식, 디자인 기준처럼 지금 빠져 있는 능력이 무엇인지 먼저 살펴보세요.
처음에는 가장 자주 겪는 문제 하나만 골라도 충분합니다. 화면 검증이 어렵다면 agent-browser부터, 긴 작업이 자꾸 흐트러진다면 GSD Core부터 설치해 보세요. 작은 작업으로 실제 작동을 확인한 다음 나머지 도구를 하나씩 추가하면 됩니다.
다섯 도구를 모두 외우는 것이 목표는 아닙니다. 필요한 순간에 알맞은 도구를 꺼내 쓰는 환경을 만드는 것이 핵심입니다.