클로드 코드에 무조건 깔아야 하는 스킬 5개

역할: 클로드 코드 스킬 다섯 개의 설치와 연결 검증을 맡는 담당
맥락: 이 컴퓨터에는 다섯 개가 아직 설치되지 않았을 수 있고, 지금 클로드는 브라우저도 못 열고 디자인 기준도 없는 상태입니다
입력: <운영체제와 셸, 예: macOS zsh>, <기술 스택, 예: Next.js 웹 프로젝트>, <목표 한 줄, 예: 클로드가 화면을 직접 확인하고 작업 순서를 잃지 않게 만들고 싶다>
작업: 아래 네 단계를 순서대로 진행하세요.
1. 설치 여부 확인: `node --version`으로 22.20 이상인지 확인하고, `ls .claude/skills`와 `ls ~/.claude/skills`를 실행해 agent-browser, find-skills, design-taste-frontend, mcp-builder가 이미 있는지 확인하세요. `ls ~/.claude/commands/gsd-help.md`로 GSD 설치 여부도 확인하세요. 이미 있으면 다시 설치하지 말고 상태만 보고하세요.
2. 미설치 시 설치: 없는 것만 골라 실행하세요. `npx --yes skills@latest add vercel-labs/agent-browser --agent claude-code --yes --copy`, `npx --yes skills@latest add vercel-labs/skills --skill find-skills --agent claude-code --yes --copy`, `npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code --yes --copy`, `npx --yes skills@latest add anthropics/skills --skill mcp-builder --agent claude-code --yes --copy`. GSD는 방식이 다르므로 `npx --yes @opengsd/gsd-core@latest --claude --global`로 따로 설치하세요.
3. 연결 검증: `ls .claude/skills`를 실행해 네 개 이름이 모두 보이는지 확인하고, `npx --yes @opengsd/gsd-core@latest --help`가 버전 번호를 출력하는지 확인하세요. agent-browser 명령줄 도구를 함께 쓰려면 `npm install -g agent-browser && agent-browser install`을 실행한 뒤 `agent-browser --version`으로 확인하세요.
4. 마지막에 다섯 개가 각각 무엇을 해 주고 앞으로 어떻게 쓰면 되는지, 개발을 처음 하는 사람도 이해할 수 있는 말로 다섯 줄 이내로 설명하세요.
제약: 기존 파일과 설정을 덮어쓰거나 지우지 마세요. 이미 설치된 항목은 중복 설치하지 마세요. .env처럼 비밀키가 들어 있는 파일은 읽지도 출력하지도 마세요. 스킬 원본 파일을 임의로 수정하지 마세요.
출력: 실제로 실행한 명령어 목록, 확인된 Node 버전, 새로 생긴 폴더와 파일, 남아 있는 오류를 정리해 주세요.
검증: `ls .claude/skills`에 agent-browser, find-skills, design-taste-frontend, mcp-builder 네 개가 보이고, `npx --yes @opengsd/gsd-core@latest --help`가 버전 번호를 출력해야 합니다. 하나라도 실패하면 완료로 보고하지 말고 실패한 명령어와 원인, 다음 조치를 알려주세요.

Quick Start

• 공식 사이트: agent-browser.dev · skills.sh · opengsd.net
• 공식 GitHub: vercel-labs/agent-browser · vercel-labs/skills · open-gsd/gsd-core · Leonxlnx/taste-skill · anthropics/skills

작업할 프로젝트 폴더로 이동한 다음, 아래 네 줄을 터미널에 통째로 붙여넣으세요. 스킬 네 개를 이 프로젝트에 설치하는 명령어입니다.

npx --yes skills@latest add vercel-labs/agent-browser --agent claude-code --yes --copy
npx --yes skills@latest add vercel-labs/skills --skill find-skills --agent claude-code --yes --copy
npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code --yes --copy
npx --yes skills@latest add anthropics/skills --skill mcp-builder --agent claude-code --yes --copy

성공하면 ✓ agent-browser (copied)처럼 항목마다 복사 완료 줄이 하나씩 나옵니다.

다섯 번째인 GSD는 설치 방식이 다릅니다. 아래 한 줄을 따로 실행하세요.

npx --yes @opengsd/gsd-core@latest --claude --global

