Imported from yukinouz/react-api-user-list (.rulesync/skills/review-guideline/SKILL.md). Install upstream with npx skills add yukinouz/react-api-user-list --skill review-guideline. Copyright stays with the author.

Pre-Review (PR 提出前セルフレビュー)

目的

PR を提出する前に、開発者自身がコードの品質をチェックし、レビュアーの負担を軽減する。「完璧」を目指すのではなく、「継続的改善」を目指す。

Instructions

ユーザーが PR 提出前のセルフレビューを依頼したら、以下の手順で対応してください：

1. 変更内容の取得

# 変更ファイル一覧を取得
git diff main...HEAD --name-only

# 変更行数を取得
git diff main...HEAD --stat

# 変更内容を取得
git diff main...HEAD

2. PR サイズのチェック

以下の基準を満たしているか確認：

変更行数: ~300 行以下（超えそうなら分割を提案）
変更ファイル数: ~10 個以下（超えそうなら分割を提案）
理想のレビュー完了時間: 20 分以内

サイズが大きい場合は、分割方法を具体的に提案する。複数セクションを一度に含む PR の場合は、目安 300 行を境に、2〜4 セクション程度を 1 PR にまとめる形で分割を提案する（1 セクション 1 PR だと diff が細かくなりすぎるため避ける）。

3. コードレビュー観点でのチェック

以下の観点で変更内容をレビュー：

TypeScript

ユーザー・API レスポンス（totalCount, users）・ページネーション状態など、ドメインに沿った型があるか（any や過度な型断言に逃げていないか）

コンポーネント分割

一覧表示・ページネーション・データ取得など、責務と粒度が分かれているか（1 ファイルに詰め込みすぎていないか）

テスト実装

アプリケーションまたはコンポーネントに対するテストが追加・更新されているか
ページネーションやデータ取得など、主要な振る舞いをテストで担保しているか

アプリケーション要件

http://localhost:4000/users から MSW モック経由でデータを取得しているか
取得データをテーブル形式で表示しているか（1 ページ 10 件）
ページに「ユーザーリスト」というタイトルが表示されているか
ユーザーが見つからなかった場合の表示が用意されているか

API とモックデータ

クエリパラメータ page（デフォルト 1）と pageSize（デフォルト 10）を正しく渡しているか
レスポンスの totalCount と users（id, name）を正しく扱っているか
存在しないページ（users: [] + 404）の空状態・エラー状態を考慮しているか
500 レスポンス（モックで約 1% 発生）のエラー表示や再試行など、必要に応じて考慮しているか

ページネーション

totalCount と pageSize から最終ページを計算し、First/Previous・Next/Last の無効化タイミングが正しいか
ローディング中は 4 ボタンすべてが無効になっているか

3.1 設計

コードはシステムに適した、良い設計になっているか
適切な責務分離ができているか

3.2 機能

コードは作者の意図どおりに動作するか
ユーザーにとって望ましい挙動か
エッジケースは考慮されているか

3.3 複雑さ

もっと単純にできないか
将来、他の開発者が容易に理解・利用できるか
不要なメモ化（useCallback, useMemo, React.memo）を使用していないか

3.4 命名

変数、クラス、メソッドなどの名前は明確か
S-I-D 原則（Short, Intuitive, Descriptive）に従っているか
on/handle の使い分けは正しいか
is/has の使い分けは正しいか

3.5 コメント

コメントは明確で有用か
「なぜ」を説明しているか（「何を」ではなく）
自己記述的なコメントは含まれていないか
TODO/FIXME/NOTE/WARNING が適切に使用されているか

3.6 スタイル

ESLint・Prettier・命名規則・ファイル構成・プロジェクトのスタイルガイドに従っているか
TypeScript の型定義は明示的か（any 禁止）
既存のスタイル方針（App.css 等）と矛盾しないか

3.7 テスト

テストコードは追加・更新されているか

3.8 アクセシビリティ

セマンティックな HTML（<main>, <section>, <nav> や見出し階層など）が適切に使われているか
マークアップに role 属性や aria-label 等が、必要に応じて適切に付与されているか

3.9 セキュリティ

