【Claude Code】Agent에 설치해야 할 Skills 20선｜skills.sh 활용 가이드

요즘 Claude Code나 Copilot Agent 써보신 분들 많죠? 저도 최근에 본격적으로 써보기 시작했는데, 솔직한 느낌은 "기본 Agent, 생각보다 별로인데?"였습니다.

채팅은 된다. 코드도 생성해준다. 그런데… 프로덕션 레벨은 아니다.

예를 들면 이런 식이에요:

• 코드는 써주는데, 설계 패턴이 엉망
• 질문엔 답해주는데, 실무 베스트 프랙티스를 모름
• UI는 만들어주는데, 누가 봐도 디자인 초보가 만든 느낌

쉽게 말해서, 스마트폰을 샀는데 앱을 하나도 안 깐 상태. OS만 있고 쓸 수 있는 게 없는 거죠.

Skills가 뭔가요?

Skills는 플러그인이랑은 좀 다릅니다. Agent에 업계 베스트 프랙티스, 실무 프로젝트 경험치, 엔지니어링 제약 규칙, 구조화된 사고 프레임워크를 주입하는 거예요.

한마디로, Agent의 기본 실력 자체를 끌어올리는 장치입니다.

이번에 소개할 20개 Skills 중에서 먼저 앞의 5개만 설치해보세요. 체감이 확 달라집니다.

skills.sh에서도 이 5개가 설치 수 1위예요.

Skills 도입 시 보안 주의사항 (중요)

최근 Agent 생태계에서 악성 코드 삽입(일명 “Skill 오염 / 공급망 공격”) 사례가 보고되고 있습니다.
특히 npx 실행은 본질적으로 원격 코드를 가져와 즉시 실행하는 구조(Remote Code Execution) 이므로 공격 벡터가 될 수 있습니다.

예를 들어, :contentReference[oaicite:3]{index=3} 의 “Toxic Skills” 보고서에서는 일부 Skill이 외부 저장소를 통해 의도하지 않은 동작(데이터 전송, 권한 남용 등)을 수행할 수 있음을 지적하고 있습니다.

최소 확인 체크리스트:

• skills.sh 목록만으로 판단하지 말 것 (인기 ≠ 안전)
• 반드시 저장소 내부 코드 및 의존성 확인
• npx 실행 전에 “무엇이 실행되는지” 파악
• 출처가 불명확한 스크립트는 로컬이 아닌 sandbox 환경에서 검증

다음과 같은 Skill도 사용 전 반드시 내용을 확인하십시오:

• https://skills.sh/roin-orca/skills/simple

1. find-skills

가장 먼저 설치해야 할 Skills입니다. Agent가 스스로 다른 Skills를 검색하고 발견하고 추천해줄 수 있게 됩니다. 말하자면 스킬 전용 앱스토어를 Agent한테 달아주는 셈이죠.

npx skills add https://github.com/vercel-labs/skills --skill find-skills

2. vercel-react-best-practices

React / Next.js 퍼포먼스 튜닝에 특화된 64개 규칙이 8개 카테고리로 내장되어 있어요. 워터폴 제거, Server Components 최적화 등 자주 밟는 성능 지뢰를 전부 커버해줍니다.

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

3. frontend-design

Agent가 만들어주는 UI, 솔직히 "AI가 만든 티"가 나잖아요. 이 Skills를 설치하면 색상 조합, 레이아웃, 애니메이션 퀄리티가 눈에 띄게 좋아집니다. 뻔한 템플릿 느낌 없이, 제대로 된 UI를 뽑아줘요.

npx skills add https://github.com/anthropics/skills --skill frontend-design

4. web-design-guidelines

코드 리뷰할 때 필수입니다. 100개 이상의 웹 접근성·UX·퍼포먼스 규칙이 들어있어서, 기초적인 UX 실수를 잡아줘요. PR 리뷰 때 이거 하나만 있어도 훨씬 편해집니다.

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

5. remotion-best-practices

React로 숏폼 영상을 만들 수 있는 Remotion의 베스트 프랙티스 모음. 애니메이션, 익스포트, 성능 최적화까지 다 커버돼서, 영상 제작 초보도 금방 고퀄리티 숏폼을 만들 수 있어요.

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

6. brainstorming

Superpowers 프레임워크 기반으로, 구조화된 브레인스토밍·TDD·워크플로우 설계를 Agent한테 시킬 수 있습니다. "일단 아무거나 내놔" 대신 체계적으로 정리된 결과물이 나옵니다.

npx skills add obra/superpowers --skill brainstorming

7. agent-browser

브라우저 자동화를 해주는 Skills입니다. 웹 페이지 탐색, 폼 자동 입력, 스크린샷 캡처 등 손으로 하면 귀찮은 일들을 Agent한테 맡길 수 있어요.

