vercel-labs

Claude는 설정된 웹 디자인 가이드라인에 대해 UI 코드를 자동으로 검토하여 배포 전에 접근성 문제, 사용성 문제, 모범 사례 위반을 발견할 수 있습니다. 이 스킬은 최신 가이드라인을 가져오고 개선점을 식별하기 위한 정적 분석을 수행합니다.

React 앱에 부드러운 페이지 전환과 공유 요소 애니메이션을 추가하려면 View Transitions API와 통합 패턴을 이해해야 합니다. 이 스킬은 Vercel Labs의 단계별 안내, CSS 레시피, Next.js 패턴을 제공합니다.

성능 높은 React Native 앱 구축에는 리스트, 애니메이션, 상태 관리에 관한 플랫폼별 패턴을 따라야 합니다. 이 스킬은 최적화된 모바일 개발을 위한 35개 이상의 AI 에이전트 규칙을 제공합니다.

React 애플리케이션은 불필요한 재렌더링, 큰 번들 크기, 순차적 데이터 가져오기 워터폴과 같은 성능 문제를 자주 발생시킵니다. 이 스킬은 Vercel 엔지니어링의 45가지 우선순위 규칙을 제공하여 이러한 병목 현상을 제거하고 고성능 웹 애플리케이션을 구축하는 데 도움을 줍니다.

불리언 props로 React 컴포넌트를 구축하면 유지보수가 어려운 코드가 됩니다. 이 기술은 복합 컴포넌트 사용, 상태 끌어올리기, 내부 컴포지션을 통해 확장 가능한 컴포넌트 아키텍처를 생성하기 위한 AI 준비 가이드라인을 제공합니다.

Slack 메시지를 수동으로 확인하고 대화 검색하는 것은 시간이 소요됩니다. 이 스킬은 API 인증이나 봇 토큰 없이 브라우저 자동화를 통해 Slack 상호작용을 자동화합니다.

웹 애플리케이션을 Vercel에 배포하려면 인증과 프로젝트 구성이 필요합니다. 이 스킬을 사용하면 AI 어시스턴트가 액세스 토큰을 사용하여 Vercel 배포를 관리할 수 있으며, 대화형 로그인 프롬프트가 필요하지 않습니다.

사용자는 Claude Code용 효과적인 스킬을 만들기 위한 안내가 필요합니다. 이 스킬은 검증된 모범 사례를 통해 스킬을 구축, 구조화 및 패키징하는 종합 가이드를 제공합니다.

Claude, Codex 및 Claude Code를 위한 AI 기술

An AI skill for Claude, Codex, and Claude Code

Next.js 애플리케이션은 데이터를 반복적으로 가져와 페이지 로딩이 느려지는 경우가 많습니다. 캐시 컴포넌트는 부분 사전 렌더링과 지능형 캐싱 전략을 통해 동적 부분을 스트리밍하면서 캐시된 콘텐츠를 즉시 제공합니다.

Next.js 패턴에 대해 추측하기 멈추고 확장 가능한 코드를 작성하세요. 이 스킬은 파일 규칙, React Server Components, 데이터 페칭, 오류 처리, 배포 모범 사례에 대한 Vercel의 공식 지침�� 제공합니다.

사용자는 작업을 도와주는 스킬이 무엇이 있는지 모르는 경우가 많습니다. 이 스킬은 오픈 에이전트 생태계에서 관련 기능을 발견하고 간단한 명령어로 설치하도록 안내합니다.

Chrome DevTools Protocol를 통해 VS Code, Slack, Discord, Figma 같은 Electron 앱을 제어합니다. 실행 중인 데스크톱 앱에 연결하고, UI 상호작용을 자동화하며, 네이티브 Electron 앱을 테스트합니다.

Dogfood 는 웹 애플리케이션을 체계적으로 탐색하여 버그, UX 문제 및 기타 문제를 찾고, 스크린샷과 동영상 등 모든 재현 증거를 포함한 구조화된 보고서를 생성합니다.

수동으로 프로젝트를 Vercel 에 배포하려면 시간이 걸리고 대시보드를 탐색해야 합니다. 이 스킬은 자동 프레임워크 감지 및 미리보기 URL 생성을 통해 전체 배포 워크플로우를 자동화합니다.

웹 상호작용을 수동으로 자동화하면 시간이 많이 들고 오류가 발생하기 쉽습니다. Agent-browser는 자동화된 양식 작성, 스크린샷 캡처, 웹 스크래핑 및 종단 간 테스트 워크플로를 가능하게 하는 브라우저 자동화를 위한 명령줄 인터페이스를 제공합니다.