DEV Community

Cover image for AI 코딩 에이전트용 스킬 마켓플레이스 (몰랐으면 손해)
@kiwibreaksme
@kiwibreaksme

Posted on

AI 코딩 에이전트용 스킬 마켓플레이스 (몰랐으면 손해)

#ai #programming #productivity #webdev

AI 코딩 에이전트 쓰면서 이런 생각 해본 적 있음?

"React 베스트 프랙티스 매번 설명하기 귀찮은데..."
"Tailwind 쓰는 규칙 어디 저장해두고 싶다..."
"다른 사람들은 어떻게 설정해서 쓰지?"

이미 다 만들어져 있습니다.

skills.sh가 뭔데?

🔗 skills.sh 바로가기

The Open Agent Skills Ecosystem

AI 에이전트(Claude Code, Cursor, Copilot 등)에 전문 지식을 주입하는 스킬 마켓플레이스입니다.

쉽게 말해:

  • 🧠 남들이 만든 베스트 프랙티스를 내 AI에 장착
  • ⚡ 설치 1분, 복잡한 설정 없음
  • 🔓 오픈소스, 무료

지원하는 AI 에이전트

에이전트 지원
Claude Code ✅
Cursor ✅
GitHub Copilot ✅
Gemini ✅
OpenAI Codex ✅
+15개 이상 ✅

거의 모든 AI 코딩 도구에서 작동합니다.

인기 스킬 TOP 10

순위 스킬 설치 수 용도
1️⃣ vercel-react-best-practices 32.6K React 베스트 프랙티스
2️⃣ web-design-guidelines 24.7K 웹 디자인 가이드
3️⃣ remotion-best-practices 12.7K 영상 편집 (Remotion)
4️⃣ frontend-design 4.0K 프론트엔드 디자인
5️⃣ skill-creator 2.6K 스킬 만드는 스킬
6️⃣ vue-best-practices 2.1K Vue.js
7️⃣ three-js-best-practices 1.8K Three.js 3D
8️⃣ supabase-best-practices 1.5K Supabase
9️⃣ marketing-guidelines 1.2K 마케팅
🔟 tailwind-best-practices 1.0K Tailwind CSS

React 쓰는 개발자 3만 명이 이미 쓰고 있음.

설치 방법

방법 1: CLI (추천) 

npx skills add vercel-labs/vercel-react-best-practices
Enter fullscreen mode Exit fullscreen mode

한 줄이면 끝.

방법 2: Claude Code 내에서 

/skills install vercel-labs/vercel-react-best-practices
Enter fullscreen mode Exit fullscreen mode

설치 확인 

/skills
Enter fullscreen mode Exit fullscreen mode

실제로 어떻게 작동하나?

Before (스킬 없이) 

나: React 컴포넌트 만들어줘

Claude: (그냥 기본적인 코드 생성)
Enter fullscreen mode Exit fullscreen mode

After (스킬 설치 후) 

나: React 컴포넌트 만들어줘

Claude: (Vercel의 베스트 프랙티스 적용)
- 함수형 컴포넌트
- TypeScript 타입 정의
- 적절한 훅 사용
- 성능 최적화 고려
- 접근성 고려
Enter fullscreen mode Exit fullscreen mode

같은 질문, 다른 품질.

추천 스킬 조합

🎨 프론트엔드 개발자 

npx skills add vercel-labs/vercel-react-best-practices
npx skills add vercel-labs/web-design-guidelines
npx skills add vercel-labs/frontend-design
Enter fullscreen mode Exit fullscreen mode

⚡ Next.js + Supabase 

npx skills add vercel-labs/vercel-react-best-practices
npx skills add supabase/supabase-best-practices
Enter fullscreen mode Exit fullscreen mode

🎬 영상 편집 (Remotion) 

npx skills add remotion-dev/remotion-best-practices
Enter fullscreen mode Exit fullscreen mode

🎯 Vue.js 개발자 

npx skills add vuejs/vue-best-practices
Enter fullscreen mode Exit fullscreen mode

🌐 풀스택 

npx skills add vercel-labs/vercel-react-best-practices
npx skills add supabase/supabase-best-practices
npx skills add vercel-labs/web-design-guidelines
Enter fullscreen mode Exit fullscreen mode

스킬 구조 (궁금한 사람만)

스킬은 결국 SKILL.md 파일 하나입니다.

my-skill/
├── SKILL.md           # 핵심 (필수)
├── reference.md       # 상세 문서 (선택)
├── examples.md        # 예제 (선택)
└── scripts/           # 스크립트 (선택)
Enter fullscreen mode Exit fullscreen mode

SKILL.md 예시 

---
name: react-best-practices
description: React 베스트 프랙티스. 컴포넌트 작성 시 자동 적용.
---

## 컴포넌트 작성 규칙

1. 함수형 컴포넌트 사용
2. Props는 TypeScript 인터페이스로 정의
3. useState보다 useReducer (복잡한 상태)
4. useEffect 의존성 배열 명시
5. 메모이제이션은 필요할 때만

## 금지 사항

- class 컴포넌트
- any 타입
- 인라인 스타일 (Tailwind 사용)
Enter fullscreen mode Exit fullscreen mode

AI가 이 파일을 읽고 규칙을 따릅니다.

내 스킬 만들기

남의 거 쓰는 것도 좋지만, 내 프로젝트 전용 스킬도 만들 수 있음.

Step 1: 폴더 생성 

mkdir -p .claude/skills/my-rules
Enter fullscreen mode Exit fullscreen mode

Step 2: SKILL.md 작성 

---
name: my-rules
description: 우리 팀 코딩 규칙
---

## 필수 규칙

1. 변수명은 camelCase
2. 함수는 20줄 이하
3. 주석은 "왜"를 설명
4. 에러 핸들링 필수

## 금지

- console.log (프로덕션)
- any 타입
- 매직 넘버
Enter fullscreen mode Exit fullscreen mode

Step 3: 끝

이제 코드 짤 때 자동으로 적용됨.

skills.sh vs 직접 프롬프트

항목 직접 프롬프트 skills.sh
매번 입력 필요 ❌ 불필요
일관성 🔴 낮음 🟢 높음
공유 어려움 ✅ 쉬움
검증됨 ❌ ✅ 커뮤니티 검증
설치 - 1분

자주 묻는 질문

무료인가요?
네, 오픈소스 기반이라 무료입니다.

어떤 AI에서 작동하나요?
Claude Code, Cursor, Copilot, Gemini 등 20개 이상 지원합니다.

스킬끼리 충돌하나요?
보통 안 합니다. 각 스킬은 특정 도메인에 집중하도록 설계되어 있습니다.

내가 만든 스킬 공유할 수 있나요?
네, GitHub에 올리고 skills.sh에 등록하면 됩니다.

요약

할 일 명령어
스킬 설치 npx skills add owner/repo
설치 목록 확인 /skills
스킬 직접 호출 /skill-name
내 스킬 만들기 .claude/skills/name/SKILL.md

시작하기

1분이면 됩니다.

# 가장 인기 있는 React 스킬 설치
npx skills add vercel-labs/vercel-react-best-practices
Enter fullscreen mode Exit fullscreen mode

이제 React 코드 짜면 자동으로 Vercel 베스트 프랙티스가 적용됩니다.

링크

🔗 skills.sh - 스킬 마켓플레이스
🔗 skills.sh 문서
🔗 Claude Code Skills 공식 문서

어떤 스킬 쓰고 계신가요?

👇 댓글로 추천해주세요!

Top comments (0)