성공하면 설치 항목이 줄줄이 출력되고 마지막에 Done!과 함께 다음에 할 일이 안내됩니다.

설치가 됐는지 확인하는 명령어입니다.

ls .claude/skills

agent-browser, design-taste-frontend, find-skills, mcp-builder 네 이름이 나오면 성공입니다.

STEP 1. 준비물 확인: 2분

이 단계에서는 설치가 중간에 멈추지 않도록 Node.js 버전을 먼저 확인합니다. 다섯 개 모두 Node.js로 설치되고, 버전이 낮으면 명령어가 실패합니다.

용어: Node.js는 컴퓨터에서 자바스크립트를 실행해 주는 프로그램입니다. 여기서는 설치 명령어를 돌리는 데만 씁니다.

설치된 Node.js 버전을 확인하는 명령어입니다.

node --version

v22.20.0처럼 v로 시작하는 숫자가 나오면 됩니다. 앞자리가 22보다 작거나 명령어를 찾을 수 없다고 나오면 nodejs.org에서 LTS 버전을 먼저 설치하세요.

용어: 터미널은 명령어를 글로 입력하는 검은 창입니다. macOS는 터미널 앱, Windows는 PowerShell을 쓰면 됩니다.

클로드 코드가 설치돼 있는지도 확인합니다.

claude --version

숫자가 나오면 준비 끝입니다. 명령어를 찾을 수 없다고 나오면 claude.com/claude-code에서 먼저 설치하세요.

STEP 2. 스킬이 무엇인지 30초만: 2분

이 단계에서는 앞으로 설치할 것이 정확히 무엇인지 짚고 갑니다. 이걸 알면 나머지 단계가 전부 같은 모양으로 보입니다.

용어: 스킬은 AI에게 미리 읽히는 작업 지침서 파일입니다. 폴더 하나에 SKILL.md 파일 하나가 들어 있는 구조입니다.

스킬은 대화할 때마다 붙여넣는 프롬프트가 아닙니다. 한 번 설치하면 클로드가 필요할 때 알아서 꺼내 읽습니다. 추가 구독료도 없습니다.

설치 위치는 두 가지 중에 고릅니다. 아무 옵션도 주지 않으면 지금 폴더의 .claude/skills에 들어가고, -g를 붙이면 계정 전체가 쓰는 ~/.claude/skills에 들어갑니다.

처음이라면 프로젝트 설치로 시작하세요. 마음에 들면 나중에 -g를 붙여 계정 전체로 다시 설치하면 됩니다.

STEP 3. 브라우저를 쓰는 스킬: 3분

이 단계에서는 클로드가 만든 화면을 직접 열어 확인하게 만듭니다. 이게 없으면 클로드는 코드만 쓰고 결과를 보지 못한 채 다 됐다고 보고합니다.

agent-browser는 Vercel에서 만든 브라우저 자동화 도구입니다. 크롬을 열고, 클릭하고, 입력하고, 화면을 캡처하는 일을 클로드가 직접 합니다.

스킬을 설치하는 명령어입니다.

npx --yes skills@latest add vercel-labs/agent-browser --agent claude-code --yes --copy

성공하면 ✓ agent-browser (copied)와 함께 → ./.claude/skills/agent-browser 경로가 표시됩니다.

여기서 설치되는 스킬은 안내문 역할만 합니다. 실제로 브라우저를 움직이려면 명령줄 도구를 함께 설치해야 합니다.

npm install -g agent-browser
agent-browser install

첫 줄은 도구를 설치하고, 둘째 줄은 자동화 전용 크롬을 내려받습니다. 성공하면 설치 진행 표시가 지나가고 프롬프트가 돌아옵니다.

용어: 자동화 전용 크롬은 테스트 목적으로 배포되는 별도 크롬입니다. 평소 쓰는 크롬과 따로 설치돼서 로그인 상태나 북마크에 영향을 주지 않습니다.

설치 확인 명령어입니다.

agent-browser --version

버전 숫자가 나오면 준비 완료입니다. 이제 클로드에게 이렇게 요청할 수 있습니다.

로컬 개발 서버를 띄운 다음 agent-browser로 첫 화면을 열어 주세요.
회원가입 폼을 실제로 채워서 제출까지 해 보고,
막히는 지점이 있으면 화면을 캡처해서 무엇이 문제인지 알려 주세요.

