AI Vercel Agent

Vercel Agent Skills: AI 코딩 에이전트를 위한 전문 지식 스킬 컬렉션

Vercel Labs가 공개한 Agent Skills는 AI 코딩 에이전트에게 React, Next.js 최적화, 웹 디자인 가이드라인, 배포 자동화 등의 전문 지식을 부여하는 스킬 컬렉션입니다.

d

devfreshi85

Author

Published

Mar 02, 2026

들어가며

AI 코딩 에이전트가 등장한 이후, 개발 워크플로우는 근본적으로 변화하고 있습니다. GitHub Copilot, Claude, ChatGPT 같은 도구들은 단순한 코드 자동완성을 넘어 복잡한 프로그래밍 작업을 수행하기 시작했습니다. 하지만 이러한 AI 에이전트는 범용적인 지식에 기반하므로, 특정 프레임워크나 플랫폼에 대한 심도 있는 전문 지식이 부족할 수 있습니다.

Vercel Labs가 공개한 Agent Skills는 이러한 문제를 해결하기 위해 탄생했습니다. 이는 AI 코딩 에이전트에게 특정 도메인의 전문 지식을 “스킬” 형태로 제공하는 컬렉션입니다. React와 Next.js 성능 최적화, 웹 접근성 가이드라인, 그리고 Vercel 배포 자동화까지, AI 에이전트가 마치 시니어 개발자처럼 행동할 수 있도록 돕습니다.

Vercel Agent Skills GitHub Repository Vercel Labs Agent Skills - AI 코딩 에이전트를 위한 스킬 컬렉션

Agent Skills란 무엇인가?

개념 정의

Agent Skills는 AI 코딩 에이전트의 기능을 확장하는 패키지화된 지침과 스크립트입니다. 각 스킬은 특정 작업 영역에 대한 전문 지식을 담고 있으며, AI 에이전트가 해당 작업을 수행할 때 자동으로 참조됩니다.

이는 마치 숙련된 개발자가 내비게이션을 참조하는 것과 유사합니다. 일반적인 코딩 지식은 있지만, 특정 프레임워크의 모범 사례나 최적화 기법은 별도의 문서를 참조해야 하는 상황에서, Agent Skills가 그 역할을 대신합니다.

Agent Skills Specification

Agent Skills는 에이전트 스킬 사양(Agent Skills Specification) 을 따릅니다. 이는 스킬이 AI 에이전트에 통합되는 방식을 표준화한 규격으로, 서로 다른 AI 에이전트에서도 동일한 스킬을 사용할 수 있게 합니다.

현재 이 사양을 완벽하게 지원하는 대표적인 에이전트는 Claude와 Claude Desktop입니다. 향후 더 많은 AI 에이전트가 이 표준을 채택할 것으로 예상됩니다.

스킬 구조

각 스킬은 다음과 같은 구조로 구성됩니다:

skill-name/
├── SKILL.md          # 핵심 지침 (필수)
├── scripts/          # 자동화 스크립트 (선택)
│   ├── deploy.sh
│   └── validate.sh
└── references/       # 참조 문서 (선택)
    └── examples.md
  • SKILL.md: 사람이 읽을 수 있는 형식의 지침 파일. 에이전트가 작업을 수행할 때 참조하는 핵심 문서입니다.
  • scripts/: 자동화 스크립트. 배포, 검증 등의 작업을 자동으로 수행합니다.
  • references/: 추가 참조 문서. 예제 코드나 심화 가이드를 포함합니다.

사용 가능한 스킬

Vercel Labs의 Agent Skills 저장소는 현재 5개의 공식 스킬을 제공합니다:

1. react-best-practices

목적: React 및 Next.js 성능 최적화 가이드라인

규모: 40개 이상의 규칙, 8개 카테고리

사용 시점:

  • 새로운 React 컴포넌트나 Next.js 페이지 작성 시
  • 클라이언트/서버 사이드 데이터 페칭 구현 시
  • 성능 이슈 코드 리뷰 시
  • 번들 크기 또는 로드 타임 최적화 시

카테고리 (영향도 순):