npx skills add vercel-labs/agent-browser

8. browser-use

또 다른 강력한 브라우저 조작 Skills. Rust 구현이라 속도가 빠릅니다. agent-browser랑 같이 쓰면 복잡한 자동화 작업도 안정적으로 돌아가요.

npx skills add browser-use/browser-use

9. supabase-postgres-best-practices

Supabase + PostgreSQL 데이터베이스 최적화 가이드예요. SQL 안티패턴을 피하고 퍼포먼스를 끌어올리는 규칙들이 빼곡합니다. DB 쪽에서 삽질하기 싫으면 필수.

npx skills add supabase/agent-skills --skill supabase-postgres-best-practices

10. azure-cost-optimization

Azure 비용 최적화 룰셋입니다. 클라우드 청구서 보고 "이게 이렇게 많이 나와?"라고 놀란 적 있으시죠? 이 Skills를 설치해두면, 과금 폭탄 맞기 전에 대응할 수 있습니다.

npx skills add microsoft/github-copilot-for-azure --skill azure-cost-optimization

11. cloudflare/skills

Cloudflare Workers와 Edge Computing 베스트 프랙티스입니다. 최근 커뮤니티에서 엄청 화제인데, Vercel에서 넘어오는 개발자도 꽤 보여요. 엣지에서 돌리고 싶다면 이거.

npx skills add cloudflare/skills

12. redis/agent-skills

Redis 고급 사용 패턴과 안티패턴 모음. 캐시, 벡터 검색, 스트림 처리까지 커버합니다. Redis를 "그냥 캐시 용도"에서 졸업시켜 줘요.

npx skills add redis/agent-skills

13. vercel-composition-patterns

React 컴포지션 패턴 전용 베스트 프랙티스. 앞에서 소개한 vercel-react-best-practices랑 같이 쓰면 컴포넌트 설계가 한 단계 올라갑니다.

npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns

14. vercel-react-native-skills

React Native 공식 베스트 프랙티스 모음. 모바일 앱 개발하고 있다면 깔아두면 무조건 이득.

npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills

15. sleek-design-mobile-apps

모던하고 세련된 모바일 앱 디자인 가이드라인입니다. Agent가 만들어주는 앱 UI 퀄리티가 한 번에 올라갑니다. 촌스러운 UI하고는 이제 안녕.

npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps

16. ui-skills

UI 컴포넌트와 인터랙션 베스트 프랙티스. 최근 X(구 트위터)에서도 엄청 핫한데요, 디자이너 수준의 인터페이스를 AI한테 맡기고 싶다면 이거 하나면 충분합니다.

npx skills add ibelick/ui-skills

17. pdf

PDF 생성·파싱·처리를 Agent한테 맡기는 Skills. 보고서 작성이나 문서 처리 등 일상 업무에서 은근히 쓸 일이 많아요.

npx skills add anthropics/skills --skill pdf

18. seo-audit

웹사이트 SEO 감사와 개선 제안을 해주는 Skills입니다. 실제 프로젝트에 바로 적용할 수 있는 수준이고, 효과도 눈에 보여요.

npx skills add coreyhaines31/marketingskills --skill seo-audit

19. skill-creator

나만의 커스텀 Skills를 직접 만들 수 있게 해주는 Skills. 다른 사람 업데이트 기다릴 필요 없이, 필요한 기능은 직접 만들면 됩니다.

npx skills add anthropics/skills --skill skill-creator

20. code-review-expert

시니어 엔지니어처럼 코드 리뷰를 해줍니다. SOLID 원칙, 보안, 퍼포먼스 등 다양한 관점에서 체크해주기 때문에 PR 품질이 확실히 올라가요.

npx skills add sanyuan0704/code-review-expert

마무리

"Agent 성능 차이는 결국 모델 파라미터 수가 결정하는 거 아닌가요?"라고 생각하는 분들 꽤 계실 거예요.

근데 실제로 깊이 써보면, 진짜 차이를 만드는 건 규칙(Skills) 쪽이라는 걸 알게 됩니다.

모델은 하한선을 정한다. Skills는 상한선을 정한다.

도구는 점점 발전하고, 모델은 점점 커지겠죠. 하지만 앞으로 개발자에게 필요한 건 코드를 짜는 능력뿐만 아니라, Agent에 올바른 규칙을 정의하고 AI의 동작을 설계하는 능력이라고 생각합니다.

관심 가는 Skills가 있다면, 일단 하나만 설치해보세요. 체감이 달라질 겁니다.

---

이 글이 도움이 됐다면 공유 부탁드립니다. 추천할 만한 Skills가 있으면 댓글로 알려주세요!