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에게 규칙을 전달하지만 동작 방식이 다릅니다:

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

Skill 저장 위치

플러그인 마켓플레이스

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

> /plugins marketplace

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

> /plugins marketplace add username/plugin-name

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

심화 학습