Claude Code
Part 2 · Claude 확장하기Chapter 6 · Rules와 Skills

기존 Skill 가져다 쓰기 | Skill 설치하기

Anthropic 공식 Plugin과 커뮤니티 레지스트리 skills.sh로 이미 만들어진 Skill을 설치하고 직접 만들 때와 가져다 쓸 때를 구분하는 방법을 익힙니다

Overview

앞 레슨에서 내 Skill을 직접 만들어 봤지만, shadcn·PDF 처리·브라우저 자동화 같은 범용 기능은 이미 누군가 만들어 둔 것을 가져다 쓰는 편이 빠릅니다. 이번 레슨은 Claude Code 기본 번들 Skill을 가볍게 호출해 보고, 두 가지 설치 경로 Plugin(Anthropic 공식)과 skills.sh(Vercel 커뮤니티 레지스트리)로 외부 Skill을 가져옵니다. 마지막으로 "언제 직접 만들고 언제 가져다 쓰는가"의 판단 기준을 정리합니다.

학습 목표

  • Claude Code 기본 번들 Skill을 호출해 봅니다
  • 두 가지 설치 경로(Plugin·skills.sh)로 외부 Skill을 가져옵니다
  • 직접 만들기와 가져다 쓰기를 상황별로 구분합니다

시작하기 전 확인사항

  • 실습 프로젝트의 시작 브랜치로 전환합니다 (git checkout ch06-05)

ch06-05 브랜치에는 앞 레슨에서 만든 .claude/skills/commit/ 이 포함돼 있습니다.

설치 없이 쓸 수 있는 기본 Skill

두 설치 경로를 둘러보기 전에, Claude Code 패키지 안에 이미 들어 있는 번들 Skill부터 익혀 봅니다. 별도 설치 없이 바로 호출할 수 있고, "Skill이 어떤 모양인지"를 가장 빠르게 체감하는 방법입니다.

명령어무엇을 하는가언제 쓰면 좋은가
/simplify최근 변경 파일을 3개 에이전트가 병렬 리뷰해 재사용·품질·효율 이슈를 찾고 자동 수정기능 작업이 끝나갈 때 코드 정리용
/debug디버그 로깅을 켜고 세션 로그를 분석Claude의 동작이 이상해 원인을 보고 싶을 때

/simplify 사용해 보기

최근 변경한 파일이 있을 때 다음 한 줄로 자동 코드 리뷰를 받을 수 있습니다.

/simplify

특정 파일에 집중하고 싶다면 파일 경로를 붙입니다.

/simplify @app/page.tsx

3개의 리뷰 에이전트가 병렬로 ① 재사용 가능한 코드, ② 코드 품질, ③ 효율성을 각각 점검한 뒤 결과를 모아 수정 제안을 적용합니다. Skill을 직접 만들거나 외부에서 가져오지 않아도 이런 작업을 바로 할 수 있습니다.

Step 1: Plugin 마켓 열어 보기

Claude Code 안에서 /plugin 을 입력하면 플러그인 관리 화면이 열립니다.

/plugin

Plugin은 Claude Code 전용 확장 패키지입니다. Skill 뿐 아니라 Commands, MCP 서버, Hooks까지 하나의 번들로 묶어서 배포합니다. 예를 들어 team-toolkit 같은 plugin을 쓰면 팀의 Skill, Command, MCP, Hooks 설정을 한 번에 묶어 배포할 수 있습니다.

Anthropic이 관리하는 공식 마켓플레이스가 기본으로 등록돼 있습니다. 공식 외에도 누구나 GitHub 저장소로 Plugin 마켓플레이스를 만들어 배포할 수 있습니다.

첫날부터 써온 `/qna` 가 이런 plugin 이었습니다

강의 시작부터 한국어 질문을 받아준 /qna 도 사실 plugin 으로 들어왔습니다. 실습 저장소(todo-tutorial)의 .claude/settings.jsonenabledPluginsplaybook-essentials@claude-code-playbook 이 등록돼 있고, 이 plugin 의 marketplace 는 GitHub 저장소(toy-crane/claude-code-playbook) 입니다. 위에서 말한 "GitHub 저장소로 만든 마켓플레이스"의 가장 가까운 예시이며, 저장소를 clone 한 순간 자동으로 활성화돼 첫날부터 강의 Q&A 도우미를 쓸 수 있었습니다.

