Claude Code 처음이라면 먼저 설치할 스킬 5가지

Claude Code를 설치했는데 막상 무엇부터 시켜야 할지 모르겠다면, 스킬부터 깔아보세요. 스킬은 Claude에게 특정 작업을 잘하는 방법을 가르쳐 두는 설명서 묶음입니다. 한 번 설치해 두면 "랜딩페이지 만들어줘"라고만 해도 Claude가 해당 스킬의 순서와 규칙을 따라 일합니다.

이 글에서는 공개 스킬 디렉터리(skills.sh)와 GitHub에서 많이 쓰이는 스킬 중, 처음 쓰는 사람에게 특히 쓸모 있는 5가지를 골라 설치 방법과 활용 예시를 정리했습니다.

먼저 준비할 것

• PC(윈도우 또는 맥)와 Claude Code: 스킬은 PC에서 돌아가는 Claude Code에 설치합니다. Claude Code 설치는 공식 문서(docs.claude.com)를 따르세요.
• Node.js: 스킬 설치 도구가 Node.js로 돌아갑니다. nodejs.org에서 LTS 버전을 설치하세요. 아래 5번째 스킬(HyperFrames)은 Node.js 22 이상이 필요합니다.
• FFmpeg: 영상을 만드는 HyperFrames를 쓸 때만 필요합니다.

터미널(윈도우는 명령 프롬프트나 PowerShell)에서 아래 명령으로 Node.js 버전을 확인할 수 있습니다. v22보다 낮거나 명령을 찾을 수 없다고 나오면 새로 설치하세요.

node -v

한눈에 보는 추천 스킬 5가지

설치하는 가장 쉬운 방법: Claude Code에게 맡기기

Claude Code를 열고 아래 지시문을 그대로 붙여 넣으세요. Claude가 명령어를 하나씩 실행하고, 오류가 나면 이유를 설명하고 고쳐줍니다. 중간에 실행 허락을 물으면 내용을 읽고 허용하면 됩니다.

아래 스킬들을 Claude Code에 설치해줘. 명령어는 하나씩 실행하고,
오류가 나면 이유를 쉬운 말로 설명한 다음 고쳐줘.

1. node -v 로 버전을 확인하고, 22보다 낮으면 Node.js LTS 설치 방법을 알려줘.
2. 아래 명령을 순서대로 실행해줘.
   npx skills add vercel-labs/skills --skill find-skills -g -a claude-code -y
   npx skills add anthropics/skills --skill skill-creator --skill frontend-design -g -a claude-code -y
   npm install -g agent-browser
   agent-browser install
   npx skills add vercel-labs/agent-browser -g -a claude-code -y
3. HyperFrames는 공식 안내대로 플러그인으로 설치해줘.
   claude plugin marketplace add heygen-com/hyperframes
   claude plugin install hyperframes@hyperframes
   FFmpeg가 없으면 내 운영체제에 맞게 설치해줘. (윈도우: winget install Gyan.FFmpeg)
4. 끝나면 설치된 스킬 이름을 표로 보여주고, Claude Code를 다시 켜라고 알려줘.

명령어에 쓰인 옵션의 의미는 이렇습니다. -g는 어느 폴더에서 Claude Code를 켜도 쓸 수 있게 사용자 전체에 설치, -a claude-code는 Claude Code용으로 설치, -y는 확인 질문을 건너뛴다는 뜻입니다.

설치 확인하기

스킬은 Claude Code를 다시 켜야 인식됩니다. 창을 닫고 새로 연 뒤 이렇게 물어보세요.

지금 설치된 스킬 목록을 보여줘

다섯 가지 이름이 보이면 성공입니다. 안 보인다면 터미널도 새로 열어보세요. Node.js를 방금 설치했다면 새 터미널에서만 인식되는 경우가 많습니다.

스킬별로 바로 써보기

1. find-skills: 필요한 스킬을 대신 찾아주기

어떤 스킬이 있는지 몰라도 됩니다. 하고 싶은 일을 말하면 찾아서 비교해 줍니다.

우리 회사 제품 소개 랜딩페이지를 만들 때 도움이 되는 스킬을 찾아줘.
많이 쓰이는 순서로 3개를 비교해서 보여주고, 내가 고르면 설치해줘.

