2026년 클로드 코드 리액트·Next.js 스킬 추천

리액트·Next.js 태그를 설치 많은 순으로 놓고, 2026년 7월 이전에 마지막 푸시된 저장소는 뺀 뒤 남은 SKILL.md를 읽었습니다. 리액트 19와 Next.js 15 이후에도 여전히 맞는 조언인지, 숙련된 리액트 개발자에게도 뻔하지 않은 내용이 있는지, 라이브러리 관리자나 공개 이력이 있는 엔지니어처럼 책임질 수 있는 사람이 썼는지를 기준으로 남겼습니다.

8개 중 3개가 vercel-labs/agent-skills에서 나왔습니다. Next.js를 관리하는 회사가 가장 꼼꼼한 스킬도 쓴다는 것이 이 분야의 현실입니다. shadcn 팀, Emil Kowalski, Addy Osmani, wshobson의 큰 모음집으로 균형을 맞췄습니다.

하는 일: Vercel 엔지니어링의 성능 규칙을 영향 순으로 정리했습니다. 요청 순차 실행 없애기, 클라이언트 번들 줄이기, 재렌더링 폭주 피하기, 알맞은 캐시 계층 쓰기. 진입 파일은 7.3KB이고 에이전트가 필요할 때만 여는 규칙 파일 76개를 가리킵니다. 약 687K 설치, 별 30.8K, 2026-08-28 갱신, 스크립트 없음.

쓰는 상황: 리액트나 Next.js 코드를 쓰거나 검토하는 모든 경우. 기본값에 가장 가깝습니다. 주의: 일부 규칙은 Vercel 배포(엣지 캐시, 이미지 최적화)를 전제해서, 다른 곳에 배포한다면 그쪽으로 유도합니다.

npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y

하는 일: 복합 컴포넌트, children로 렌더링 넘기기, 컨텍스트 범위 나누기 등 불리언 prop 11개짜리 컴포넌트를 피하는 방법을 가르칩니다. 파일 14개, 진입 파일 2.9KB. 약 320K 설치, 2026-08-28 갱신.

쓰는 상황: 공용 컴포넌트 라이브러리를 설계하거나 플래그가 늘어난 것을 정리할 때. 주의: 저희 수집에서는 머리말 description이 비어 있어 에이전트가 대조할 문구가 적고, 스스로 불러오지 않을 수 있습니다. 필요할 때 이름으로 직접 부르세요.

npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y

하는 일: 디자인 엔지니어가 신경 쓰는 컴포넌트 단위 디테일입니다. 포커스 표시, 비활성·로딩 상태, 시각적 정렬, 전환 효과가 도움이 되는 때와 소음이 되는 때. 예시는 전부 리액트입니다. 약 248K 설치, 별 35K, 2026-08-21 갱신, 27KB.

쓰는 상황: 상호작용이 있는 모든 컴포넌트. 주의: 27KB는 긴 파일입니다. vercel-react-best-practices와 겹치는 내용은 없으니 둘 다 두되, 컴포넌트 완성도에 관한 세 번째 의견까지 얹지는 마세요.

npx skills add emilkowalski/skills@emil-design-eng -g -y

하는 일: 리액트의 ViewTransition 컴포넌트, addTransitionType, 뷰 전환의 CSS 쪽을 정확하게 안내합니다. 약 113K 설치, 파일 9개, 14.4KB, 2026-08-28 갱신.

쓰는 상황: App Router 프로젝트의 페이지·목록 전환. 주의: 이 API는 리액트에서 아직 실험 단계라 리액트 버전을 고정하고 업그레이드할 때 스킬을 다시 읽으세요. 지난 분기 지침을 따르는 에이전트는 폐기된 호출을 넣을 수 있습니다.

npx skills add vercel-labs/agent-skills@vercel-react-view-transitions -y

tailwind-design-system는 Tailwind v4 디자인 토큰, 컴포넌트 변형, 반응형 관례를 5.3KB에 담았습니다. 약 62K 설치, 2026-09-01 갱신. Tailwind로 컴포넌트 라이브러리를 시작할 때 쓰세요. 주의: 명세가 아니라 요약이라, shadcn 프로젝트라면 아래 shadcn 스킬이 더 구체적입니다.

nextjs-app-router-patterns는 서버 컴포넌트, 스트리밍, 병렬·가로채기 라우트, 데이터 가져오기를 3.7KB로 정리했습니다. 약 29K 설치. 에이전트가 모든 파일에 "use client"를 붙일 때 쓰세요. 주의: 설명에 Next.js 14+라고 되어 있고 최신 캐시 지시어는 다루지 않으니, 단독보다 Vercel 스킬과 함께 쓰세요.

npx skills add wshobson/agents@nextjs-app-router-patterns -y

하는 일: shadcn 저장소의 공식 스킬입니다. CLI로 컴포넌트를 추가·검색하고, 깨진 설치를 고치고, 토큰 체계로 스타일링하고, 채팅 화면 같은 큰 패턴을 조합하는 법을 가르칩니다. 약 43K 설치, 별 123K, 파일 15개, 19.5KB, 2026-09-03 갱신.

쓰는 상황: shadcn/ui를 쓰는 모든 프로젝트. 주의: 스킬이 최근에 나와 설치 수는 적고, 별 123K는 라이브러리 전체의 것입니다. 숫자가 아니라 제작자를 보고 판단하세요. 프로젝트에 shadcn CLI가 있다고 전제합니다.

npx skills add shadcn-ui/ui@shadcn -y

하는 일: 접근성 좋고 반응형인 화면을 만드는 점검표입니다. 시맨틱 HTML부터, 키보드 경로, 긴 글과 작은 화면에서도 버티는 레이아웃. 약 33K 설치, 별 92K, 10.7KB, 2026-09-03 갱신.

쓰는 상황: 접근성이 있으면 좋은 것이 아니라 요구사항일 때. 주의: 프레임워크 중립이라 리액트에서 구체적으로 어떻게 하는지는 말해 주지 않습니다. 기준은 이 스킬이, 방법은 Vercel 스킬이 맡습니다.

npx skills add addyosmani/agent-skills@frontend-ui-engineering -g -y

vercel-react-native-skills(약 202K 설치)는 리액트 네이티브라 별도 목록이 맞습니다. Anthropic의 web-artifacts-builder(약 98K)는 앱이 아니라 claude.ai 아티팩트를 만들고 스크립트가 있습니다. vercel-optimize(약 64K)는 파일 156개와 스크립트가 있고 지표를 읽으려면 Vercel 계정이 필요합니다. minimalist-ui는 태그 분류기가 "grid"라는 단어에 걸린 디자인 프리셋입니다. Emil 저장소의 ask-sonner와 animate는 좋지만 범위가 좁아 애니메이션 목록에 어울립니다.

전역: vercel-react-best-practices, vercel-composition-patterns, emil-design-eng. 프로젝트별: shadcn을 쓴다면 shadcn, 라우트 전환을 움직인다면 view-transitions, App Router가 처음인 팀이라면 nextjs-app-router-patterns. 전부 합쳐 60KB 미만이고, 리액트를 건드리는 요청이 오기 전까지는 아무것도 올라오지 않습니다.

npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y
npx skills add emilkowalski/skills@emil-design-eng -g -y