JW's AI_Stash

2.1.3 Skills 예제

19 min read

1.3 Skills 실전 예제

커밋 자동화, 보안 감사, PR 생성 등 바로 사용 가능한 Skills 예제 6가지를 플랫폼별 적용 방법과 함께 제공한다. 업데이트: 2026-03-08

핵심 요약

구분내용
📖 정의SKILL.md 내용은 세 플랫폼에서 동일하게 사용 가능하며, 저장 위치와 호출 방법만 다르다
💡 핵심반복 작업, 팀 표준 적용, 품질 점검, 파일 생성, 문서화 등 다양한 영역에 Skills를 활용할 수 있다
🎯 대상Skills를 실무에 즉시 적용하려는 개발자
⚠️ 주의배포, 커밋 등 부작용이 있는 스킬은 disable-model-invocation: true를 반드시 설정한다

문서 탐색

이전다음
2.1.2 Skills 만들기2.2.1 에이전트란?

목차

  1. 예제: 커밋 메시지 자동 작성기
  2. 예제: 코드 보안 감사기
  3. 예제: PR 설명 자동 생성기
  4. 예제: 컴포넌트 스캐폴딩 (React)
  5. 예제: 배포 전 최종 점검
  6. 예제: 팀 컨벤션 가이드 (배경 지식형)
  7. 예제: 실시간 PR 요약 (동적 컨텍스트 주입)
  8. 예제: 코드 리뷰 체크리스트
  9. 예제: GitHub 이슈 자동 수정
  10. 예제: 심층 코드 탐색 (fork 격리 실행)
  11. 예제: 프레임워크 마이그레이션 (다중 변수)
  12. 예제: 코드 설명 (비유 + 다이어그램)
  13. 고급 SKILL.md 기능
  14. 어떤 작업에 Skills를 활용하면 좋을까?

업데이트: 2026-03-12 — 예제 6개 추가 (7~12번), 고급 기능 섹션 신설

아래 예제의 SKILL.md 내용은 세 플랫폼 모두 동일하게 사용할 수 있다. 저장 위치와 호출 방법만 플랫폼별로 다르게 적용한다.

플랫폼저장 경로호출 방법
Claude Code.claude/skills/스킬명//스킬명
Gemini CLI.gemini/skills/스킬명/자동 호출
OpenAI Codex.codex/skills/스킬명/$스킬명

1. 예제: 커밋 메시지 자동 작성기

사용 시점: 매번 커밋 메시지 형식 맞추기 번거로울 때

.claude/skills/smart-commit/
└── SKILL.md

---
name: smart-commit
description: "변경된 파일을 분석해서 의미 있는 커밋 메시지를 생성하고 커밋한다"
disable-model-invocation: true
---
 
## 커밋 절차
 
1. `git diff --staged`로 스테이징된 변경사항 확인
2. 변경 내용을 분석해서 아래 형식으로 커밋 메시지 초안 작성:

타입(범위): 제목 (50자 이내)

  • 변경사항 1
  • 변경사항 2
타입: feat / fix / refactor / docs / test / chore
3. 사용자에게 초안 보여주고 수정 여부 확인
4. 승인 시 커밋 실행
플랫폼호출비고
Claude Code/smart-commitdisable-model-invocation으로 자동 실행 방지
Gemini CLI자동 ("커밋해줘" 발화 시)disable-model-invocation 무시됨 — 주의 필요
OpenAI Codex$smart-commit—

2. 예제: 코드 보안 감사기

사용 시점: PR 올리기 전에 보안 취약점을 빠르게 점검하고 싶을 때

---
name: security-audit
description: "코드에서 보안 취약점을 스캔하고 PASS/WARN/FAIL로 결과를 보고한다"
disable-model-invocation: true
---
 
## 보안 점검 항목
 
다음 항목을 점검하고 각각 PASS / WARN / FAIL로 표시한다:
 
### 입력 검증
- [ ] SQL Injection 가능성
- [ ] XSS (Cross-Site Scripting) 취약점
- [ ] 명령어 인젝션 (Command Injection)
 
### 인증/인가
- [ ] 하드코딩된 비밀번호나 API 키
- [ ] 취약한 세션 관리
- [ ] 권한 검사 누락
 
### 데이터 처리
- [ ] 민감 정보가 로그에 출력되는지
- [ ] 암호화 없이 민감 데이터 저장
 
## 결과 형식
| 항목 | 결과 | 설명 |
|------|------|------|
| SQL Injection | PASS/WARN/FAIL | 이유 |
 
FAIL 항목은 구체적인 수정 방법을 함께 제시한다.