카테고리 영향도 설명
워터폴 제거 Critical 순차적 데이터 페칭을 병렬로 전환
번들 크기 최적화 Critical 코드 분할 및 동적 import
서버 사이드 성능 High SSR/SSG 최적화
클라이언트 데이터 페칭 Medium-High SWR, React Query 활용
리렌더링 최적화 Medium 메모이제이션 패턴
렌더링 성능 Medium 가상화, 레이아웃 스래싱 방지
JavaScript 마이크로 최적화 Low-Medium 클로저, 루프 최적화

2. web-design-guidelines

목적: 웹 인터페이스 모범 사례 준수 검사

규모: 100개 이상의 규칙

사용 시점:

  • “내 UI 검토해줘”
  • “접근성 확인해줘”
  • “디자인 감사해줘”
  • “UX 검토해줘”
  • “모범 사례 준수 확인해줘”

카테고리:

카테고리 주요 규칙
접근성 (Accessibility) ARIA 속성, 시맨틱 HTML, 키보드 핸들러
포커스 상태 (Focus States) 보이는 포커스, focus-visible 패턴
폼 (Forms) autocomplete, 유효성 검사, 에러 처리
애니메이션 (Animation) prefers-reduced-motion, 컴포지터 친화적 변환
타이포그래피 (Typography) 컬리 쿼트, 말줄임표, tabular-nums
이미지 (Images) 크기 지정, 지연 로딩, alt 텍스트
성능 (Performance) 가상화, 레이아웃 스래싱 방지, preconnect
내비게이션 & 상태 URL에 상태 반영, 딥링킹
다크 모드 & 테마 color-scheme, theme-color 메타
터치 & 인터랙션 touch-action, tap-highlight
로케일 & i18n Intl.DateTimeFormat, Intl.NumberFormat

3. react-native-guidelines

목적: React Native 및 Expo 앱 개발 모범 사례

규모: 16개 규칙, 7개 섹션

사용 시점:

  • React Native 또는 Expo 앱 구축 시
  • 모바일 성능 최적화 시
  • 애니메이션 또는 제스처 구현 시
  • 네이티브 모듈 또는 플랫폼 API 작업 시

카테고리:

카테고리 영향도 주요 내용
성능 Critical FlashList, 메모이제이션, 무거운 연산
레이아웃 High flex 패턴, safe areas, 키보드 처리
애니메이션 High Reanimated, 제스처 처리
이미지 Medium expo-image, 캐싱, 지연 로딩
상태 관리 Medium Zustand 패턴, React Compiler
아키텍처 Medium 모노레포 구조, import
플랫폼 Medium iOS/Android 특화 패턴

4. composition-patterns

목적: 확장 가능한 React 컴포지션 패턴

사용 시점:

  • 많은 불리언 props를 가진 컴포넌트 리팩터링 시
  • 재사용 가능한 컴포넌트 라이브러리 구축 시
  • 유연한 API 설계 시
  • 컴포넌트 아키텍처 검토 시

패턴:

  • 컴파운드 컴포넌트 추출
  • 상태 끌어올리기로 props 감소
  • 내부 컴포지션으로 유연성 확보
  • Props Drilling 회피

5. vercel-deploy-claimable

목적: 대화형 즉시 배포

사용 시점:

  • “내 앱 배포해줘”
  • “프로덕션에 배포해줘”
  • “라이브로 푸시해줘”
  • “배포하고 링크 줘”

기능:

  • package.json에서 40개 이상의 프레임워크 자동 감지
  • 미리보기 URL과 클레임 URL 반환
  • 정적 HTML 프로젝트 자동 처리
  • node_modules와 .git 제외하여 깔끔한 업로드

작동 방식:

  1. 프로젝트를 tarball로 패키징
  2. 프레임워크 감지 (Next.js, Vite, Astro 등)
  3. 배포 서비스에 업로드
  4. 미리보기 URL과 클레임 URL 반환

출력 예시:

Deployment successful!

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

클레임 URL을 통해 배포의 소유권을 자신의 Vercel 계정으로 이전할 수 있습니다.

설치 및 설정

