프로젝트 소개

Agent Skills는 AI 코딩 에이전트를 위한 스킬 모음으로, 에이전트의 기능을 확장하는 지침과 스크립트로 패키징되어 있습니다. 스킬은 Agent Skills 형식을 따르며 설치 시 자동으로 사용 가능해지고, 관련 작업이 감지되면 에이전트가 이를 호출합니다. 포함된 스킬: - vercel-optimize: Vercel 프로젝트의 비용, 성능, 안정성, 캐싱, 함수 사용량, 청구 기회를 감사합니다. 먼저 Vercel 메트릭을 수집한 후, 해당 메트릭이 가리키는 경로와 파일만 조사합니다. 배포된 프로젝트 최적화, 비용 또는 함수 사용량 절감, 느리거나 비용이 많이 드는 경로 조사, 캐싱/ISR/미들웨어/이미지/빌드 시간 문제 발견, 순위가 매겨진 비용 및 성능 보고서 생성에 사용됩니다. - react-best-practices: Vercel 엔지니어링의 React 및 Next.js 성능 최적화 가이드라인으로, 영향도에 따라 우선순위가 매겨진 8개 카테고리, 40개 이상의 규칙을 포함합니다. 카테고리에는 워터폴 제거, 번들 크기 최적화, 서버 측 성능, 클라이언트 측 데이터 페칭, 리렌더링 최적화, 렌더링 성능, JavaScript 미세 최적화가 포함됩니다. 컴포넌트나 페이지 작성, 데이터 페칭 구현, 성능 코드 검토, 번들 크기 및 로드 시간 최적화에 유용합니다. - web-design-guidelines: 접근성, 성능, UX를 다루는 100개 이상의 규칙으로 UI 코드를 검토합니다. 카테고리에는 접근성, 포커스 상태, 폼, 애니메이션, 타이포그래피, 이미지, 성능, 내비게이션 및 상태, 다크 모드 및 테마, 터치 및 상호작용, 로케일/i18n이 포함됩니다. - writing-guidelines: Vercel 글쓰기 핸드북에 따라 문서와 산문을 80개 이상의 규칙으로 검토합니다. 카테고리에는 계획, 어조 및 톤, 콘텐츠 유형별 톤, 제목 및 구조, 목록, 코드, 자리 표시자/단위/숫자, 타이포그래피, 소스 형식, 가격 및 결제 페이지, AI 워크플로우, 검토가 포함됩니다. - react-native-guidelines: AI 에이전트에 최적화된 React Native 모범 사례로, 7개 섹션, 16개 규칙을 포함하며 성능, 레이아웃, 애니메이션, 이미지, 상태 관리, 아키텍처, 플랫폼별 패턴을 다룹니다. - react-view-transitions: React의 View Transition API로 애니메이션을 구현하는 지침으로, ViewTransition 컴포넌트, addTransitionType, 전환 유형, 공유 요소 전환, Web Animations API를 통한 JavaScript 애니메이션, next/link의 transitionTypes prop을 포함한 Next.js 통합, 바로 사용 가능한 CSS 애니메이션 레시피, 접근성 고려 사항을 다룹니다. - composition-patterns: 확장을 위한 React 컴포지션 패턴으로, 복합 컴포넌트, 상태 끌어올리기, 내부 컴포지션을 통해 불리언 prop의 확산을 방지하는 데 도움을 줍니다. - vercel-deploy-claimable: 애플리케이션과 웹사이트를 Vercel에 배포하며, claude.ai 및 Claude Desktop과 함께 사용하도록 설계되었습니다. package.json에서 40개 이상의 프레임워크를 자동 감지하고, 미리보기 URL과 소유권 이전을 위한 클레임 URL을 반환하며, 정적 HTML 프로젝트를 처리하고, 업로드에서 node_modules와 .git을 제외합니다. 설치는 npx skills add vercel-labs/agent-skills로 수행됩니다. 각 스킬에는 에이전트 지침이 포함된 SKILL.md, 자동화를 위한 선택적 스크립트, 선택적 참조가 포함됩니다. main에 대한 스킬 변경은 에이전트 스킬 검색 인덱스와 스킬당 하나의 아티팩트가 포함된 불변 GitHub 릴리스를 게시하며, 동일한 아티팩트는 제공된 스크립트로 로컬에서 빌드할 수 있습니다. 프로젝트는 MIT 라이선스로 배포됩니다.