Vercel Labs Agent-Skills 가이드
2026.01.21 10:26조회 424
·2026.01.21 10:26·조회 424
개요
vercel-labs/agent-skills는 Vercel Labs에서 개발한 "AI 에이전트용 npm" 패키지 매니저입니다.
- 저장소: https://github.com/vercel-labs/agent-skills
- 출시: 2026년 1월 (최신)
- 목적: AI 코딩 에이전트를 위한 기능 패키징 및 배포
- 라이선스: 오픈 소스
핵심 개념
"npm for AI Agents"
npm이 Node.js 패키지를 관리하듯, Agent Skills는 AI 에이전트 기능(Skills)을 관리합니다.
스킬(Skill)이란?
스킬은 AI 에이전트가 사용할 수 있는 재사용 가능한 기능 패키지입니다:
스킬(Skill) = 폴더 ├── 지침 (Instructions) ├── 스크립트 (Scripts, 선택) └── 리소스 (Resources, 선택)
목적: Vercel의 10년간 React/Next.js 최적화 경험을 AI 에이전트가 활용할 수 있도록 패키징
제공되는 Skills
react-best-practices (핵심 스킬)
React와 Next.js 애플리케이션을 위한 40개 이상의 성능 최적화 규칙
설치 대상:
- 새로운 React 컴포넌트 작성 시
- Next.js 페이지 생성 시
- 기존 코드 리팩토링 시
포함된 규칙 카테고리 (8개):
| 카테고리 | 설명 | 규칙 수 |
|---|---|---|
| Critical | 가장 높은 우선순위 | 최적화 핵심 |
| Waterfalls | 워터폴 제거 | 성능 병목 제거 |
| Bundle Size | 번들 크기 최적화 | 로드 시간 단축 |
| Rendering | 렌더링 최적화 | 렌더링 효율 |
| Data Fetching | 데이터 가져오기 | 서버 컴포넌트 최적화 |
| Async | 비동기 작업 | API 경로, 서버 액션 |
| CSS | 스타일 최적화 | DOM/CSS 배치 |
| UI Review | UI 검토 | UI 개선 제안 |
상세 규칙 목록
Critical (최우선)
| 규칙 | 설명 |
|---|---|
| Eliminate Waterfalls | 워터폴 제거로 성능 개선 |
| Bundle Size Optimization | 번들 크기 최적화 |
Rendering (렌더링)
| 규칙 파일 | 설명 |
|---|---|
rendering-hoist-jsx.md | 큰/정적 SVG 노드 등 JSX 호이스팅 |
| 렌더링 최적화 패턴 | 불필요한 리렌더링 제거 |
Bundle (번들)
| 규칙 파일 | 설명 |
|---|---|
bundle-conditional.md | 조건부 번들링 |
| 동적 import 지침 | 코드 분할 최적화 |
Data Fetching (데이터)
| 규칙 | 설명 |
|---|---|
| Server Components | 서버 컴포넌트 우선 사용 |
| Fetching Patterns | 데이터 가져오기 패턴 |
Async (비동기)
| 규칙 파일 | 설명 |
|---|---|
async-dependencies.md | 비동기 의존성 처리 |
async-api-routes.md | API 경로/서버 액션 비동기 처리 |
CSS
| 규칙 파일 | 설명 |
|---|---|
js-batch-dom-css.md | DOM/CSS 작업 배치 |
설치 방법
방법 1: npx add-skill (권장)
# Vercel Labs Agent Skills 설치 npx add-skill vercel-labs/agent-skills
특징:
- npm처럼 친숙한 명령어
- 자동으로 Claude Code skills 폴더에 설치
- 모든 호환 에이전트에서 작동
방법 2: Git 클론
# 1. 저장소 클론 git clone https://github.com/vercel-labs/agent-skills.git # 2. Skills 폴더로 복사 cp -r agent-skills/skills/react-best-practices ~/.claude/skills/ # 3. Claude Code 재시작
방법 3: 수동 설치
- GitHub 방문
- 원하는 스킬 폴더 다운로드
~/.claude/skills/에 복사- Claude Code 재시작
사용 방법
자동 로딩
설치된 스킬은 관련 작업 시 자동으로 로드됩니다:
사용자: "이 React 컴포넌트를 최적화해줘" ↓ Claude: react-best-practices 스킬 자동 로드 → 40개 규칙 기반으로 최적화 수행
UI Review 스킬
사용자: "내 UI를 검토해줘" ↓ Claude: UI Review 스킬 로드 → UI 개선 사항 제안
지원되는 AI 에이전트
| 에이전트 | 호환 여부 |
|---|---|
| Claude Code | ✅ 완전 호환 |
| Claude Desktop | ✅ 완전 호환 |
| Claude.ai | ✅ 완전 호환 |
| Cursor | ✅ 호환 |
| GitHub Copilot | ✅ 호환 |
| OpenCode | ✅ 호환 |
| VS Code | ✅ 호환 |
폴더 구조
agent-skills/ ├── skills/ │ └── react-best-practices/ │ ├── SKILL.md # 스킬 설명 │ ├── AGENTS.md # AI 에이전트용 지침 │ └── rules/ # 개별 규칙 │ ├── bundle-conditional.md │ ├── rendering-hoist-jsx.md │ ├── js-batch-dom-css.md │ ├── async-dependencies.md │ ├── async-api-routes.md │ └── ... │ └── README.md
주요 기능
1. React 컴포넌트 최적화
사용자: "이 컴포넌트의 성능을 개선해줘" Claude가 수행: - 불필요한 리렌더링 확인 - 번들 크기 분석 - 워터폴 제거 - 메모이제이션 추가 - 코드 분할 제안
2. Next.js 페이지 최적화
사용자: "Next.js 페이지를 최적화해줘" Claude가 수행: - 서버 컴포넌트 변환 - 데이터 가져오기 패턴 개선 - 이미지 최적화 - 폰트 최적화 - 라우팅 최적화
3. UI 검토
사용자: "UI를 검토해줘" Claude가 수행: - 접근성 확인 - 반응형 디자인 검토 - 성능 문제 식별 - 모범 사례 제안
사용 예시
예시 1: 새 컴포넌트 작성
사용자: "사용자 프로필 컴포넌트를 만들어줘"
Claude가 react-best-practices를 적용하여:
- 서버 컴포넌트로 작성 (데이터 fetching)
- 적절한 메모이제이션 추가
- 이미지 최적화 적용
- 번들 크기 고려한 import
예시 2: 기존 코드 리팩토링
사용자: "이 코드를 최적화해줘"
Claude가 수행:
- 워터폴 제거 기회 식별
- 불필요한 의존성 제거
- 렌더링 최적화
- 번들 크기 감소
예시 3: UI 개선
사용자: "이 UI를 개선할 방법을 제안해줘"
Claude가 제안:
- 접근성 개선사항
- 성능 최적화
- UX 향상
- React 모범 사례 적용
설치 후 확인
설치 확인
# Skills 폴더 확인 ls ~/.claude/skills/react-best-practices # 또는 Claude Code에서 /plugin list
동작 테스트
# React 관련 질문으로 스킬 로딩 확인 "React 컴포넌트에서 성능을 최적화하는 방법을 알려줘"
규칙 카테고리 상세
1. Critical (최우선)
목표: 가장 큰 성능 영향
| 규칙 | 설명 | 영향 |
|---|---|---|
| Eliminate Waterfalls | 요청-응답 워터폴 제거 | ⭐⭐⭐⭐⭐ |
| Bundle Size | 번들 크기 최적화 | ⭐⭐⭐⭐⭐ |
2. Waterfalls
목표: 네트워크 워터폴 제거
❌ 개선 전: 요청1 → 응답1 → 요청2 → 응답2 → 요청3 → 응답3 ✅ 개선 후: 요청1, 요청2, 요청3 → (병렬) → 응답1, 응답2, 응답3
3. Bundle Size
목표: 번들 크기 감소
- Tree shaking
- Code splitting
- Dynamic imports
- 중복 제거
4. Rendering
목표: 렌더링� 효율 개선
- 불필요한 리렌더링 제거
- JSX 호이스팅 (큰 SVG 등)
- 메모이제이션 전략
5. Data Fetching
목표: 데이터 가져오기 최적화
- Server Components 우선
- Streaming 사용
- 적절한 caching
6. Async
목표: 비동기 작업 최적화
- API Routes 최적화
- Server Actions 패턴
- 비동기 의존성 처리
7. CSS
목표: 스타일 최적화
- DOM/CSS 배치
- 중복 스타일 제거
- Critical CSS 추출
8. UI Review
목표: UI 품질 개선
- 접근성 (a11y)
- 반응형 디자인
- 사용자 경험
- 모범 사례
다른 스킬과의 비교
Vercel vs Anthropic
| 특징 | Vercel Labs | Anthropic |
|---|---|---|
| focus | React/Next.js | 문서, 창작, 개발 |
| 설치 | npx add-skill | /plugin install |
| 형식 | 전용 패키지 매니저 | Claude Skills 표준 |
| 규칙 수 | 40개 최적화 규칙 | 16개 기능 스킬 |
| 목표 | 성능 최적화 | 일반 작업 자동화 |
추가 리소스
공식 문서
가이드 & 튜토리얼
- How to Use Vercel Agent-Skills?
- How to Install Agent Skills (add-skill)
- Vercel Skills: AI Agent의 npm
뉴스 & 발표
한국어 자료
문제 해결
설치 실패
# Node.js 버전 확인 node --version # 18 이상 권장 # npm 최신 버전 npm install -g npm@latest # 재시도 npx add-skill vercel-labs/agent-skills
스킬이 로드되지 않음
# 1. 설치 확인 ls ~/.claude/skills/react-best-practices # 2. Claude Code 재시작 # 3. 캐시 삭제 rm -rf ~/.claude/cache/
빠른 참조
설치 명령어
# 기본 설치 npx add-skill vercel-labs/agent-skills # 특정 스킬만 npx add-skill vercel-labs/agent-skills#react-best-practices
사용 예시
| 작업 | 명령어 예시 |
|---|---|
| 컴포넌트 최적화 | "이 컴포넌트를 최적화해줘" |
| UI 검토 | "UI를 검토해줘" |
| 리팩토링 | "React 코드를 리팩토링해줘" |
| 성능 분석 | "성능 병목을 찾아줘" |
요약
Vercel Labs Agent-Skills란?
- "npm for AI Agents" - AI 에이전트용 패키지 매니저
- React/Next.js 전문 - 10년 경험을 40개 규칙으로 패키징
- 크로스 플랫폼 - Claude, Cursor, Copilot 등에서 작동
- 성능 중심 - 워터폴 제거, 번들 최적화, 렌더링 개선
핵심 스킬: react-best-practices
- 8개 카테고리, 40개 규칙
- Critical, Waterfalls, Bundle Size, Rendering 등
- 자동으로 적용되는 최적화 패턴
설치 3단계
npx add-skill vercel-labs/agent-skills- Claude Code 재시작
- React 작업 시 자동 적용
이 문서는 vercel-labs/agent-skills GitHub 저장소를 기반으로 작성되었습니다.
김성박
댓글
댓글을 작성하려면 이 필요합니다.