Step 2: Plugin이 번들로 묶는 것들

Plugin = 번들
team-toolkit
Anthropic 공식 Plugin
/plugin
Skills
/code-style
Commands
/run-eval
MCP 서버
team-db
Hooks
pre-commit
하나의 Plugin 에 Skills · Commands · MCP · Hooks 가 함께 번들됩니다 (skills.sh 는 SKILL.md 파일 하나만 설치)

Marketplaces 탭에서 등록된 마켓플레이스 목록을 볼 수 있고, 각 마켓에서 설치 가능한 Plugin을 둘러봅니다. 하나의 Plugin을 설치하면 그 안에 담긴 Skill·Command·MCP·Hooks가 함께 따라옵니다. Plugin은 Skill 외에 Command·MCP·Hooks처럼 다른 종류의 확장을 함께 묶고 싶을 때 씁니다.

설치된 Plugin은 Installed 탭에서 확인합니다. Plugin 안에 포함된 각 항목을 분리해서 볼 수 있습니다.

Step 3: skills.sh로 커뮤니티 Skill 설치하기

두 번째 설치 경로는 skills.sh입니다. Vercel이 운영하는 Skill 디렉토리입니다. Anthropic 공식 Skill부터 커뮤니티 Skill까지 검색하고 설치할 수 있습니다. Plugin과 달리 Skill 폴더 하나 단위로 설치합니다.

shadcn/ui 컴포넌트를 Todo 앱에 적용하는 shadcn Skill을 설치합니다.

bunx skills add https://github.com/shadcn-ui/ui --skill shadcn

명령어를 실행하면 세 가지 선택 화면이 순서대로 나타납니다.

  1. 에이전트 선택: 화살표 키로 이동 후 스페이스바로 Claude Code (.claude/skills) 를 선택하고 Enter
  2. 설치 범위: Project 선택 (프로젝트의 .claude/skills/ 에만 설치)
  3. 설치 방법: Symlink 또는 Copy. 기본값인 Symlink 를 그대로 두고 Enter

Symlink (심볼릭 링크) 란?

파일의 바로가기입니다. 윈도우 바탕화면의 바로가기 아이콘과 같은 개념으로, 실제 파일은 한 곳(~/.agents/skills/<skill>)에 한 벌만 두고 .claude/skills/ 같은 다른 위치는 그 본체를 가리키기만 합니다.

한 컴퓨터에서 Claude Code 와 Cursor 를 함께 쓴다면 두 도구가 같은 본체를 공유합니다. 한 곳에서 Skill 파일을 수정하면 양쪽 모두 같은 변경을 봅니다.

Enter 전에 스페이스바를 눌러야 합니다

에이전트 선택 단계에서 Enter만 누르면 아무것도 선택되지 않은 채 넘어가 설치가 실패합니다. 반드시 스페이스바로 원하는 에이전트를 먼저 체크해야 합니다.

Step 4: shadcn Skill로 Todo UI 개선하기

설치 후 Claude에게 자연어로 요청하면 shadcn Skill이 자동으로 활성화됩니다.

Shadcn Best Practice 참고해서 UI 개선해줘

또는 registry 탐색까지 맡길 수 있습니다.

registry 를 탐색해서 이 프로젝트에 맞는 컴포넌트를 찾고, UI 전체를 개선해줘

shadcn의 registry 란?

shadcn/ui는 복사해서 쓰는 UI 컴포넌트 모음입니다. Registry는 이 컴포넌트들이 등록된 저장소로, shadcn 공식 외에도 커뮤니티가 만든 registry가 많습니다. 커뮤니티 registry를 쓰려면 components.json 에 별도로 등록해야 합니다.

Skill이 로드되면 Claude는 shadcn 컴포넌트의 전제(디자인 토큰, 컴포지션 규칙)를 따라 제안합니다. 컴포넌트를 추가할 때마다 "이 스타일을 따라줘"라고 매번 말할 필요가 없습니다.

