작업 스킬
Vercel Agent Skills
Vercel 지침으로 AI의 프런트엔드 성능과 화면 품질 검토를 돕습니다.
소개
공개 문서를 바탕으로 LessAI Tools가 정리
프런트엔드 개발과 화면 검토용 작업 지침입니다. React·Next.js 프로젝트나 성능, 접근성, 사용성 점검에 적합합니다. README에서 지원하는 방법으로 필요한 스킬을 선택해 설치하고 조언을 실제 프로젝트와 대조하세요.
이 작업에 사용한 스킬: web-design-guidelines
시작하기
필요 조건을 확인하고 AI 도우미를 선택해 연결 단계를 보세요.
- 준비 사항
- 스킬을 지원하는 AI 도우미.
- Skills CLI는 Node.js와 npm이 필요하며 필요한 스킬만 선택하세요.
- 비용
- 프로젝트 코드는 오픈 소스입니다. 도우미 이용과 외부 서비스 한도는 별도입니다.
- 필요 권한
- 검토 스킬은 파일을 읽고 배포 스킬은 묶어 업로드합니다. 검토부터 시작하고 발행은 별도 승인하세요. Skills CLI는 익명 통계와 해제 옵션을 안내합니다.
Codex수동 설정 필요
Skills CLI 설치 중 대상 도우미와 스킬을 고르세요.
연결 단계
- README 설치 항목과 Skills CLI 안내를 여세요.
- vercel-labs/agent-skills에서 필요한 스킬과 Codex를 고르세요.
- 도우미에 스킬이 보이는지 확인하고 필요하면 새 세션을 여세요.
연결 결과 확인
web-design-guidelines로 한 페이지의 키보드 접근과 구체 문제를 확인하세요.
공식 출처
Claude Code수동 설정 필요
Skills CLI 설치 중 대상 도우미와 스킬을 고르세요.
연결 단계
- README 설치 항목과 Skills CLI 안내를 여세요.
- vercel-labs/agent-skills에서 필요한 스킬과 Claude Code를 고르세요.
- 도우미에 스킬이 보이는지 확인하고 필요하면 새 세션을 여세요.
연결 결과 확인
web-design-guidelines로 한 페이지의 키보드 접근과 구체 문제를 확인하세요.
공식 출처
Cursor수동 설정 필요
Skills CLI 설치 중 대상 도우미와 스킬을 고르세요.
연결 단계
- README 설치 항목과 Skills CLI 안내를 여세요.
- vercel-labs/agent-skills에서 필요한 스킬과 Cursor를 고르세요.
- 도우미에 스킬이 보이는지 확인하고 필요하면 새 세션을 여세요.
연결 결과 확인
web-design-guidelines로 한 페이지의 키보드 접근과 구체 문제를 확인하세요.
공식 출처
공식 출처
연결 안내 확인일 2026-10-12 · 공개 문서를 기반으로 합니다. 모든 프로젝트를 직접 설치해 테스트하지는 않았습니다.
활용 방법
- React와 Next.js 성능 지침 적용
- 접근성과 화면 사용성 검토
- 작업에 맞는 스킬 선택 및 설치
공식 프로젝트 및 문서
프로젝트 설명(번역)
Vercel 공식 에이전트 스킬 모음
비슷한 작업의 플러그인
주요 용도를 우선하고 공통 작업과 스타 수를 참고합니다. 연결 방법은 다를 수 있습니다.
- Claude Code Official Plugins — 코드 검토·화면 디자인·MCP 개발용 Claude Code 플러그인을 고릅니다.
- Codex Plugins & Built-in Tools — 실제 설정 요구 사항과 함께 브라우저 작업, 코딩, 디자인, 사무실 파일 및 비디오에 대한 Codex 기능을 찾아보세요.
- Vue Skills — Vue 3 컴포넌트, 라우팅, 상태 관리, 테스트를 AI에 안내합니다.