Vercel이 공개한 React·Next.js 모범 사례 스킬(react-best-practices)을 Cursor에 설치하고, 실제로 운영 중인 LMS 코드에 코드 리뷰를 시켜 본 영상입니다. 바이브 코딩으로 프론트엔드를 만드는 비개발자, 또는 에이전트가 작성하는 React 코드의 품질을 일정하게 유지하고 싶은 개발자에게 맞는 내용입니다. 영상 게시 시점(2026-01-15) 기준의 설치 화면과 Cursor 설정을 다룹니다.
react-best-practices 스킬은 무엇인가
영상은 Vercel CEO가 올린 게시물에서 시작합니다. React와 Next.js 코드를 작성할 때의 모범 사례를 에이전트가 읽을 수 있는 스킬 형태로 정리해 오픈소스로 공개했고, Vercel 내부의 실제 프로젝트에도 쓰고 있다는 내용입니다. 저장소는 설명란에 있는 vercel-labs/agent-skills(https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices)입니다.
구조는 단순합니다. 스킬 폴더 안의 rules 폴더에 주제별 마크다운 파일이 많이 들어 있고, SKILL.md가 필요할 때 이 규칙 파일들을 동적으로 불러와 사용합니다. 단테는 이를 오랜 경력의 시니어 프론트엔드 개발자가 가진 노하우를 문서로 만들어, 어떤 에이전트를 쓰든 모든 프로젝트에 같은 수준으로 적용할 수 있게 한 것이라고 설명했습니다. 옆에 숙련된 개발자를 페어 프로그래밍 파트너로 두는 효과에 가깝다는 것입니다.
Cursor에 설치하기
설치는 Vercel이 안내하는 npx 명령어로 진행합니다. 명령을 실행하면 사용할 수 있는 스킬 목록이 나오고, 스페이스바로 원하는 스킬을 선택합니다. 영상에서는 Vercel React Best Practices를 선택하고 Enter를 눌렀습니다. 이어서 어떤 에이전트 환경에 설치할지 묻는데, 여기서 Cursor를 고릅니다.
다음으로 설치 범위를 묻습니다. 프로젝트 단위로 설치해 A 프로젝트와 B 프로젝트에 서로 다른 스킬을 둘 수도 있고, 전역으로 설치해 모든 프로젝트에 같은 스킬을 적용할 수도 있습니다. 단테의 기준은 이렇습니다. A 프로젝트는 Material UI, B 프로젝트는 shadcn이나 애플 스타일을 따라야 하는 것처럼 디자인 패턴이 프로젝트마다 다르다면 프로젝트 단위가 맞습니다. 반면 React 모범 사례는 프로젝트와 상관없이 항상 같은 수준의 코드를 쓰게 하는 스킬이므로 전역으로 설치했습니다.
설치가 끝나면 스킬이 저장된 위치가 표시되고, skills 폴더 아래에 vercel-react-best-practices 폴더가 생깁니다.
규칙 파일 하나 열어 보기
rules 폴더에서 예시로 advanced-event-handler-refs 문서를 열었습니다. 커스텀 훅에서 ref를 어떻게 다루고 useEffect를 어떻게 써야 하는지에 대한 모범 답안이 들어 있고, 최신 React에 추가된 useEffectEvent를 사용하라고 안내합니다. 단테가 짚은 장점은 사용자가 useEffectEvent가 새로 생겼다는 사실을 몰라도 에이전트가 이 스킬을 읽고 최신 문법을 적용한다는 점입니다. 나중에 스킬을 새 버전으로 받기만 하면, 사람이 문법을 따로 익히지 않아도 에이전트 쪽 기준이 함께 갱신됩니다.
Cursor 설정과 실제 코드 리뷰
설치만으로는 부족했습니다. 영상 당시 Cursor에서 스킬을 제대로 인식시키려면 Cmd+Shift+J로 설정을 열고 왼쪽 Beta 탭에서 업데이트 채널을 Nightly로 바꿔야 했습니다. 대부분은 Early Access로 되어 있을 것이라고 단테는 설명했습니다.
그다음 단테가 운영 중인 LMS 플랫폼 코드를 분석해 개선이 필요한 부분을 알려 달라고 요청했습니다. 스킬 이름을 따로 언급하지 않고 단순히 코드 리뷰만 부탁했는데도, 추론 과정에 스킬을 읽는 단계가 나타나고 vercel-react-best-practices를 자동으로 참조했습니다. 모범 사례 가이드와 관련 규칙을 읽었다는 내용도 추론 과정에 표시됐습니다.
결과로 나온 개선 리포트에는 번들 크기 최적화, framer-motion을 동적으로 불러오지 않은 부분, 렌더링 성능 최적화가 빠진 부분 등이 영향도별로 정리돼 있었습니다. 단테는 영향도가 낮음(Low)인 항목을 제외하고 적용해 달라고 요청했습니다. 그가 인상적으로 본 점은 framer-motion처럼 React와 직접 관계없는 라이브러리를 쓰는 부분까지, React 코드베이스 안에서 성능상 이점을 얻는 방향으로 리뷰해 준다는 것이었습니다.
정리
- Vercel의 react-best-practices는 React·Next.js 모범 사례를 rules 폴더의 마크다운 규칙으로 정리하고 SKILL.md가 필요할 때 불러오는 구조입니다.
- npx 명령으로 설치할 때 에이전트 환경과 설치 범위를 고르며, 프로젝트와 무관하게 적용할 규칙이라면 전역 설치가 맞습니다.
- 영상 당시 Cursor에서는 Beta 탭의 업데이트 채널을 Nightly로 바꿔야 스킬을 안정적으로 인식했습니다.
- 스킬을 명시하지 않은 코드 리뷰 요청에서도 에이전트가 스킬을 자동으로 참조해 영향도별 개선 리포트를 냈습니다.
- 에이전트가 React를 기본 스택으로 고르는 경우가 많으므로, 이 스킬을 설치해 두면 협업 시 코드 수준을 일정하게 유지하는 데 도움이 됩니다.