🤯 Vercel Agent Skills: 표준화인가, Vercel 천하통일인가?

GitHub: vercel-labs/agent-skills

1. Vercel이 또? 이번엔 "AI 에이전트의 뇌"를 노린다 🧠

Vercel이 Agent Skills를 내놨다. 단순히 "에이전트에게 능력을 설치한다"는 개념을 넘어, MCP (Model Context Protocol) 생태계의 주도권을 잡겠다는 의도가 보인다.

쉽게 말해 "Claude Code 같은 에이전트들이 코딩할 때, 우리가 정한 규칙대로 하게 만들겠다!"라고 선언한 셈이다.

복잡하게 설정할 필요 없다. 터미널 기반의 에이전트인 Claude Code와 궁합이 찰떡이다.

Claude Code: Anthropic이 최근 내놓은 터미널 기반 에이전트. (아직 안 깔았다면 npm install -g @anthropic-ai/claude-code)
Node.js 16.0 이상

Claude Code를 실행한 상태에서(혹은 일반 터미널에서) 딱 한 줄만 입력하면 된다.

npx add-skill vercel-labs/agent-skills

이걸 실행하면 마법 같은 일이 일어난다. Claude Code가 갑자기 'Vercel 수석 엔지니어'의 시각을 갖게 된다.

작동 원리 거창한 플러그인을 설치하는 게 아니다. Vercel이 검수한 '모범 답안지(Markdown)'를 Claude Code가 참조할 수 있는 형태로 다운로드하는 것이다. 이제 Claude Code는 코드를 짤 때마다 이 답안지를 컨닝한다.

이걸 단순한 '오픈소스 기여'로 보면 순진한 거다. 데이터를 보면 Vercel이 왜 이러는지 답이 나온다.

Next.js 점유율 폭주: 2024년 기준 웹 프레임워크 상위권(약 17.9%)을 차지하며, 사실상 현대 웹 개발의 표준이 됐다.
몸값 3배 떡상: AI 코드 생성 도구 'v0'가 대박을 치면서 Vercel의 기업 가치는 2024년 5월 $3.25B에서 2025년 9월 $9.3B (약 13조 원)으로 3배 가까이 뛰었다.
수익 모델의 변화: 단순 호스팅 팔던 회사에서, 이제 "AI가 짠 코드를 가장 잘 돌려주는 플랫폼"으로 진화하고 있는 거다.

react-best-practices 스킬의 내용을 보라.

Claude Code가 이 스킬을 배우면 배울수록, 뱉어내는 코드는 'Vercel에 배포해야만 성능이 나오는' 형태가 된다. AI를 통해 전 세계 코드를 'Vercel 최적화'로 만들어버리는 것. 이게 그들의 큰 그림이다.

우리는 이 거인들의 싸움에서 이득(Benefit)만 챙기면 된다. Vercel이 수억 원 들여 정리한 '1타 강사의 노트'가 공짜로 풀린 거니까.

npx로 스킬을 설치했다면, 이제 Claude Code에게 이렇게 시켜보자.

프롬프트 예시:

"방금 설치한 web-design-guidelines 스킬을 기준으로, 내 랜딩 페이지의 UX를 점검해줘."

그러면 Claude Code는 단순한 "좋아 보이네요" 식의 답변이 아니라, Vercel이 정의한 100가지 체크리스트(접근성, 모션, 타이포그래피 등)를 기준으로 아주 깐깐하게 피드백을 줄 것이다.

바이브 코딩 팁:

배포도 말로 해라: vercel-deploy-claimable 스킬 덕분에, "이거 배포해줘"라고 하면 즉시 Vercel URL을 뱉어낸다.
성능 최적화: "이 페이지가 느린 것 같아"라고 하면 react-best-practices를 참고해서 "Waterfall 현상이 의심됩니다"라고 전문가처럼 진단한다.

이제 내 옆에 연봉 2억짜리 멘토를 앉혀두고 코딩하는 셈이다.