사용법: /security-audit (Claude Code) · $security-audit (Codex) · 자동 호출 (Gemini CLI)

3. 예제: PR 설명 자동 생성기

사용 시점: PR 작성할 때 무엇을 써야 할지 막막할 때

---
name: generate-pr
description: "변경사항을 분석해서 GitHub PR 설명을 자동으로 작성한다"
disable-model-invocation: true
---
 
## PR 생성 절차
 
1. `git log main..HEAD --oneline`으로 커밋 목록 확인
2. `git diff main...HEAD`로 전체 변경사항 분석
3. 아래 템플릿으로 PR 설명 작성:
 
## 변경 사항 요약
[한두 줄로 이 PR이 무엇을 하는지]
 
## 변경 이유
[왜 이 변경이 필요한지]
 
## 주요 변경 내용
-
 
## 테스트 방법
1.
 
## 체크리스트
- [ ] 테스트 작성/업데이트
- [ ] 문서 업데이트
- [ ] 브레이킹 체인지 없음
 
4. 사용자에게 보여주고 수정 요청 받기

사용법: /generate-pr (Claude Code) · $generate-pr (Codex)

4. 예제: 컴포넌트 스캐폴딩 (React)

사용 시점: 새 React 컴포넌트 만들 때 파일 구조 잡기 번거로울 때

.claude/skills/new-component/
├── SKILL.md
└── templates/
    ├── component.tsx.template
    ├── component.test.tsx.template
    └── component.css.template

---
name: new-component
description: "React 컴포넌트 이름을 받아서 컴포넌트, 테스트, 스타일 파일을 생성한다"
---
 
## 컴포넌트 생성 절차
 
1. 사용자에게 컴포넌트 이름을 물어본다 (예: UserCard)
2. 다음 파일들을 생성한다:
   - `src/components/컴포넌트명/index.tsx`
   - `src/components/컴포넌트명/컴포넌트명.test.tsx`
   - `src/components/컴포넌트명/컴포넌트명.module.css`
3. `templates/` 안의 템플릿 파일을 참고해서 내용 채우기
4. 컴포넌트에 props 타입 정의 포함 (TypeScript)
5. 생성된 파일 경로 목록 출력

사용법: /new-component (Claude Code) · $new-component (Codex) · 자동 (Gemini CLI)

5. 예제: 배포 전 최종 점검

사용 시점: 프로덕션 배포 전에 빠짐없이 체크하고 싶을 때

---
name: pre-deploy-check
description: "배포 전 필수 항목을 점검하고 통과 여부를 보고한다"
disable-model-invocation: true
---
 
## 배포 전 점검 체크리스트
 
### 코드 품질
- [ ] `npm run test` 실행 → 모든 테스트 통과 확인
- [ ] `npm run lint` 실행 → 오류 없음 확인
- [ ] `npm run build` 실행 → 빌드 성공 확인
 
### 환경 설정
- [ ] `.env.production`에 필요한 환경변수 모두 있는지 확인
- [ ] 하드코딩된 localhost URL 없는지 확인
 
### 의존성
- [ ] `package.json` 버전 업데이트 여부 확인
- [ ] `npm audit` 실행 → 보안 취약점 없음 확인
 
## 결과 보고
각 항목 완료 후 요약 표 출력:
| 항목 | 상태 | 비고 |
|------|------|------|
 
하나라도 실패하면 배포를 중단하고 사용자에게 보고한다.

사용법: /pre-deploy-check (Claude Code) · $pre-deploy-check (Codex)

6. 예제: 팀 컨벤션 가이드 (배경 지식형)

사용 시점: AI가 코드 작성할 때 항상 팀 규칙을 따라야 할 때

---
name: team-conventions
description: "이 프로젝트의 코딩 컨벤션, 네이밍 규칙, 아키텍처 패턴"
user-invocable: false
---
 
## 코딩 컨벤션
 
### 파일 네이밍
- 컴포넌트: PascalCase (예: UserProfile.tsx)
- 훅: camelCase, use 접두어 (예: useUserData.ts)
- 상수: UPPER_SNAKE_CASE
 
### 함수 작성 규칙
- 한 함수는 하나의 역할만
- 라인 수 50줄 이하 권장
 
### 금지 사항
- any 타입 사용 금지
- console.log를 프로덕션 코드에 남기기 금지

📌 user-invocable: false는 Claude Code 전용 옵션이다. Gemini CLI·Codex에서는 description에 “배경 지식으로만 참고”라고 명시하는 방식으로 유사하게 구현 가능하다.

