Vercel Agent Skills로 Claude Code를 훨씬 더 강력하게 만드는 방법
원제 · How I Made Claude Code WAY Better With Vercel Agent Skills
핵심 요약
Vercel의 간편한 스킬 설치 시스템과 Cloudflare의 자동 탐색 제안은 AI 에이전트의 능력을 극대화하며 개발 생태계를 혁신하고 있습니다.
하이라이트
Vercel의 'Skills By The Cell'을 통한 에이전트 능력 확장 방법
Claude Code 및 Cursor 등 다양한 AI 에이전트와의 호환성
단계적 공개(Progressive Disclosure) 기법을 활용한 효율적인 컨텍스트 관리
npx add-skill 명령어를 이용한 간편한 스킬 설치 및 자동 감지 기능
Cloudflare가 제안한 .well-known 경로 기반의 새로운 스킬 탐색 방식
중소 개발자와 대기업 간의 스킬 배포 방식 차이 및 상생 가능성
에러 모니터링 도구인 Better Stack의 AI 기반 추적 기능 소개
타임라인
에이전트 스킬 소개 및 작동 원리
영상은 Vercel이 제공하는 에이전트 스킬 디렉토리인 'Skills By The Cell'을 소개하며 시작됩니다. 이 시스템은 React 숙련도를 높이거나 모션 그래픽 에디터 기능을 추가하는 등 AI 에이전트의 역할을 다양하게 변신시킬 수 있습니다. 기술적으로는 .cloud 디렉토리 내에 skills.md 파일을 생성하고 YAML 형식의 프런트 매터를 포함하는 구조로 작동합니다. 사용자는 이 파일을 통해 에이전트에게 필요한 구체적인 지침과 설명을 전달할 수 있습니다. 결과적으로 개발자는 복잡한 설정 없이도 에이전트의 작업 수행 능력을 비약적으로 향상시킬 수 있게 됩니다.
단계적 공개 기법과 컨텍스트 로드 방식
에이전트 스킬의 핵심 매력은 '단계적 공개(Progressive Disclosure)'라는 효율적인 정보 전달 기법에 있습니다. 처음에는 스킬의 이름과 설명이 담긴 프런트 매터 정보만 컨텍스트에 로드하여 불필요한 자원 낭비를 방지합니다. 이후 에이전트가 사용자 프롬프트를 분석하여 특정 스킬이 필요하다고 판단할 때만 나머지 상세 지침을 활성 컨텍스트에 추가합니다. 이 방식은 모델의 제한된 컨텍스트 창을 효율적으로 사용하면서도 깊이 있는 참조 자료를 활용할 수 있게 해줍니다. 이를 통해 대규모 프로젝트에서도 AI가 혼란 없이 정확한 정보를 바탕으로 답변을 생성할 수 있습니다.
Vercel의 'Add Skill' 프로젝트와 설치 자동화
기존에는 여러 에이전트에 스킬을 설치하기 위해 매번 레포지토리를 클론해야 하는 번거로움이 있었습니다. Vercel은 이를 해결하기 위해 'npx add-skill' 명령어로 16가지 이상의 에이전트에 스킬을 즉시 추가할 수 있는 시스템을 구축했습니다. 이 도구는 자동으로 사용자의 개발 환경을 스캔하여 Cursor(.cursor)나 Claude Code(.claude) 같은 에이전트의 설정 위치를 찾아냅니다. 또한 심볼릭 링크를 생성하여 파일 관리를 일원화하고 설치 프로세스를 극도로 단순화했습니다. 이러한 자동화는 개발자가 도구 설정에 들이는 시간을 줄이고 실제 코딩 작업에 집중할 수 있도록 돕습니다.
스킬 탐색 플랫폼 skills.sh와 텔레메트리
설치된 스킬들을 한눈에 확인하고 새로운 기능을 찾을 수 있는 'skills.sh' 웹사이트의 역할에 대해 설명합니다. 이 플랫폼은 사용자들이 설치한 스킬 정보를 익명의 텔레메트리 데이터를 통해 수집하여 실시간 인기 목록을 구성합니다. 텔레메트리는 스킬의 다운로드 횟수나 에이전트별 사용량을 파악하는 데 사용되며, 개인 정보 보호를 위해 비활성화 옵션도 제공합니다. 현재 React Native나 ReMotion 같이 영상 제작을 돕는 강력한 스킬들이 활발하게 공유되고 있습니다. 사용자들은 이 커뮤니티 주도형 목록을 통해 검증된 스킬을 손쉽게 발견하고 자신의 워크플로우에 적용할 수 있습니다.
Cloudflare의 새로운 제안과 미래 전망
Cloudflare는 특정 URL의 '.well-known' 경로에서 index.json 파일을 가져와 스킬을 자동으로 탐색하는 대안적인 방식을 제안했습니다. 이 방식은 에이전트가 실시간으로 필요한 기술을 검색하고 캐싱하여 사용할 수 있게 해주지만, 소규모 개발자에게는 호스팅의 번거로움을 줄 수 있습니다. 발표자는 Vercel의 커뮤니티 중심 방식과 Cloudflare의 기업 표준 방식이 서로 보완하며 상생할 수 있을 것으로 내다봅니다. 영상의 마지막에는 프로젝트 진행 중 발생할 수 있는 오류를 추적하기 위한 Better Stack 도구를 추천하며 마무리됩니다. 결국 이러한 기술적 경쟁과 협업이 AI 개발 생태계를 더욱 풍요롭게 만들 것이라는 메시지를 전달합니다.
설명
AI 개발 생태계가 완전히 뒤바뀌었습니다. Vercel의 새로운 Agent Skills 에코시스템은 Claude Code를 비롯한 코딩 에이전트와 협업하는 방식을 근본적으로 변화시키고 있습니다. Skills CLI 도구를 사용하면 명령어 하나로 기능을 설치할 수 있고, skills.sh 마켓플레이스에서 새로운 스킬을 찾아볼 수도 있습니다. 하지만 최근 Cloudflare가 .well-known URI를 사용하는 완전히 다른 방식의 RFC(Agent Skills Discovery via Well-Known URIs)를 제안했습니다. 이 방식이 도입된다면 Vercel의 중앙 집중식 디렉토리 모델이 구식이 될 수도 있습니다. 🔗 관련 링크 Cloudflare 제안서 - [https://github.com/cloudflare/agent-skills-discovery-rfc?tab=readme-ov-file](https://github.com/cloudflare/agent-skills-discovery-rfc?tab=readme-ov-file) Vercel skills - [https://vercel.com/changelog/introducing-skills-the-open-agent-skills-ecosystem](https://vercel.com/changelog/introducing-skills-the-open-agent-skills-ecosystem) shades 2134의 인트로 프론트엔드 디자인 - [https://www.reddit.com/user/shades2134/](https://www.reddit.com/user/shades2134/) Magnus의 Remotion 예시 - [https://x.com/mamagnus00/status/2014459283560358034](https://x.com/mamagnus00/status/2014459283560358034) ❤️ Better Stack 소개 혁신적인 옵저버빌리티 스택: [https://betterstack.com/](https://betterstack.com/) 텍스트 튜토리얼: [https://betterstack.com/community/](https://betterstack.com/community/) 예제 프로젝트: [https://github.com/BetterStackHQ](https://github.com/BetterStackHQ) 📱 소셜 미디어 Twitter: [https://twitter.com/betterstackhq](https://twitter.com/betterstackhq) Instagram: [https://www.instagram.com/betterstackhq/](https://www.instagram.com/betterstackhq/) TikTok: [https://www.tiktok.com/@betterstack](https://www.tiktok.com/@betterstack) LinkedIn: [https://www.linkedin.com/company/betterstack](https://www.linkedin.com/company/betterstack) 📌 챕터: 0:00 인트로 0:26 Agent Skills 요약 2:05 Vercel의 add-skill 프로젝트 2:58 스킬 탐색을 위한 Skills.sh 4:00 Cloudflare의 제안 4:21 Cloudflare 제안의 작동 원리 5:11 제안된 방식의 문제점