주의: 공개 스킬은 누구나 올릴 수 있습니다. 설치 전에 만든 곳과 설명을 확인하고, 잘 모르는 스킬이 컴퓨터 설정을 바꾸려 하면 멈추세요.

2. skill-creator: 반복 업무를 나만의 스킬로 만들기

매주, 매일 하는 일이 있다면 스킬로 만들어 두세요. 다음부터는 한 줄 지시로 같은 품질의 결과가 나옵니다.

skill-creator로 스킬을 하나 만들고 싶어.
매주 월요일에 지난주 매출 엑셀 파일 3개를 합쳐서
전주 대비 증감표와 3줄 요약을 만드는 작업이야.
필요한 정보는 먼저 질문해줘.

3. frontend-design: AI 티 안 나는 화면 만들기

AI에게 웹페이지를 맡기면 비슷비슷한 디자인이 나오기 쉽습니다. 이 스킬은 주제에 맞는 디자인 방향을 먼저 세우고 만든 뒤 스스로 점검하게 합니다. 이 블로그의 디자인을 개편할 때도 이 스킬의 원칙을 참고했습니다.

frontend-design 스킬로 동네 꽃집의 모바일 홈페이지를 만들어줘.
만들기 전에 색, 글꼴, 레이아웃 계획을 먼저 보여주고,
완성 후에는 스크린샷을 찍어서 스스로 점검해줘.

4. agent-browser: Claude가 직접 웹사이트 돌아보기

Claude가 실제 브라우저를 열고 여러 사이트를 돌아다니며 정보를 모아 옵니다. 시장 조사나 가격 비교처럼 손이 많이 가는 일에 유용합니다.

agent-browser로 아래 3개 업체 홈페이지에 들어가서
기본 요금제 가격과 포함 기능을 표로 정리해줘.
확인한 날짜와 페이지 주소도 함께 적어줘.
[업체 주소 1] [업체 주소 2] [업체 주소 3]

주의: 실제 브라우저를 움직이는 도구입니다. 은행이나 결제처럼 돈이 오가는 사이트, 로그인이 필요한 작업에는 쓰지 말고 직접 처리하세요.

5. HyperFrames: 웹 화면을 홍보 영상으로

HTML과 CSS로 만든 화면과 애니메이션을 MP4 영상으로 렌더링하는 도구입니다. 짧은 제품 소개 영상이나 SNS용 세로 영상을 만들 때 쓸 수 있습니다.

/hyperframes:hyperframes 로 15초짜리 세로(9:16) 홍보 영상을 만들어줘.
내용: [제품 이름]의 핵심 기능 3가지를 한 장면씩 보여주고 마지막에 사이트 주소.
글자는 휴대폰에서 읽히게 크게, 완성되면 mp4 파일로 저장해줘.

한눈에 정리

• 스킬은 Claude Code에 작업 요령을 가르쳐 두는 설명서입니다. 설치 후 Claude Code를 다시 켜야 적용됩니다.
• 설치는 지시문 하나를 붙여 넣어 Claude Code에게 맡기는 것이 가장 쉽습니다.
• find-skills로 찾고, skill-creator로 내 업무를 스킬로 만들고, frontend-design으로 화면 품질을 올리세요.
• agent-browser는 조사 업무에 유용하지만 금융·결제 사이트에서는 쓰지 마세요.
• HyperFrames는 Node.js 22 이상과 FFmpeg가 필요합니다.

자주 묻는 질문

Q. 스킬은 무료인가요? A. 소개한 스킬은 모두 GitHub에 공개되어 있어 무료로 설치할 수 있습니다. 다만 Claude Code 자체는 Claude 유료 요금제나 API 사용이 필요합니다. 요금제 조건은 공식 안내를 확인하세요.

Q. 일반 Claude 대화창(claude.ai)에서도 쓸 수 있나요? A. 대화창에서도 스킬 기능을 쓸 수 있지만, 이 글의 설치 방법은 PC의 Claude Code 기준입니다. agent-browser나 HyperFrames처럼 내 컴퓨터에서 프로그램을 실행해야 하는 스킬은 Claude Code에서 쓰는 것이 맞습니다.

Q. 설치 중에 오류가 나면 어떻게 하나요? A. 오류 메시지를 그대로 복사해서 Claude Code에 "이 오류 원인과 해결 방법을 알려줘"라고 하세요. 대부분 Node.js 버전이 낮거나, 설치 직후 터미널을 다시 열지 않아서 생깁니다.