리눅스에서는 필요한 시스템 파일이 빠져 있을 수 있습니다. 그럴 때는 아래 한 줄을 실행하세요.

agent-browser install --with-deps

STEP 4. 나머지 세 스킬 설치: 4분

이 단계에서는 스킬 탐색, 디자인, 도구 연결을 담당하는 세 개를 한 번에 넣습니다. 셋 다 같은 skills 명령어를 쓰기 때문에 형태가 똑같습니다.

첫 번째는 find-skills입니다. 만들고 싶은 것을 말하면 공개된 스킬 목록을 뒤져 알맞은 것을 추천하고 설치까지 해 줍니다.

npx --yes skills@latest add vercel-labs/skills --skill find-skills --agent claude-code --yes --copy

성공하면 ✓ find-skills (copied) 줄이 나옵니다.

두 번째는 Taste입니다. 저장소 안에 비슷한 스킬이 여러 개 들어 있어서 --skill로 하나만 골라야 합니다.

npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code --yes --copy

성공하면 ✓ design-taste-frontend (copied) 줄이 나옵니다. 옵션 없이 저장소를 통째로 설치하면 비슷한 스킬 네 개가 한꺼번에 들어오니 주의하세요.

세 번째는 mcp-builder입니다. Anthropic 공식 저장소에 들어 있고, 쓰고 싶은 서비스를 클로드에 연결하는 서버를 대신 만들어 줍니다.

npx --yes skills@latest add anthropics/skills --skill mcp-builder --agent claude-code --yes --copy

성공하면 ✓ mcp-builder (copied) 줄이 나옵니다.

용어: MCP는 클로드가 외부 서비스와 대화할 때 쓰는 공통 규격입니다. 이 규격에 맞춘 연결 프로그램을 서버라고 부릅니다.

STEP 5. GSD 설치: 3분

이 단계는 다른 네 개와 방식이 다릅니다. GSD는 스킬만 넣는 게 아니라 명령어와 작업 기록 폴더까지 함께 설치해야 해서 전용 설치 프로그램을 씁니다.

GSD는 긴 작업에서 클로드가 길을 잃지 않게 잡아 주는 도구입니다. 큰 작업을 단계로 쪼개고, 결정한 내용을 파일로 남기고, 각 단계를 새 대화에서 실행합니다.

계정 전체에 설치하는 명령어입니다.

npx --yes @opengsd/gsd-core@latest --claude --global

성공하면 설치 항목이 줄줄이 출력되고 마지막에 Done!이 나옵니다. 지금 프로젝트에만 넣고 싶다면 --global 대신 --local을 쓰세요.

설치되는 항목이 많다고 느껴지면 가벼운 구성만 고를 수 있습니다.

npx --yes @opengsd/gsd-core@latest --claude --global --profile=core

설치가 끝나면 클로드 코드를 완전히 종료했다가 다시 켜세요. 그다음 대화창에 아래를 입력합니다.

/gsd-new-project

명령어가 인식되면서 무엇을 만들지 묻는 질문이 나오면 성공입니다. 이미 있는 프로젝트에 붙이려면 /gsd-onboard를 대신 쓰세요.

참고: 예전에 쓰이던 저장소 주소는 2026년 6월에 보관 처리되어 더 이상 갱신되지 않습니다. 지금은 위 명령어의 @opengsd/gsd-core가 이어받아 관리되고 있습니다.

STEP 6. 설치 결과 확인: 2분

이 단계에서는 눈대중 대신 명령어로 확인합니다. 스킬은 조용히 설치되기 때문에 목록을 직접 봐야 확실합니다.

프로젝트에 설치한 스킬을 확인하는 명령어입니다.

ls .claude/skills

정상이라면 아래 네 이름이 모두 보입니다.

agent-browser
design-taste-frontend
find-skills
mcp-builder

계정 전체로 설치했다면 아래를 대신 확인하세요.

ls ~/.claude/skills

GSD가 설치됐는지 확인하는 명령어입니다.

npx --yes @opengsd/gsd-core@latest --help

버전 번호와 사용법이 출력되면 설치된 겁니다.

