---
description: [명령어 식별자] Custom Skill Example - 팀의 암묵지 또는 반복되는 복잡한 패턴 처리 가이드
---

# 🛠️ [Skill 이름] 적용 가이드

이 문서는 AI 에이전트가 특정 작업 패턴이나 도메인 로직을 구현할 때 일관성을 유지하도록 돕는 커스텀 스킬 가이드입니다. 프로젝트에 특화된 암묵지, 규약, 공통 컴포넌트 사용법 등을 정의하세요.

## 🎯 사용 목적
- 언제 이 커스텀 스킬을 적용해야 하는지 명시합니다.
- 예: "새로운 폼(Form) 컴포넌트를 작성할 때", "새로운 인증 라우트를 추가할 때"

## ✅ 핵심 규칙 (Core Rules)
작업 시 반드시 지켜야 할 주요 원칙입니다. 가급적 AI가 바로 이해하여 코드로 적용할 수 있도록 구체적으로 작성하세요.

1. **규칙 1**: 외부 라이브러리(예: axios) 직접 사용이 아닌 래퍼 함수(`utils/apiClient.ts`)를 활용하라.
2. **규칙 2**: 컴포넌트에 마진(margin) 부여를 금지하고 부모(layout) 컨테이너에서 `gap`과 `padding`으로 간격을 제어하라.
3. **규칙 3**: 에러 처리는 항상 `SharedErrorBoundary`로 위임하여 사용자 경험을 통일하라.

## 💡 구현 패턴 예시 (Implementation Pattern)

### ❌ 잘못된 예 (Anti-pattern)
```typescript
// 직접 스타일링 또는 하드코딩된 API 호출 방식
import axios from 'axios';

function FetchData() {
  const [data, setData] = useState(null);
  useEffect(() => {
    axios.get('/api/users').then(res => setData(res.data));
  }, []);
  // ...
}
```

### 🟢 올바른 예 (Best Practice)
```typescript
// 공통 api 훅을 활용한 일관성 있는 구조
import { useQuery } from '@tanstack/react-query';
import { fetchUsers } from '@/services/user.service';

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers
  });
  // ...
}
```

## 🔄 마무리 체크리스트 (Verification)
- [ ] 정해진 공통 모듈(Hook/Util/UI Component)을 재사용했는가?
- [ ] 예외 상황(Loading, Error)을 팀에서 합의된 UI 패턴으로 처리했는가?
- [ ] 하드코딩된 문자열 대신 번역/상수 파일을 사용했는가?