Next.js 16 App Router 기반 프로젝트에서 Claude Code가 일관된 패턴으로 코드를 작성하도록 만드는 스킬입니다. Server / Client 컴포넌트 경계, 데이터 페칭, shadcn@4 컴포넌트, Tailwind 4 토큰 사용까지 — 모든 결정을 이 스킬 한 장에 담았습니다.
설치 즉시 Claude Code가 프로젝트의 컨벤션을 읽고, 새 컴포넌트 / 페이지 / 라우트를 만들 때 바로 적용합니다. 더 이상 "우리 프로젝트는 이렇게 합니다"를 매번 설명하지 않아도 됩니다.
App Router 컨벤션 자동 적용
page / layout / loading / error 파일 구조, async params, metadata export까지 Next.js 16 최신 규칙을 지킵니다.
Server / Client 경계 자동 판단
'use client'를 꼭 필요한 순간에만 추가합니다. 인터랙션 경계를 깊이 밀어넣어 번들 사이즈를 줄입니다.
Tailwind 4 + shadcn@4 패턴
DESIGN.md 토큰을 그대로 사용하고, cn() 유틸과 shadcn 프리미티브를 우선합니다. 임의 hex 값·인라인 style을 금지합니다.
Strict TypeScript
any 금지, interface 우선, 타입 전용 import 사용. React.FC와 enum을 피하고 literal union을 씁니다.
"Next.js 페이지 만들어줘" → getServerSideProps 쓴 pages 라우터 코드, 'use client' 남발, any 타입.
After
app/ 하위에 Server Component로 page.tsx 생성, async params 타입 Promise<{...}> 적용, metadata export까지 세트로 작성.
useEffect + fetch + useState 조합, 로딩·에러 상태 수동 관리, 타입 없는 JSON 응답.
After
lib/api.ts에 fetch 함수 추가 → Server Component에서 await, next: { revalidate } 명시.
nextjs-frontend-guidelines/ ├── SKILL.md ← 메인 규칙 엔트리포인트 ├── rules/ │ ├── app-router.md ← 파일 컨벤션, async params │ ├── components.md ← Server/Client 분리 규칙 │ ├── data-fetching.md ← fetch 우선순위와 캐싱 │ ├── styling.md ← Tailwind 4 + DESIGN 토큰 │ └── typescript.md ← strict 모드 패턴 ├── examples/ │ ├── server-component.tsx │ └── client-component.tsx └── anti-patterns.md ← 피해야 할 패턴 체크리스트