사용법: 직접 호출 없음. AI가 코드 작성 시 자동 참조.

7. 예제: 실시간 PR 요약 (동적 컨텍스트 주입)

사용 시점: PR 리뷰 전에 변경 내용을 빠르게 파악하고 싶을 때

핵심 패턴: !`명령어` 문법으로 스킬 실행 시 shell 명령 결과를 실시간 주입

---
name: pr-summary
description: "Summarize changes in a pull request using live GitHub data. Use when reviewing a PR, asked to summarize changes, or before a code review."
context: fork
agent: Explore
allowed-tools: Bash(gh *)
---
 
## Pull request context
 
- PR diff: !`gh pr diff`
- PR comments: !`gh pr view --comments`
- Changed files: !`gh pr diff --name-only`
- PR description: !`gh pr view`
 
## Task
 
위 실시간 데이터를 바탕으로 아래 항목을 요약한다:
 
1. **무엇을 해결하는가?** — 이 PR의 목적과 배경
2. **어떤 접근 방식을 택했는가?** — 구현 방법 요약
3. **주요 리뷰 포인트** — 집중해서 봐야 할 코드 영역
4. **테스트·문서 누락 여부** — 빠진 것이 있으면 명시
플랫폼호출비고
Claude Code/pr-summarycontext: fork으로 격리 실행
Gemini CLI자동 (PR 관련 발화 시)—
OpenAI Codex$pr-summary—

8. 예제: 코드 리뷰 체크리스트

사용 시점: PR 올리기 전 또는 동료 코드를 검토할 때 구조화된 보고서가 필요할 때

---
name: code-review
description: "Perform thorough code review with structured report. Use when reviewing code changes, pull requests, or when asked for a code review."
---
 
## 코드 리뷰 체크리스트
 
### 정확성
- 엣지 케이스 처리 여부
- 에러 경로 처리 여부
 
### 보안
- 사용자 입력 검증/살균 여부
- SQL Injection, XSS, CSRF 위험 없음
- 하드코딩된 시크릿 없음
 
### 성능
- 불필요한 DB 쿼리 없음
- O(n²) 이상 루프 없음
 
### 유지보수성
- 명확한 네이밍
- DRY 원칙 준수
 
### 테스트
- 신규 코드에 테스트 있음
- 엣지 케이스 커버
 
## 출력 형식
 
- **Summary**: 전체 평가 한 줄
- **Critical Issues**: 머지 전 필수 수정 항목
- **Warnings**: 권고 수정 항목
- **Suggestions**: 개선 제안
- **승인 여부**: ✅ APPROVED / ❌ CHANGES REQUIRED / ⚠️ APPROVED WITH CONDITIONS

사용법: /code-review (Claude Code) · $code-review (Codex)

9. 예제: GitHub 이슈 자동 수정

사용 시점: 이슈 번호 하나로 분석 → 구현 → 커밋까지 한 번에 처리하고 싶을 때

핵심 패턴: $ARGUMENTS로 사용자 입력값을 스킬 본문에 전달

---
name: fix-issue
description: "Fix a GitHub issue end-to-end. Use when assigned an issue, asked to resolve a bug report, or given an issue number to fix."
disable-model-invocation: true
---
 
GitHub 이슈 **#$ARGUMENTS** 를 아래 순서로 처리한다.
 
1. `gh issue view $ARGUMENTS` 로 이슈 내용 확인
2. 요구사항과 재현 조건 파악
3. 관련 코드 탐색 (Glob, Grep 활용)
4. 수정 구현 (기존 코드 스타일 유지)
5. 테스트 작성 또는 업데이트
6. 커밋 메시지에 `Closes #$ARGUMENTS` 포함

사용법: /fix-issue 42 (Claude Code) — 42번 이슈를 자동 처리

10. 예제: 심층 코드 탐색 (fork 격리 실행)

사용 시점: 대형 코드베이스에서 특정 주제를 깊게 조사해야 할 때

핵심 패턴: context: fork + agent: Explore로 별도 subagent 격리 실행 메인 컨텍스트를 오염시키지 않고 대규모 탐색 수행 가능

---
name: deep-research
description: "Deeply research a topic within the codebase. Use when exploring how a feature works, investigating a bug, or mapping out module dependencies."
context: fork
agent: Explore
allowed-tools: Read, Grep, Glob
---
 
**조사 주제**: $ARGUMENTS
 
다음 순서로 철저히 조사한다:
 
