팀의 코딩 표준을 Claude에게 매번 설명하는 것은 반복 낭비다. claude-code 스킬은 이 지식을 재사용 가능한 파일로 만들어 저장한다. 스킬 파일은 Claude가 특정 작업을 수행할 때 따르는 지침이며, 프로젝트 관례·코드 스타일·작업 흐름을 일관되게 적용하게 한다.
LogRocket 블로그가 정리한 React 개발자에게 실제로 효과 있었던 5가지 스킬을 소개한다.
누가 읽으면 좋은가
- Claude Code를 React 프로젝트에 처음 도입하는 팀
- “매번 같은 규칙을 다시 설명하는” 상황에 지친 개발자
- 컴포넌트 생성·PR 리뷰를 Claude로 자동화하고 싶은 경우
Skill 1: 계획 수립 (Planning)
새 기능을 구현하기 전에 Claude가 먼저 계획을 세우도록 강제하는 스킬이다. 코드를 바로 생성하지 않고 접근법을 먼저 제시하게 해, 방향이 틀린 채 많은 코드를 생성하는 낭비를 막는다.
<!-- .claude/skills/planning.md -->
새 기능 요청을 받으면:
1. 먼저 영향받는 파일과 컴포넌트 목록을 작성
2. 구현 단계를 번호 목록으로 제시
3. 주요 위험 요소나 미결 질문을 명시
4. 사용자 승인을 받은 뒤에만 코드 생성 시작Skill 2: 프로젝트 메모리 (Project Memory)
프로젝트의 폴더 구조, 네이밍 규칙, 상태 관리 패턴, 팀 결정 사항을 하나의 참조 파일에 저장하고, 스킬에서 이 파일을 참조하도록 한다.
<!-- .claude/skills/project-memory.md -->
작업 시작 시 .claude/PROJECT_CONTEXT.md 파일을 먼저 읽을 것.
해당 파일에는 다음이 포함되어 있다:
- 폴더 구조와 각 디렉토리의 역할
- 팀에서 합의한 상태 관리 패턴
- 사용 중인 디자인 토큰 및 컬러 시스템
- 회피해야 할 알려진 안티패턴스킬 파일이 지침을 담고, 옆의 PROJECT_CONTEXT.md가 실제 데이터를 담는 이중 구조가 핵심이다. 스킬이 매 작업마다 전체 컨텍스트를 주입하지 않고 필요할 때만 로드하도록 지시할 수 있다.
Skill 3: 컴포넌트 스캐폴딩 (Component Scaffolding)
새 React 컴포넌트를 만들 때 팀 관례를 자동으로 따르게 한다. 파일 구조, export 방식, Props 타입 정의, 테스트 파일 생성 여부 등을 미리 정의한다.
<!-- .claude/skills/component.md -->
새 컴포넌트를 만들 때:
1. src/components/<ComponentName>/ 폴더 생성
2. index.tsx (컴포넌트 본체), types.ts (Props 타입),
index.test.tsx (기본 렌더 테스트) 파일 생성
3. 디자인 토큰은 PROJECT_CONTEXT.md의 토큰 매핑 참조
4. default export 대신 named export 사용스킬 파일에서 REFERENCE.md를 참조해 디자인 토큰 매핑·폴더 예시·네이밍 규칙을 별도로 관리하면, 스킬 파일 자체는 가볍게 유지할 수 있다.
Skill 4: PR 리뷰 (PR Review)
PR을 열기 전 또는 리뷰할 때 Claude가 체크해야 할 항목을 스킬로 정의한다.
<!-- .claude/skills/pr-review.md -->
PR 리뷰 시 다음을 확인:
- 컴포넌트가 팀 네이밍 규칙을 따르는가
- 불필요한 useEffect가 없는가
- 접근성(aria-label, 키보드 탐색) 처리가 됐는가
- 테스트 커버리지가 추가됐는가
- 타입이 any 없이 명시적으로 정의됐는가Skill 5: CSS-퍼스트 아키텍처 (CSS-First Architecture)
인라인 스타일 대신 CSS 클래스·CSS 변수·디자인 토큰을 우선 사용하도록 강제한다. 스타일을 코드에서 분리해 유지보수성을 높인다.
<!-- .claude/skills/styling.md -->
스타일 작성 규칙:
- 인라인 style 속성 사용 금지
- CSS 모듈 또는 CSS 변수(--token-*) 사용
- 색상·간격·폰트는 PROJECT_CONTEXT.md의 디자인 토큰만 사용
- 반응형은 모바일 퍼스트로 작성효과 없었던 스킬
글에서는 시도해봤지만 실제로 도움이 되지 않았던 스킬 유형도 언급한다:
- 너무 많은 규칙을 담은 스킬: Claude가 일부 규칙을 무시하거나 혼동함. 스킬 하나당 한 가지 목적으로 분리하는 것이 낫다.
- 코드 생성 내용까지 스킬에 명시: 스킬은 “무엇을 할지”가 아닌 “어떻게 접근할지”를 정의해야 한다.
관련 문서
- claude-code — Claude Code 개요
- claude-code-tips-best-practice — 서브에이전트·스킬·훅 베스트 프랙티스
- claude-code-tips-skills-folder — 스킬 폴더 설정법 전체 가이드
참고 자료
- The 5 Claude skills for React I can’t live without — LogRocket Blog (2026-05-31)