같은 방식으로 설치할 수 있는 커뮤니티 Skill

Skill하는 일추천 프롬프트
vercel-react-best-practicesVercel이 관리하는 React/Next.js 모범 사례"React Best Practice 참고해서 컴포넌트 구조 개선해줘"
agent-browserClaude가 브라우저를 직접 조작해 테스트·폼 입력·스크린샷"localhost:3000 열어서 Todo 추가·삭제 기능 테스트해줘"
web-design-guidelines타이포그래피·색상·레이아웃 원칙"웹 디자인 가이드라인 참고해서 랜딩 페이지 만들어줘"
defuddle웹 페이지에서 광고·네비게이션 제거하고 본문만 Markdown으로 추출"이 URL 내용 정리해줘"

Plugin vs skills.sh: 5가지 차이

Plugin (/plugin)skills.sh (bunx skills add)
운영Anthropic (공식 마켓)Vercel
대상 에이전트Claude Code 전용Claude Code·Cursor·Copilot 등 다수
설치 단위번들 (Skills + Commands + MCP + Hooks)Skill 폴더 하나
설치 방식Claude Code 안에서 /plugin터미널에서 bunx skills add
업데이트/plugin 에서 Installed 항목 재설치bunx skills add 재실행

Plugin은 Skill 외 확장(Command·MCP·Hooks)까지 묶을 수 있는 Claude Code 전용 패키지입니다. 팀이 쓰는 Skill·Command·MCP·Hooks 를 한 번에 배포하고 싶을 때 적합합니다.

skills.sh는 Skill 폴더 하나만 설치합니다. shadcn처럼 특정 프레임워크의 모범 사례를 담은 단일 지침에 적합합니다.

직접 만들기 vs 가져다 쓰기

상황선택
프로젝트 고유의 규칙 (배포 절차, 코드 컨벤션)직접 만들기
범용 기능 (PDF 처리, 문서 생성, 브라우저 자동화)가져다 쓰기
팀 내부 워크플로우 (리뷰 절차, 릴리스 체크리스트)직접 만들기

프로젝트에 특화된 지식은 직접 만들 수밖에 없습니다. 범용 기능은 공식 Plugin이나 skills.sh를 먼저 찾아본 뒤, 없을 때만 직접 만드는 것이 효율적입니다.

핵심 포인트 정리

  1. 설치 경로는 두 개: Anthropic 공식 Plugin(/plugin)은 번들을, skills.sh(bunx skills add)는 Skill 폴더 하나를 설치합니다.
  2. 가져다 쓸 때는 범용 / 직접 만들 때는 고유: 프로젝트 고유 규칙·팀 워크플로우는 직접, 범용 기능은 가져다 씁니다.

FAQ

  • Q: Plugin과 skills.sh 둘 다 같은 Skill을 제공하면요?

    • A: 먼저 확인하는 건 Plugin입니다. 공식 Anthropic Plugin이 있다면 업데이트 주기가 빠르고 Claude Code 호환성이 검증됩니다. 없을 때 skills.sh로 넘어갑니다.
  • Q: 설치한 Skill이 자동 로드되지 않는데요?

    • A: 해당 Skill의 SKILL.md를 열어 description 을 확인합니다. 긍정 트리거가 너무 좁게 적혀 있으면 자동 호출이 안 됩니다. 사용자가 /skill-name 으로 직접 부르는 것으로 먼저 테스트한 뒤, description을 보강합니다.

이어서 배울 내용

직접 만들기와 가져다 쓰기를 모두 경험했습니다. 그런데 만든·가져온 Skill이 실제로 의도대로 동작하는지 어떻게 확인할까요? "잘 되는 것 같은데?"와 "10번 중 10번 통과"는 다릅니다. 다음 레슨에서는 Eval로 Skill 품질을 객관적으로 측정하고, Skill을 고쳤을 때 실제로 개선됐는지 비교하는 방법을 익힙니다.

  • Eval의 세 조각: 테스트 프롬프트 / 기대 결과 / 판정
  • "수정 전 vs 수정 후" A/B 비교로 개선 확인
  • Skill Creator의 Improve 기능으로 Eval 자동 실행

On this page