사전 요구사항

  • Node.js: npx를 사용하므로 Node.js가 설치되어 있어야 합니다.
  • 지원 AI 에이전트: Claude 또는 Claude Desktop (Agent Skills Specification 지원)

설치

터미널에서 다음 명령어를 실행합니다:

npx skills add vercel-labs/agent-skills

이 명령은 저장소를 가져와서 에이전트가 스킬을 사용할 수 있도록 설정합니다. 설치가 완료되면 에이전트가 스킬을 자동으로 감지하므로 추가 설정은 필요 없습니다.

설치 확인

설치 후 에이전트에 쿼리하여 설정을 테스트합니다:

이 React 컴포넌트의 성능 문제를 검토해 줘

에이전트가 의도를 인식하고 react-best-practices 스킬을 자동으로 호출합니다. 스킬이 트리거되지 않는다면 에이전트를 다시 시작해 보세요.

고급 사용법

GitHub에서 저장소를 직접 클론하여 커스터마이징할 수도 있습니다:

git clone https://github.com/vercel-labs/agent-skills.git

이 방식을 사용하면 SKILL.md를 수정하여 특정 요구사항에 맞게 스킬을 조정할 수 있습니다.

심층 분석: React Best Practices

워터폴 제거 (Critical)

문제: 순차적인 데이터 페칭은 성능을 심각하게 저하시킵니다. 첫 번째 요청이 완료될 때까지 두 번째 요청이 대기해야 하는 상황을 말합니다.

해결책: Promise.all을 사용한 병렬 페칭

// ❌ 워터폴 발생
async function fetchData() {
  const user = await fetch('/api/user');
  const posts = await fetch('/api/posts'); // user 완료 후 시작
  return { user, posts };
}

// ✅ 병렬 페칭
async function fetchData() {
  const [user, posts] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/posts')
  ]);
  return { user, posts };
}

번들 크기 최적화 (Critical)

문제: 큰 번들 크기는 초기 로드 시간을 증가시킵니다.

해결책: 동적 import를 통한 코드 분할

// ❌ 전체 import
import { HeavyChart } from 'chart-library';

// ✅ 동적 import
const HeavyChart = dynamic(() => import('chart-library'), {
  loading: () => <ChartSkeleton />
});

서버 사이드 성능 (High)

문제: 정적 데이터를 클라이언트에서 페칭하면 불필요한 네트워크 요청이 발생합니다.

해결책: getStaticProps 또는 getServerSideProps 활용

// ❌ 클라이언트 페칭
function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/static-data').then(r => r.json()).then(setData);
  }, []);
  return <div>{data?.title}</div>;
}

// ✅ 서버 사이드 페칭
export async function getStaticProps() {
  const data = await fetchStaticData();
  return { props: { data } };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

리렌더링 최적화 (Medium)

문제: 불필요한 리렌더링은 성능을 저하시킵니다.

해결책: React.memo, useMemo, useCallback 활용

// ❌ 매번 새로운 함수 생성
function Parent({ items }) {
  return items.map(item => (
    <Child key={item.id} onClick={() => handleClick(item)} />
  ));
}

// ✅ 메모이제이션
function Parent({ items }) {
  const handleClick = useCallback((item) => {
    // 핸들러 로직
  }, []);

  return items.map(item => (
    <MemoizedChild key={item.id} item={item} onClick={handleClick} />
  ));
}

const MemoizedChild = React.memo(Child);

렌더링 성능 (Medium)

문제: 긴 목록 렌더링은 DOM 노드를 과도하게 생성합니다.

해결책: 가상화 (Virtualization)

import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  );
}

심층 분석: Web Design Guidelines

접근성 (Accessibility)

핵심 규칙:

  1. 시맨틱 HTML 사용: <div> 대신 의미에 맞는 태그 사용
  2. ARIA 속성: 스크린 리더를 위한 적절한 속성 추가
  3. 키보드 내비게이션: 모든 인터랙션 요소에 키보드 접근 보장
<!-- ❌ 접근성 문제 -->
<div onclick="handleClick()">제출</div>

<!-- ✅ 접근성 준수 -->
<button
  type="submit"
  aria-label="폼 제출"
  onClick={handleClick}
