🚀 02. Agent Skills

트렌드-02-agent-skills-diagram.svg

🎣 “AI가 React 모범 사례를 모른다고? 한 줄이면 10년 경력이 된다.”

---

🤔 이게 뭔데?

Agent Skills는 AI 에이전트를 위한 npm 같은 것이다.

npx skills add vercel-labs/agent-skills

이 한 줄로 AI 에이전트가 갑자기 10년차 React 개발자처럼 행동한다.

Vercel의 Guillermo Rauch가 2026년 1월에 발표했고, “npm for AI Agents”라는 별명이 붙었다.

---

💡 왜 중요해?

문제: AI는 “최신”을 모른다

LLM은 훈련 데이터 시점까지만 안다.

• 2024년에 훈련된 모델 → 2025년 React 패턴 모름
• Next.js 15 기능? 몰라
• 최신 Vercel 배포 방식? 몰라

해결: 스킬로 지식 주입

스킬은 패키지화된 지식이다:

• 지침 (SKILL.md)
• 스크립트 (scripts/)
• 참고 문서 (references/)

설치하면 AI가 바로 그 지식을 활용한다.

---

🛠️ 설치 및 사용법

Step 1: 스킬 검색

npx skills find

인터랙티브하게 검색하며 스킬 탐색.

Step 2: 스킬 설치

npx skills add vercel-labs/agent-skills

또는 특정 스킬만:

npx skills add vercel-labs/agent-skills/react-best-practices

Step 3: 자동 적용

설치 후 AI 에이전트가 관련 작업을 감지하면 자동으로 스킬 적용.

예:

• “이 React 컴포넌트 리뷰해줘” → react-best-practices 자동 적용
• “내 앱 배포해줘” → vercel-deploy-claimable 자동 적용

---

📦 Vercel 공식 스킬 목록

1. react-best-practices (핵심!)

10년간의 Vercel Engineering 노하우

40+ 규칙, 8개 카테고리:

우선순위	카테고리
🔴 Critical	워터폴 제거, 번들 사이즈 최적화
🟠 High	서버 사이드 성능
🟡 Medium-High	클라이언트 데이터 페칭
🟢 Medium	리렌더 최적화, 렌더링 성능
🔵 Low	JavaScript 마이크로 최적화

사용 시점:

• 새 React 컴포넌트 작성할 때
• 데이터 페칭 구현할 때
• 코드 리뷰할 때
• 번들 사이즈 줄일 때

---

2. web-design-guidelines

100+ UI 규칙 자동 감사

체크하는 것들:

• ✅ 접근성 (aria-labels, 시맨틱 HTML)
• ✅ 포커스 상태 (visible focus)
• ✅ 폼 (autocomplete, validation)
• ✅ 애니메이션 (prefers-reduced-motion)
• ✅ 타이포그래피 (curly quotes, tabular-nums)
• ✅ 이미지 (lazy loading, alt text)
• ✅ 다크 모드

사용 예:

“내 UI 리뷰해줘” “접근성 체크해줘” “디자인 감사해줘”

---

3. react-native-guidelines

모바일 앱 최적화

16개 규칙, 7개 섹션:

• 성능 (FlashList, memoization)
• 레이아웃 (flex, safe areas)
• 애니메이션 (Reanimated, 제스처)
• 이미지 (expo-image, 캐싱)

---

4. composition-patterns

Boolean Props 지옥 탈출

// ❌ Before: prop 지옥
<Button primary large disabled loading withIcon />
 
// ✅ After: 합성 패턴
<Button variant="primary" size="large">
  <Button.Icon name="loading" />
</Button>

---

5. vercel-deploy-claimable

대화에서 바로 배포

“내 앱 배포해줘”

AI가:

1. 프로젝트 패키징
2. 프레임워크 자동 감지 (Next.js, Vite, Astro 등 40+)
3. Vercel에 배포
4. URL 반환

Preview URL: https://my-app-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...

Claim URL로 본인 Vercel 계정으로 소유권 이전 가능!

---

🌐 커뮤니티 스킬: Smithery

Vercel 공식 외에도 Smithery 같은 MCP 마켓이 있다.

커뮤니티가 만든 다양한 스킬:

• 특정 프레임워크 전문 스킬
• 회사별 코딩 컨벤션
• 언어별 베스트 프랙티스

---

🔧 스킬 구조

직접 스킬 만들고 싶다면:

my-skill/
├── SKILL.md          # AI에게 주는 지침
├── scripts/          # 자동화 스크립트 (선택)
│   └── deploy.sh
└── references/       # 참고 문서 (선택)
    └── patterns.md

SKILL.md 예시

## My Custom Skill
 
## When to use
- 사용자가 "X 해줘"라고 할 때
- 프로젝트에 Y 파일이 있을 때
 
## Instructions
1. 먼저 A를 확인하라
2. B 패턴을 적용하라
3. C를 피하라
 
## Examples
...

---

🎬 실제 사용 시나리오

시나리오 1: React 프로젝트 최적화

## 스킬 설치
npx skills add vercel-labs/agent-skills/react-best-practices
 
## AI에게 요청
> "이 컴포넌트 성능 최적화해줘"
 
## AI가 자동으로:
## - 워터폴 패턴 감지
## - 번들 사이즈 분석
## - 리렌더 최적화 제안

시나리오 2: 원클릭 배포

## 스킬 설치
npx skills add vercel-labs/agent-skills/vercel-deploy-claimable
 
## AI에게 요청
> "이거 배포해줘"
 
## AI가 자동으로:
## - 프레임워크 감지
## - 빌드
## - Vercel 배포
## - URL 제공

---

⚠️ 주의사항

1. 스킬 충돌

여러 스킬이 같은 상황에 적용되면 충돌 가능.

• 해결: 우선순위 설정 또는 특정 스킬만 활성화

2. 버전 관리

스킬도 코드처럼 버전이 있다.

npx skills add vercel-labs/agent-skills@1.2.0

3. 27개 에이전트 지원

Skills v1.1.1 기준 지원 에이전트:

• Claude Code
• Cursor
• GitHub Copilot
• Codex
• 등 27개

---

✨ 한줄 정리

“AI 에이전트의 역량도 npm처럼 설치하는 시대. 모르면 가르쳐주고, 부족하면 스킬로 채운다.”

---

🔗 참고 자료

• GitHub: vercel-labs/agent-skills
• Vercel Changelog: Skills v1.1.1
• Agent Skills 공식 사이트
• Smithery MCP 마켓

---

📚 시리즈 목차

• Day 1: Ralph Wiggum Pattern
• Day 2: Agent Skills ← 현재 글
• Day 3: Orchestration Tools
• Day 4: Sub-agents
• Day 5: Beads & Gas Town
• Day 6: OpenClaw