클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

프론트엔드 개발 가이드라인 (Next.js 15)

Next.js 15 + React 19 + Shadcn/ui 프로젝트에서 컴포넌트·페이지·데이터 페칭을 일관된 모범 사례로 작성하게 해주는 스킬.

개발·코딩중급★ 419⑂ 44AI 점수 9/10마지막 업데이트: 2026. 9. 8.

무엇을 해주나

Claude가 Next.js 15 프로젝트 코드를 작성할 때 따라야 할 규칙집을 제공합니다.

  • Server / Client Component 판단 기준: 기본은 Server Component, "use client"는 상호작용·훅·브라우저 API가 필요할 때만
  • App Router 파일 구조: app/{route}/page.tsx, loading.tsx, error.tsx, 동적 라우트, 라우트 그룹, features/ 폴더 구성
  • 데이터 페칭 & Server Actions: Server Component에서 async/await로 직접 페칭, 변경 작업은 "use server" 액션 + zod 검증
  • 스타일링: Tailwind 유틸리티 + cn() 헬퍼 + Shadcn/ui 컴포넌트 사용 규칙
  • 성능·TypeScript: next/image, next/font, Suspense 스트리밍, strict 모드·any 금지·명시적 타입
  • 컴포넌트/페이지 생성 체크리스트와 복사해서 쓰는 템플릿 코드 포함

이런 분께 추천

  • Next.js 15 App Router로 새 프로젝트를 시작하는 프론트엔드 개발자
  • 팀 내 코드 컨벤션을 AI에게도 동일하게 적용하고 싶은 리드
  • Server Component와 Client Component 구분이 아직 헷갈리는 React 입문~중급자
  • Shadcn/ui + Tailwind 조합을 표준 스택으로 쓰는 팀

활용 예시

  1. "게시글 목록 페이지 만들어줘" → app/posts/page.tsx(Server Component)에서 직접 fetch, PostList 카드 컴포넌트, loading.tsx/error.tsx, metadata까지 한 번에 생성
  2. "글쓰기 폼 추가해줘" → "use client" 폼 컴포넌트 + app/actions/posts.ts의 zod 검증 Server Action 조합으로 작성
  3. "이 컴포넌트 리팩터링해줘" → 불필요한 "use client" 제거, cn()으로 조건부 클래스 정리, any 제거 및 prop 인터페이스 명시

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/skills/0chan-smc/frontend-dev-guidelines/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 aiskillstore/marketplace 의 skills/0chan-smc/frontend-dev-guidelines 폴더를 내 ~/.claude/skills/frontend-dev-guidelines/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore && mkdir -p ~/.claude/skills && cp -r /tmp/aiskillstore/skills/0chan-smc/frontend-dev-guidelines ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 스킬 저장소를 임시 폴더에 내려받습니다: git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore
  3. 스킬 폴더가 없다면 만듭니다: mkdir -p ~/.claude/skills
  4. 이 스킬만 복사합니다: cp -r /tmp/aiskillstore/skills/0chan-smc/frontend-dev-guidelines ~/.claude/skills/
  5. ls ~/.claude/skills/frontend-dev-guidelines로 SKILL.md가 있는지 확인합니다.
  6. Claude Code를 재시작한 뒤, Next.js 프로젝트에서 "새 페이지 만들어줘"처럼 요청하면 스킬이 자동으로 적용됩니다.
  7. 프로젝트의 실제 경로 별칭(tsconfig.json의 @/)과 Shadcn/ui 설치 여부를 미리 확인해 두면 결과물이 더 정확합니다.
GitHub에서 원본 보기 ↗