이름이 하나라도 빠졌다면 그 줄만 다시 실행하세요. 이미 설치된 항목은 그대로 유지됩니다.

STEP 7. 다섯 개를 실제로 써 보기: 5분

이 단계에서는 설치한 것들이 실제로 작동하는지 작은 요청으로 확인합니다. 처음부터 큰 작업을 시키면 어디서 막혔는지 알기 어렵습니다.

클로드 코드를 켜고 아래를 입력하세요. 설치 상태만 확인하는 요청입니다.

지금 이 프로젝트에 설치된 스킬 목록을 확인하고,
각각 무엇을 하는 도구인지 한 줄씩 정리해 주세요.
파일은 수정하지 마세요.

스킬 이름과 설명이 정리되어 나오면 클로드가 스킬을 읽고 있는 겁니다.

다음은 브라우저입니다. 만든 화면을 실제로 확인하게 시킵니다.

agent-browser로 <확인할 주소>를 열고 첫 화면을 캡처해 주세요.
버튼이 눌리는지, 링크가 실제로 이동하는지도 확인하고
문제가 있으면 어디가 문제인지 알려 주세요.

다음은 스킬 탐색입니다. 무엇이 필요한지만 말하면 됩니다.

<하고 싶은 작업>을 하려고 합니다.
쓸 만한 스킬이 이미 있는지 찾아보고,
설치 수와 만든 곳까지 같이 알려 주세요.

디자인은 만들 때 기준을 함께 주면 결과가 달라집니다.

<만들 화면 설명>을 만들어 주세요.
디자인 스킬의 기준을 따르고, 아래는 쓰지 마세요.
- 보라나 파랑 계열 그라데이션 배경
- 카드 안에 카드를 넣는 구조
- 튕기는 바운스 효과

도구 연결은 쓰고 싶은 서비스의 문서만 주면 됩니다.

<연결하고 싶은 서비스> 를 클로드에서 쓰고 싶습니다.
공식 API 문서는 <문서 주소>입니다.
MCP 서버를 만들어 주고, 다 만든 뒤 실제로 연결되는지 확인해 주세요.

자주 막히는 곳

이 다섯 개를 고른 이유

각각 다른 구멍을 메웁니다. 겹치는 게 없어서 다섯 개를 다 깔아도 서로 방해하지 않습니다.

브라우저 스킬은 확인을 담당합니다. 클로드가 만든 화면을 사람 대신 눌러 보기 때문에 다 됐다는 보고가 실제와 어긋나는 일이 줄어듭니다.

탐색 스킬은 찾는 시간을 줄입니다. 어떤 스킬이 있는지 몰라서 직접 다 만드는 상황을 막아 줍니다.

작업 관리 스킬은 긴 대화를 버티게 합니다. 결정한 내용을 파일로 남기니까 대화가 끊겨도 이어서 진행됩니다.

디자인 스킬은 기본값을 밀어냅니다. 기준이 없으면 AI는 늘 보던 화면으로 돌아가는데, 그 기준을 대신 세워 줍니다.

연결 스킬은 밖으로 나가는 통로를 냅니다. 쓰고 싶은 서비스를 클로드에 붙이는 작업이 문서 하나로 끝납니다.

공식 자료

• Agent Browser 공식 사이트: agent-browser.dev
• Agent Browser 저장소: github.com/vercel-labs/agent-browser
• Agent Browser 스킬 문서: agent-browser.dev/skills
• Skills CLI 저장소: github.com/vercel-labs/skills
• 스킬 검색 사이트: skills.sh
• GSD Core 공식 사이트: opengsd.net
• GSD Core 저장소: github.com/open-gsd/gsd-core
• Taste Skill 공식 사이트: tasteskill.dev
• Taste Skill 저장소: github.com/Leonxlnx/taste-skill
• Anthropic 공식 스킬 저장소: github.com/anthropics/skills
• 클로드 코드 스킬 문서: code.claude.com/docs/en/skills
• Node.js 내려받기: nodejs.org

이 자료가 도움됐다면

이런 AI 활용 자료를 인스타그램에 계속 올리고 있습니다.

• : 다음 자료를 가장 먼저 받아볼 수 있습니다
• 따라 하다 막힌 부분은 릴스 댓글로 남겨주세요. 다음 자료를 만들 때 참고합니다