Vercel Agent Skills 설치하고 React·Vercel 작업 규칙 나누기

개요

AI 코딩 에이전트에 프로젝트 규칙을 매번 길게 붙이면 리뷰 기준이 흔들립니다. Vercel Agent Skills는 작업 종류별 SKILL.md와 보조 스크립트를 모은 공개 저장소입니다. 설치 뒤에는 요청에 맞는 스킬을 에이전트가 읽는 구조라서, React 성능 점검과 Vercel 운영 점검을 같은 지시문에 섞지 않아도 됩니다.

저장소 README는 스킬이 Agent Skills 형식을 따른다고 설명합니다. 현재 기본 브랜치는 main이며, GitHub API 기준 최신 커밋은 fb0282c76b8bbd709e1a5dadb32bb4aa463cdd9b입니다. GitHub Releases와 tags API에는 별도 최신 버전이 없습니다. 배포할 앱의 규칙을 고정하려는 경우에는 커밋 SHA나 설치 시점을 팀 문서에 남기는 편이 낫습니다.

1. 스킬 묶음 설치

전체 스킬을 넣을 때는 README의 npx skills add vercel-labs/agent-skills 명령을 씁니다. 필요한 항목만 넣으려면 skills CLI의 --skill 옵션을 붙입니다.

npx skills add vercel-labs/agent-skills
npx skills add vercel-labs/agent-skills --skill vercel-optimize

npx --yes skills --help 출력에는 add <package>와 use <package>@<skill>가 있습니다. add는 스킬을 설치하고, use는 설치 없이 특정 스킬용 프롬프트를 만듭니다. 팀 저장소에 모든 규칙을 넣기보다 Next.js 프로젝트에는 React 규칙과 Vercel 점검 규칙처럼 필요한 범위만 고르시면 됩니다.

2. 작업별 적용 범위

vercel-optimize는 코드부터 훑지 않습니다. vercel metrics, vercel usage, vercel contract, vercel api가 되는 Vercel CLI와 연결된 프로젝트를 준비한 뒤, 지표가 가리키는 route와 파일만 조사합니다. Node.js 20+, Vercel CLI v53+, 인증된 CLI, Observability Plus가 필요합니다. 비용이나 느린 route를 추측으로 고치기 싫을 때 맞습니다.

vercel-react-best-practices는 waterfall 제거와 번들 크기 축소를 우선순위로 두고, 서버 fetch 병렬화, Re-render, 렌더링, JavaScript 규칙까지 8개 범주로 나눕니다. web-design-guidelines는 접근성, form, 이미지, 성능, 터치 동작을 포함한 100개 이상 규칙을 다룹니다. 배포만 필요하면 deploy-to-vercel을 고르시면 됩니다. 이 스킬은 공개 배포 요청이 없으면 preview 배포를 기본값으로 잡습니다.

3. 적용 대상

Next.js나 React 프로젝트를 여러 사람이 고치고, 리뷰 기준을 에이전트 작업에도 남기고 싶을 때 쓸 만합니다. Vercel 비용·성능 감사는 실제 Vercel 계정 지표가 있어야 하므로, 로컬 정적 사이트나 아직 연결하지 않은 프로젝트에는 바로 맞지 않습니다. React Native 전용 작업도 별도 vercel-react-native-skills가 있으니 웹 규칙을 억지로 섞을 필요가 없습니다.

Docker와 자동화 도구를 올리는 흐름은 n8n 셀프 호스팅 설치 글에서 이어서 볼 수 있습니다. 제 기준으로는 배포 전 규칙은 React 스킬로, 운영 비용 점검은 vercel-optimize로 분리합니다. 역할이 겹치지 않습니다.

확인

npx --yes skills add vercel-labs/agent-skills --list
npx --yes skills --help

첫 명령에서 vercel-optimize, deploy-to-vercel, vercel-react-best-practices, web-design-guidelines가 보이고, 두 번째 명령에서 add와 use가 보이면 패키지 목록과 CLI 명령을 확인한 것입니다.