1. Glob으로 관련 파일 목록 수집
2. Grep으로 핵심 함수·클래스·변수 검색
3. Read로 주요 파일 내용 분석
4. 의존성 흐름과 호출 관계 정리
5. 조사 결과를 아래 형식으로 요약:
   - 관련 파일 목록 (경로 포함)
   - 핵심 함수/클래스 목록
   - 동작 방식 설명
   - 주의해야 할 부분

사용법: /deep-research 인증 흐름 (Claude Code)

11. 예제: 프레임워크 마이그레이션 (다중 변수)

사용 시점: 컴포넌트를 다른 프레임워크로 이전할 때

핵심 패턴: $0, $1, $2로 위치 기반 다중 인수 처리

---
name: migrate-component
description: "Migrate a UI component from one framework to another while preserving all behavior. Use when converting components between React/Vue/Svelte/Angular."
---
 
**대상 컴포넌트**: $0
**원본 프레임워크**: $1
**대상 프레임워크**: $2
 
마이그레이션 절차:
 
1. `$0` 컴포넌트의 현재 구현 분석
2. Props, State, 이벤트 핸들러, 생명주기 메서드 파악
3. `$2` 문법으로 동일 동작 구현
4. 기존 테스트 모두 통과하는지 확인
5. 마이그레이션 전후 동작 차이 보고

사용법: /migrate-component SearchBar React Vue (Claude Code) → $0=SearchBar, $1=React, $2=Vue 로 치환

12. 예제: 코드 설명 (비유 + 다이어그램)

사용 시점: 복잡한 코드를 팀원이나 주니어에게 설명해야 할 때

---
name: explain-code
description: "Explain code with analogies, ASCII diagrams and step-by-step walkthrough. Use when explaining how code works, onboarding team members, or when asked 'how does this work?'"
---
 
코드를 설명할 때 반드시 아래 4가지를 포함한다:
 
1. **비유로 시작**: 일상 생활 속 사물/상황에 빗대어 설명
2. **다이어그램 그리기**: ASCII art로 흐름·구조·관계 시각화

[입력] → [처리A] → [처리B] → [출력] ↓ [사이드이펙트]

3. **코드 단계별 설명**: 줄 단위 또는 블록 단위로 순서대로 설명
4. **함정 포인트**: 흔히 오해하거나 실수하는 부분 명시

설명은 대화체로 작성하고, 복잡한 개념일수록 비유를 여러 개 사용한다.

사용법: 선택한 코드 블록 하이라이트 후 /explain-code (Claude Code)

13. 고급 SKILL.md 기능

실전에서 유용한 고급 frontmatter 옵션과 패턴 모음.

변수 치환

변수설명예시
$ARGUMENTS사용자가 입력한 전체 인수 문자열/fix-issue 42 → "42"
$0, $1, $2공백 구분 위치 인수/migrate SearchBar React Vue
${CLAUDE_SESSION_ID}현재 세션 고유 ID로그 파일명에 활용
${CLAUDE_SKILL_DIR}현재 스킬 디렉토리 절대 경로템플릿 파일 참조 시

동적 컨텍스트 주입

스킬 본문 안에서 !`shell 명령어` 문법을 사용하면 스킬 실행 시점에 명령 결과가 주입된다.

## 현재 상태
- git 상태: !`git status --short`
- 최근 커밋: !`git log --oneline -5`
- PR diff: !`gh pr diff`

격리 실행 (fork)

context: fork        # 별도 subagent에서 실행 (메인 컨텍스트 보호)
agent: Explore       # 사용할 subagent 유형

대규모 탐색 작업, 무거운 분석 등 메인 컨텍스트를 오염시키고 싶지 않을 때 사용.

핵심 판단 기준

상황설정
커밋·배포 등 side effect 있는 스킬disable-model-invocation: true
팀 컨벤션 등 배경 지식만 제공user-invocable: false
대규모 코드 탐색·분석context: fork + agent: Explore
실시간 외부 데이터 필요!`gh pr diff` 동적 주입
도구 접근 제한 필요allowed-tools: Read, Grep, Glob

14. 어떤 작업에 Skills를 활용하면 좋을까?

작업 유형Skills 효과예시
반복 워크플로매번 설명 없이 사용 가능커밋, 배포, PR
팀 표준 적용모두가 같은 방식으로컨벤션, 코드 스타일
품질 점검빠짐없이 체크보안 감사, 배포 전 점검
파일 생성일관된 보일러플레이트컴포넌트, API, 테스트
문서화자동 생성PR 설명, 변경 이력

문서 탐색

이전다음
2.1.2 Skills 만들기2.2.1 에이전트란?

참고 자료

Graph View

Backlinks