>
  제출
</button>

폼 (Forms)

핵심 규칙:

  1. 명시적 레이블: <label> 요소와 연결
  2. 에러 메시지: aria-describedby로 연결
  3. autocomplete: 적절한 속성 값 설정
<!-- ✅ 접근성 준수 폼 -->
<form>
  <label htmlFor="email">이메일</label>
  <input
    id="email"
    type="email"
    autoComplete="email"
    aria-describedby="email-error"
    required
  />
  <span id="email-error" role="alert">
    올바른 이메일을 입력해주세요
  </span>
</form>

애니메이션 (Animation)

핵심 규칙:

  1. prefers-reduced-motion: 사용자 설정 존중
  2. 컴포지터 친화적: transform, opacity 사용
/* ✅ 접근성 준수 애니메이션 */
@media (prefers-reduced-motion: no-preference) {
  .animated {
    transition: transform 0.3s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    transition: none;
  }
}

다크 모드 & 테마

핵심 규칙:

  1. color-scheme: CSS 속성 설정
  2. theme-color: 메타 태그 추가
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">

:root {
  color-scheme: light dark;
}

심층 분석: Vercel Deploy Claimable

작동 원리

이 스킬은 AI 에이전트가 사용자와의 대화 중에 직접 Vercel에 프로젝트를 배포할 수 있게 합니다. 핵심은 “클레임 가능(Claimable)” 배포입니다.

배포 프로세스

1. 프로젝트 분석
   ├── package.json 확인
   ├── 프레임워크 감지 (40+ 지원)
   └── 정적/동적 구분

2. 패키징
   ├── tarball 생성
   ├── node_modules 제외
   └── .git 제외

3. 업로드
   ├── Vercel 배포 서비스 전송
   └── 빌드 실행

4. 결과 반환
   ├── Preview URL (즉시 접근 가능)
   └── Claim URL (소유권 이전)

지원 프레임워크

자동 감지되는 주요 프레임워크:

프레임워크 감지 방식
Next.js next dependency
Vite vite dependency
Astro astro dependency
Nuxt nuxt dependency
SvelteKit @sveltejs/kit
Remix @remix-run/react
Gatsby gatsby dependency
Create React App react-scripts
Vue vue dependency
Angular @angular/core

실제 사용 예시

사용자: “이 Next.js 앱을 배포해줘”

에이전트 응답:

배포를 진행하겠습니다...

Deployment successful!

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

미리보기 URL로 즉시 앱을 확인할 수 있습니다.
소유권을 이전하려면 Claim URL을 클릭하세요.

AI 에이전트 통합

Claude/Claude Desktop

Claude는 Agent Skills Specification을 기본적으로 지원합니다. 별도의 설정 없이 스킬이 설치되면 자동으로 사용할 수 있습니다.

트리거 예시:

사용자 쿼리 호출되는 스킬
“이 컴포넌트 성능 검토해줘” react-best-practices
“접근성 확인해줘” web-design-guidelines
“배포해줘” vercel-deploy-claimable
“이 컴포넌트 리팩터링해줘” composition-patterns

커스텀 에이전트

직접 AI 에이전트를 개발하는 경우, Agent Skills Specification을 구현하여 스킬을 통합할 수 있습니다.

핵심 구현 포인트:

  1. 스킬 탐지: .skill/ 디렉토리 또는 전역 스킬 위치 스캔
  2. 컨텍스트 주입: SKILL.md 내용을 시스템 프롬프트에 포함
  3. 의도 인식: 사용자 쿼리에서 스킬 트리거 의도 파악
  4. 스크립트 실행: 필요시 scripts/ 내 스크립트 호출

커스텀 스킬 만들기

자신만의 스킬을 만들 수도 있습니다:

my-custom-skill/
├── SKILL.md
├── scripts/
│   └── validate.sh
└── references/
    └── examples.md

SKILL.md 예시:

# My Custom Skill

## Purpose
이 스킬의 목적을 설명합니다.

## When to Use
- 조건 1
- 조건 2

## Guidelines
1. 규칙 1
2. 규칙 2

## Examples
### Example 1
설명과 코드 예시