秘密情報（API キー、パスワード等）が含まれていないか
console.log やデバッグコードが残っていないか

4. レビュー結果の出力

以下の形式で結果を出力：

## PR セルフレビュー結果

### サイズ

- 変更行数: XX 行 [OK/要分割]
- 変更ファイル数: XX 個 [OK/要分割]

### チェック結果

#### 問題あり（対応必須）

- [ファイル名:行番号] 問題の説明と修正提案

#### 提案（任意）

- [nit] [ファイル名:行番号] 改善提案（対応しなくても良い）

### 総評

レビュー可能な状態かどうかの判断と、必要に応じて改善点のサマリー

5. 修正の支援

問題が見つかった場合、ユーザーに確認の上で修正を支援する。

レビューコメントのラベル

重要度に応じて以下のラベルを使用：

ラベル	説明
`[must]`	対応必須の問題
`[nit]`	仕上げレベルの指摘（無視しても良い）
`[ask]`	質問・確認事項
`[suggest]`	提案（より良い方法がある場合）
`[praise]`	良いコードへの称賛（学びの共有）
`[no rush]`	今やらなくても良いが、将来的には解決したい提案。タスク化や修正を検討する。

Examples

ケース 1: 小さな PR のセルフレビュー

User: "PRを出す前にセルフレビューして"

Claude:
1. 変更内容を取得
   - 変更ファイル: 3 個
   - 変更行数: 85 行

2. サイズチェック: OK

3. コードレビュー実施

4. 結果出力:
   ## PR セルフレビュー結果

   ### サイズ
   - 変更行数: 85 行 [OK]
   - 変更ファイル数: 3 個 [OK]

   ### チェック結果

   #### 問題あり（対応必須）
   - なし

   #### 提案（任意）
   - [nit] src/components/Pagination/Pagination.tsx:15 - handleButtonClick は handleClick で十分です（コンテキストが明確なため）

   ### 総評
   レビュー可能な状態です。軽微な命名の改善提案がありますが、必須ではありません。

ケース 2: 大きな PR の分割提案

User: "/review-guideline"

Claude:
1. 変更内容を取得
   - 変更ファイル: 15 個
   - 変更行数: 450 行

2. サイズチェック: 要分割

3. 結果出力:
   ## PR セルフレビュー結果

   ### サイズ
   - 変更行数: 450 行 [要分割] ※目安: ~300 行
   - 変更ファイル数: 15 個 [要分割] ※目安: ~10 個

   ### 分割提案
   この PR は以下のように分割することを推奨します：

   **PR 1: ユーザーリスト表示の追加**
   - src/components/UserTable/UserTable.tsx
   - src/hooks/useUsers.ts
   - src/types/user.ts
   推定: 150 行, 3 ファイル

   **PR 2: ページネーションの追加**
   - src/components/Pagination/Pagination.tsx
   - src/hooks/usePagination.ts
   推定: 120 行, 2 ファイル

   **PR 3: テストの追加**
   - src/components/UserTable/UserTable.test.tsx
   - src/components/Pagination/Pagination.test.tsx
   - ...
   推定: 120 行, 9 ファイル

   分割して PR を作成しますか？

ケース 3: 問題が見つかった場合

User: "セルフレビューお願い"

Claude:
## PR セルフレビュー結果

### サイズ
- 変更行数: 120 行 [OK]
- 変更ファイル数: 4 個 [OK]

### チェック結果

#### 問題あり（対応必須）
- src/hooks/useUsers.ts:25 - `any` 型が使用されています。API レスポンス用の型定義に変更してください
- src/components/Pagination/Pagination.tsx:30 - ローディング中もページネーションボタンが有効のままです

#### 提案（任意）
- [nit] src/hooks/useUsers.ts:30 - `data` より `users` の方が明確です

### 総評
3 件の必須対応事項があります。修正後に再度セルフレビューを実行してください。

---
修正を手伝いましょうか？

注意事項

レビューは「継続的改善」を目指し、「完璧」を求めない
個人の好みではなく、設計の原則や既存コードの一貫性を重視
学びにつながるコメントは積極的に共有
重要度が高くない指摘には [nit] を付ける

review-guideline

About