"Agent Skills"는 AI 코딩 에이전트의 기능을 확장하기 위해 설계된 스킬(skill) 컬렉션입니다. 각 스킬은 에이전트가 특정 작업을 수행할 수 있도록 지침과 스크립트가 패키징된 형태로 제공됩니다. 스킬은 SKILL.md 파일(에이전트를 위한 지침), scripts/ 디렉토리(자동화를 위한 헬퍼 스크립트, 선택 사항), references/ 디렉토리(지원 문서, 선택 사항)로 구성됩니다.

이 컬렉션에 포함된 주요 스킬들은 다음과 같습니다:

1. react-best-practices:
   • 목적: React 및 Next.js 애플리케이션의 성능 최적화를 위한 가이드라인을 제공합니다.
   • 세부 내용: 8개 카테고리에 걸쳐 40개 이상의 규칙을 포함하며, 영향도에 따라 우선순위가 정해져 있습니다. 예를 들어, Critical 등급으로는 "Eliminating waterfalls" (워터폴 제거) 및 "Bundle size optimization" (번들 크기 최적화)가 있으며, High 등급으로는 "Server-side performance" (서버 측 성능), Medium-High 등급으로는 "Client-side data fetching" (클라이언트 측 데이터 페칭) 등이 있습니다. 그 외에도 "Re-render optimization" (리렌더링 최적화), "Rendering performance" (렌더링 성능), "JavaScript micro-optimizations" (JavaScript 마이크로 최적화) 등을 다룹니다.
   • 사용 사례: 새로운 React 컴포넌트 또는 Next.js 페이지 작성, 데이터 페칭 구현, 코드 성능 리뷰, 번들 크기 또는 로드 시간 최적화 시 활용됩니다.

2. web-design-guidelines:
   • 목적: UI 코드의 웹 인터페이스 모범 사례 준수 여부를 검토하고 감사합니다.
   • 세부 내용: 접근성(accessibility), 성능(performance), 사용자 경험(UX)을 포괄하는 100개 이상의 규칙을 통해 코드를 감사합니다. 카테고리에는 "Accessibility" (aria-labels, semantic HTML, keyboard handlers 등), "Focus States" (보이는 포커스, focus-visible 패턴), "Forms" (autocomplete, validation, error handling), "Animation" (prefers-reduced-motion, compositor-friendly transforms), "Typography" (curly quotes, ellipsis, tabular-nums), "Images" (dimensions, lazy loading, alt text), "Performance" (virtualization, layout thrashing, preconnect), "Navigation & State" (URL에 상태 반영, deep-linking), "Dark Mode & Theming" (color-scheme, theme-color meta), "Touch & Interaction" (touch-action, tap-highlight), "Locale & i18n" (Intl.DateTimeFormat, Intl.NumberFormat) 등이 있습니다.
   • 사용 사례: UI 검토, 접근성 확인, 디자인 감사, UX 검토 등의 요청에 응답합니다.

3. vercel-deploy-claimable:
   • 목적: 애플리케이션 및 웹사이트를 Vercel에 즉시 배포하는 기능을 제공합니다. 특히 Claude.ai 및 Claude Desktop과 연동되어 대화형으로 배포를 수행할 수 있습니다.
   • 특징: 배포된 프로젝트는 "claimable" (소유권 주장 가능)하여, 사용자가 생성된 배포의 소유권을 자신의 Vercel 계정으로 이전할 수 있습니다.
   • 핵심 방법론: 이 스킬은 다음과 같은 단계로 작동합니다:
     1. 프로젝트를 tarball로 패키징합니다. (Packages your project into a tarball).
     2. package.json 파일을 기반으로 Next.js, Vite, Astro 등 40개 이상의 프레임워크를 자동으로 감지합니다.
     3. 패키징된 프로젝트를 Vercel 배포 서비스에 업로드합니다.
     4. 배포 완료 후, 라이브 사이트의 미리보기 URL과 소유권을 Vercel 계정으로 이전할 수 있는 Claim URL을 반환합니다. 이 과정에서 node_modules 및 .git 디렉토리는 업로드에서 자동으로 제외됩니다.
   • 사용 사례: "앱 배포", "프로덕션으로 배포", "이것을 라이브로 푸시", "배포하고 링크 제공" 등의 요청에 사용됩니다.

스킬은 npx add-skill vercel-labs/agent-skills 명령어를 통해 설치할 수 있으며, 설치된 스킬은 에이전트가 관련 작업을 감지하면 자동으로 사용됩니다.