Skills & 플러그인

동작하는 코드

프로젝트에 맞는 Skill을 만들어봅시다. .claude/skills/react-patterns/ 디렉토리를 만들고 SKILL.md를 작성합니다:

> 다음 내용으로 .claude/skills/react-patterns/SKILL.md를 만들어줘:

---
name: react-patterns
description: React/TypeScript 코드 작성 시 사용. 컴포넌트 설계, 상태 관리, 커스텀 훅 패턴 포함.
---

# React 코딩 패턴

## 컴포넌트 구조

- 함수 컴포넌트만 사용 (클래스 컴포넌트 금지)
- Props는 인터페이스로 정의 (type 대신 interface)
- 컴포넌트 파일 하나에 하나의 export default

## 상태 관리

- 로컬 상태: useState
- 복잡한 상태: useReducer
- 서버 상태: TanStack Query
- 전역 상태: Zustand (Redux 금지)

## 커스텀 훅

- use 접두사 필수
- 하나의 관심사만 담당
- 반환값은 항상 객체로 (배열 금지)

이제 Claude에게 React 관련 작업을 요청해보세요:

> 사용자 프로필을 보여주는 컴포넌트를 만들어줘

Claude가 Skill의 패턴에 맞춰 코드를 생성합니다. interface로 Props를 정의하고, 상태 관리에 Zustand를 사용하는 등 여러분이 정한 규칙을 따릅니다.

직접 수정하기

Skill 없이 같은 요청을 해보고 결과를 비교하세요:

1. /clear로 세션을 초기화합니다.
2. .claude/skills/ 디렉토리를 임시로 이름을 바꿉니다: mv .claude/skills .claude/skills.bak
3. 같은 요청을 합니다: "사용자 프로필 컴포넌트를 만들어줘"
4. 결과를 비교합니다. 컨벤션이 다른가요?
5. 디렉토리를 복원합니다: mv .claude/skills.bak .claude/skills

"왜?" — CLAUDE.md와 Skills의 차이

둘 다 Claude에게 규칙을 전달하지만 동작 방식이 다릅니다:

| 항목 | CLAUDE.md | Skills | | ----------- | ---------------------- | -------------------------- | | 로딩 시점 | 매 세션 시작 시 항상 | 작업 유형에 매칭될 때만 | | 토큰 비용 | 항상 소비 | 필요할 때만 소비 | | 범위 | 프로젝트 전체 규칙 | 특정 기술/패턴 전문 지식 | | 적합한 내용 | 빌드 명령어, 금지 규칙 | 코딩 패턴, 아키텍처 가이드 |

Skills는 온디맨드입니다. description 필드가 핵심인데, Claude가 요청 내용과 description을 비교해서 관련 있는 Skill만 자동으로 로드합니다. 200줄짜리 React 패턴 가이드가 Rust 작업 중에 로드되지 않으므로 토큰을 절약합니다.

Skill 저장 위치

| 위치 | 범위 | | ------------------- | ------------------------------- | | .claude/skills/ | 현재 프로젝트 (Git에 커밋 가능) | | ~/.claude/skills/ | 모든 프로젝트 공통 |

플러그인 마켓플레이스

커뮤니티가 만든 플러그인을 설치할 수도 있습니다:

> /plugins marketplace

마켓플레이스에서 유용한 플러그인을 검색하고 설치합니다:

> /plugins marketplace add username/plugin-name

플러그인은 Skills, Hooks, 커스텀 명령어를 패키지로 묶은 것입니다.

심화 학습