Agent skill

pf-code-review

pf-frontend 프로젝트 컨벤션과 React 19 Best Practices 기반 코드 리뷰. "코드 리뷰", "리뷰해줘", "이 코드 괜찮아?" 요청 시 사용.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/pf-code-review

SKILL.md

PF 코드 리뷰

$ARGUMENTS 파일 또는 변경사항을 리뷰합니다.

리뷰 체크리스트

1. React 19 패턴

  • forwardRef 제거: ref를 prop으로 직접 전달하는지
  • 불필요한 메모이제이션: useMemo/useCallback/memo가 정말 필요한지
  • 새 Hooks 활용: use(), useOptimistic, useActionState 적용 가능한지
  • Suspense 활용: 로딩 상태를 Suspense로 처리할 수 있는지
tsx
// ❌ 리뷰 포인트
const MemoizedComponent = memo(forwardRef((props, ref) => {
  const memoizedValue = useMemo(() => props.data, [props.data]);
  const handleClick = useCallback(() => onClick(), [onClick]);
  // ...
}));

// ✅ React 19 개선
function Component({ ref, data, onClick }) {
  // 메모이제이션 제거 (React Compiler가 처리)
  // ...
}

2. TypeScript

  • any 타입 금지: unknown 또는 구체적 타입 사용
  • Props 인터페이스: 컴포넌트마다 명시적 타입 정의
  • strict 모드 준수: noUncheckedIndexedAccess 등
  • 타입 추론 활용: 불필요한 타입 명시 피함
tsx
// ❌ 문제
function Component(props: any) {
  const item = items[0]; // undefined 가능성 무시
}

// ✅ 개선
interface ComponentProps {
  items: Item[];
}

function Component({ items }: ComponentProps) {
  const item = items[0]; // Item | undefined (strict 모드)
  if (!item) return null;
}

3. 상태관리 (Zustand)

  • Selector 사용: 전체 store 대신 필요한 값만 구독
  • State/Actions 분리: 인터페이스 분리
  • persist 설정: partialize로 필요한 값만 저장
tsx
// ❌ 불필요한 리렌더링
const { user, settings, theme } = useStore(); // user만 필요한데 전체 구독

// ✅ Selector로 최적화
const user = useStore(state => state.user);
// 또는
const user = useStore(selectUser);

4. API 호출

  • 서비스 레이어: apiClient 직접 호출 대신 service 함수 사용
  • 에러 처리: try-catch 또는 에러 바운더리
  • 타입 안전성: 응답 타입 명시
tsx
// ❌ 컴포넌트에서 직접 호출
const data = await apiClient.get("/users");

// ✅ 서비스 레이어 활용
const data = await userService.getUsers();

5. 컴포넌트 구조

  • 단일 책임: 하나의 역할만 담당
  • 적절한 분리: 500줄 이상이면 분리 검토
  • Props 전달: 3단계 이상 prop drilling 피함
  • 조건부 렌더링: 복잡하면 별도 컴포넌트로
tsx
// ❌ 복잡한 조건부 렌더링
{isLoading ? <Loading /> : error ? <Error /> : data ? <List data={data} /> : null}

// ✅ 분리
if (isLoading) return <Loading />;
if (error) return <Error error={error} />;
if (!data) return null;
return <List data={data} />;

6. 스타일링

  • Tailwind 클래스 순서: 일관성 유지
  • cn() 사용: 동적 클래스 병합
  • CVA 활용: variant가 많으면 CVA 패턴
tsx
// ❌ 하드코딩된 조건부 스타일
className={`btn ${variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500'}`}

// ✅ CVA + cn()
className={cn(buttonVariants({ variant, size }), className)}

7. 성능

  • 불필요한 리렌더링: React DevTools로 확인
  • 큰 리스트: 가상화 검토 (10,000+ 항목)
  • 이미지 최적화: lazy loading, 적절한 크기
  • 번들 크기: 동적 import 검토

8. 접근성

  • 시맨틱 HTML: 적절한 태그 사용
  • 키보드 접근성: Tab, Enter, Escape 처리
  • ARIA 속성: 필요시 aria-label 등
  • 색상 대비: 충분한 대비율
tsx
// ❌ 접근성 문제
<div onClick={handleClick}>클릭</div>

// ✅ 개선
<button onClick={handleClick} aria-label="작업 실행">
  클릭
</button>

9. 보안

  • XSS 방지: dangerouslySetInnerHTML 사용 검토
  • 환경변수: 민감 정보 노출 여부
  • 입력 검증: Zod 스키마 사용

10. 코드 스타일

  • 네이밍: 명확하고 일관된 이름
  • 주석: 복잡한 로직에만 최소한으로
  • 파일 구조: 프로젝트 컨벤션 준수
  • export: named export 사용

리뷰 출력 형식

markdown
## 코드 리뷰 결과

### ✅ 잘된 점
- ...

### ⚠️ 개선 필요
1. **[카테고리]** 설명
   - 현재: `코드`
   - 개선: `코드`
   - 이유: 설명

### 💡 제안
- ...

### 📊 요약
| 항목 | 상태 |
|------|------|
| React 19 패턴 | ✅/⚠️/❌ |
| TypeScript | ✅/⚠️/❌ |
| 성능 | ✅/⚠️/❌ |
| 접근성 | ✅/⚠️/❌ |

Context7 활용

최신 React 문서가 필요하면 Context7로 조회:

  • React 19 공식 문서
  • Zustand 최신 패턴
  • Tailwind CSS 최신 기능
  • TypeScript 최신 기능

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results