🛠️ 02. skills.sh 설치 및 실행

“같은 AI 코딩 도구를 쓰는데 왜 어떤 사람은 결과가 깔끔하고, 어떤 사람은 매번 들쭉날쭉할까?”

핵심 원인은 모델이 아니라 운영 방식입니다.
skills.sh는 AI를 교체하는 도구가 아니라, AI에게 내 프로젝트 규칙과 작업 절차를 주입해서 결과 품질을 안정화하는 방법입니다.

안내: 본문에는 생성형 AI 도구를 활용한 요약/정리 내용이 포함되어 있습니다.

flowchart LR
A[기본 AI 코딩 도구] --> B{skills.sh 적용?}
B -- No --> C[범용 답변 / 품질 편차]
B -- Yes --> D[도메인 규칙 주입]
D --> E[일관성 상승]
D --> F[작업 속도 상승]
E --> G[실무 적용 쉬움]
F --> G

skills.sh가 뭐야?

skills.sh는 에이전트가 읽는 작업 지침(SKILL.md)을 설치해 주는 스킬 생태계입니다.

• npm이 코드 패키지를 설치한다면,
• skills.sh는 AI의 작업 습관 패키지를 설치합니다.

즉, 모델을 갈아끼우는 게 아니라 일하는 방식을 업그레이드합니다.

어떻게 작동해?

1. 스킬 설치 (npx skills add ...)
2. 스킬 지침 파일(SKILL.md)이 로컬에 저장
3. 에이전트가 작업 시 지침을 읽고 절차대로 실행

설치는 어떻게 해? (공식 CLI 기준)

skills.sh 공식 문서와 vercel-labs/skills README 기준으로, 아래 명령이 정확한 기본형입니다.

1) 기본 설치 (레포 단위)

npx skills add vercel-labs/agent-skills

2) 특정 스킬만 설치

npx skills add vercel-labs/agent-skills --skill frontend-design --skill skill-creator

3) 먼저 목록만 확인 (설치 안 함)

npx skills add vercel-labs/agent-skills --list

4) 특정 에이전트 대상으로 설치

npx skills add vercel-labs/agent-skills -a claude-code -a opencode

5) URL/로컬 경로로도 설치 가능

npx skills add https://github.com/vercel-labs/agent-skills
npx skills add ./my-local-skills

추천 스킬 (처음 시작할 때)

아래는 설치 수/활용도가 높은 편이라 초보자에게 추천하기 좋은 조합입니다.

1. find-skills (vercel-labs/skills)

• 역할: “내 작업에 맞는 스킬”을 다시 찾게 도와주는 검색 스킬
• 추천 이유: 처음엔 어떤 스킬을 써야 할지 모를 때 가장 유용

2. vercel-react-best-practices (vercel-labs/agent-skills)

• 역할: React/Next 계열에서 권장 패턴 중심으로 코드 품질 보정
• 추천 이유: 프론트엔드 결과물 편차를 줄이는 데 효과적

3. web-design-guidelines (vercel-labs/agent-skills)

• 역할: UI/레이아웃/가독성 가이드라인을 작업에 반영
• 추천 이유: “보기 좋은데 쓰기 불편한 UI”를 줄여줌

4. skill-creator (anthropics/skills)

• 역할: 직접 스킬을 만들거나 수정할 때 템플릿/구조 가이드 제공
• 추천 이유: 팀 전용 스킬을 만들기 시작할 때 필수

5. 문서 작업 스킬(docx, pptx, xlsx) (anthropics/skills)

• 역할: 문서/발표/스프레드시트 산출물 작업 보조
• 추천 이유: 코드 외 업무(보고서/자료)까지 한 흐름으로 연결 가능

운영 팁: 한 번에 5개 다 깔지 말고, find-skills + 1개로 시작해서 효과를 확인한 뒤 확장하세요.

활용 방법 (초보자 실전 시나리오)

여기서부터는 실제로 많이 묻는 질문인 **“find-skills를 어떻게 깔고, 어떻게 쓰고, 그 다음 스킬은 어떻게 이어서 설치하냐”**를 순서대로 설명합니다.

Step 1) find-skills 설치

# 1) 먼저 목록 확인
npx skills add vercel-labs/skills --list
 
# 2) find-skills 설치
npx skills add vercel-labs/skills --skill find-skills

Step 2) find-skills 사용

설치 후 에이전트에 이렇게 요청합니다.

• “내 프로젝트가 Next.js + Tailwind인데 필요한 스킬 3개 추천해줘”
• “지금 작업(랜딩 페이지 개선)에 맞는 skills를 우선순위로 추천해줘”

find-skills가 좋은 이유:

• 초보자가 “무엇을 깔아야 할지” 막힐 때 탐색 시간을 줄여줌
• 과설치를 줄이고, 목적에 맞는 스킬만 고르게 도와줌

Step 3) 추천받은 다음 스킬 설치 (예: React)

# 레포 내 스킬 목록 확인
npx skills add vercel-labs/agent-skills --list
 
# React 권장 스킬 설치
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

설치 후 바로 이렇게 사용:

• “이 컴포넌트를 React best practice 기준으로 리팩터링해줘”
• “App Router 규칙 기준으로 구조를 정리해줘”

Step 4) 다음 스킬 추가 (예: 디자인)

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

설치 후 사용 예시:

• “이 대시보드 UI를 가독성/간격/계층 기준으로 개선해줘”
• “모바일 우선으로 폼 레이아웃 다시 짜줘”

Step 5) 전/후 비교로 효과 확인

같은 요청을 설치 전/후로 비교해 아래 4가지만 체크:

1. 정확성 (요구사항 충족)
2. 일관성 (스타일/패턴 통일)
3. 속도 (수정 횟수 감소)
4. 재현성 (다시 실행해도 비슷한 품질)

Step 6) 팀 기본 세트로 고정

검증된 스킬 3~5개를 “팀 기본 세트”로 문서화해서 신규 프로젝트마다 동일하게 적용합니다.

왜 효과가 좋아지나?

기본 모델은 일반 지식으로 답하지만, 스킬을 넣으면 프로젝트 맥락(규칙/패턴/제약)이 추가됩니다.

결과적으로:

• 출력 편차 감소
• 재현성 증가
• 반복 작업 속도 개선

안전 수칙 (중요)

1. 공식/신뢰 조직 스킬 우선
2. 설치 수·최근 업데이트 확인
3. 설치 전 SKILL.md 직접 읽기

체크리스트:

• 과설치 안 했는가? (처음엔 1~2개)
• SKILL.md 확인했는가?
• 전/후 비교했는가?
• 팀 공용 스킬 목록 기록했는가?

바로 쓰는 복붙 프롬프트

• “내 프로젝트 기준으로 필요한 스킬 3개를 효과/위험/난이도 순으로 추천해줘.”
• “추천 스킬 중 공식 벤더 + 검증도 높은 것만 설치 우선순위를 짜줘.”
• “설치 전/후 결과를 항목별로 비교해줘.”

한 줄 결론

skills.sh는 AI의 성능 자체를 바꾸는 도구가 아니라, AI를 실무형으로 튜닝하는 운영 레버입니다.

다음 편

• 🛠️ 03. 클로드코드 스킬 활용

---

출처

• skills.sh CLI 문서: https://skills.sh/docs/cli
• Vercel skills CLI README: https://github.com/vercel-labs/skills