모범 사례

쿼리 작성 가이드

스킬을 효과적으로 트리거하기 위한 쿼리 작성법:

  1. 명확한 의도 표현: “최적화해줘”보다 “데이터 페칭 워터폴을 제거해줘”
  2. 컨텍스트 제공: 관련 코드 파일 함께 제공
  3. 결합 사용: “성능 검토하고 배포해줘”

워크플로우 통합

1. 개발 → react-best-practices로 코드 검토
2. 디자인 → web-design-guidelines로 접근성 확인
3. 테스트 → 로컬에서 기능 검증
4. 배포 → vercel-deploy-claimable로 즉시 배포

버전 관리

  • 배포 전 변경 사항 커밋
  • 실험을 위한 브랜치 활용
  • 클레임 URL은 팀원과 공유 가능

보안 고려사항

  • 스킬은 Vercel API를 통해 안전하게 배포 처리
  • 쿼리에 민감한 데이터(비밀번호, API 키) 포함 금지
  • 클레임 URL은 일회용, 적시에 사용

성능 측정

스킬이 제안하는 최적화의 효과를 측정하세요:

  • Lighthouse: Core Web Vitals 확인
  • Bundle Analyzer: 번들 크기 변화 추적
  • React DevTools: 렌더링 성능 프로파일링

한계 및 고려사항

에이전트 호환성

현재 Agent Skills는 Claude/Claude Desktop에서 가장 잘 작동합니다. 다른 AI 에이전트는 Agent Skills Specification을 구현해야 합니다.

스킬 한계

  • 최신성: 스킬은 정적으로 유지되므로, 최신 프레임워크 버전의 변경사항이 즉시 반영되지 않을 수 있습니다.
  • 프로젝트 특이성: 모든 프로젝트의 특수한 요구사항을 완벽하게 커버할 수는 없습니다.
  • 오버헤드: 스킬이 제안하는 모든 최적화가 항상 필요한 것은 아닙니다.

커스터마이징 필요성

기본 스킬은 대부분의 사용 사례를 다루지만, 프로젝트별로 커스터마이징이 필요할 수 있습니다. 이 경우 저장소를 포크하여 수정하세요.

생태계 확장

커뮤니티 스킬

Agent Skills는 오픈소스이므로 커뮤니티에서 자체 스킬을 만들어 공유할 수 있습니다. 예상되는 확장 방향:

  • 백엔드 프레임워크: Express, FastAPI, Spring 가이드라인
  • 데이터베이스: Prisma, Drizzle 최적화
  • 테스팅: Jest, Vitest, Playwright 패턴
  • 인프라: AWS, GCP, Terraform 가이드

엔터프라이즈 활용

기업에서는 내부 모범 사례를 스킬로 패키징하여 팀 전체에 배포할 수 있습니다:

  • 사내 코딩 컨벤션
  • 보안 가이드라인
  • 아키텍처 패턴
  • 성능 기준

마치며

Vercel Agent Skills는 AI 코딩 에이전트의 역량을 획기적으로 확장하는 프레임워크입니다. 단순한 코드 생성을 넘어, 시니어 개발자의 전문 지식을 에이전트에게 전수하는 방식입니다.

특히 주목할 점은:

  1. 표준화된 사양: Agent Skills Specification을 통해 다양한 에이전트에서 사용 가능
  2. 실용적 스킬: React 최적화, 웹 접근성, 배포 자동화 등 실무 중심
  3. 확장성: 커스텀 스킬 제작으로 무한 확장 가능
  4. 오픈소스: MIT 라이선스로 자유로운 사용과 수정

AI와 함께 일하는 개발자라면 Agent Skills를 활용하여 생산성을 크게 높일 수 있습니다. “이 코드 최적화해줘”라고 말하는 것만으로도, 에이전트가 40개 이상의 최적화 규칙을 검토하고 제안을 제공합니다.

React/Next.js 프로젝트를 진행 중이거나, 웹 접근성이 중요한 프로젝트, 혹은 빠른 배포가 필요한 상황이라면 Vercel Agent Skills를 한번 사용해 보시길 권합니다.

참고 자료