mcpField
F
frontend-code-review

frontend-code-review

github.com/pageai-proテスト・品質33576 回インストール18 週間前に更新
リポジトリ

frontend-code-review について

frontend-code-review は、フロントエンドコードをレビューするスキルです。コミット前の変更と指定ファイルを対象に、コード品質、パフォーマンス、ビジネスロジックのルールを確認し、緊急度順に所定の形式で結果をまとめます。

主な機能

  1. 01ステージ済みと作業ツリーの変更をレビュー
  2. 02指定されたフロントエンドファイルをレビュー
  3. 03コード品質とパフォーマンスの規則を確認
  4. 04緊急度別に指摘事項を整理
  5. 05所定のテンプレートで結果を出力

活用シーン

  1. 01コミット前にフロントエンド変更を確認
  2. 02指定した TSX ファイルをレビュー
  3. 03コンポーネントの性能問題を発見
  4. 04コードの指摘事項を優先度別に整理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pageai-pro/ralph-loop --skill frontend-code-review

インストール後、Claude Code で/frontend-code-reviewを入力して読み込まれたか確認します。

同梱ファイルreferences/code-quality.mdreferences/performance.md

詳細

フロントエンドのコードレビュー

目的

ユーザーがフロントエンドのコード（特に .tsx、.ts、.js ファイル）のレビューを依頼した場合は、必ずこのスキルを使用してください。次の2つのレビュー方法に対応します。

  1. 変更待ちのレビュー – コミット予定のステージ済みファイル／作業ツリー内のファイルを確認し、提出前にチェックリストへの違反を指摘します。
  2. ファイル指定のレビュー – ユーザーが指定したファイルをレビューし、該当するチェックリスト項目の問題を報告します。

該当するすべてのファイルとレビュー方法において、以下のチェックリストに従ってください。

チェックリスト

カテゴリごとに分けられた最新のチェックリストについては、references/code-quality.md と references/performance.md を参照してください。これらを従うべき正規のルールセットとして扱ってください。

今後のレビュアーが修正の優先順位を決められるよう、各ルール違反に緊急度のメタデータを付けてください。

レビュープロセス

  1. 該当するコンポーネント／モジュールを開きます。クラス名、React Flow のフック、プロパティのメモ化、スタイルに関連する行を集めます。
  2. レビュー項目にある各ルールについて、コードが逸脱している箇所を示し、代表的なスニペットを抜き出します。
  3. 以下のテンプレートに従ってレビューセクションを作成します。違反はまず Urgent フラグごとにまとめ、その後カテゴリの順序（Code Quality、Performance、Business Logic）で並べます。

必須の出力

呼び出された場合、応答は次のいずれかのテンプレートに厳密に従う必要があります。

テンプレート A（問題がある場合）
# Code review
Found <N> urgent issues need to be fixed:

## 1 <brief description of bug>
FilePath: <path> line <line>
<relevant code snippet or pointer>


### Suggested fix
<brief description of suggested fix>

---
... (repeat for each urgent issue) ...

Found <M> suggestions for improvement:

## 1 <brief description of suggestion>
FilePath: <path> line <line>
<relevant code snippet or pointer>


### Suggested fix
<brief description of suggested fix>

---

... (repeat for each suggestion) ...

緊急の問題がない場合は、そのセクションを省略します。提案がない場合は、そのセクションを省略します。

問題の件数が10件を超える場合は、「10+ urgent issues」または「10+ suggestions」と要約し、最初の10件のみを出力します。

読みやすさを保つため、セクション間の空行を詰めないでください。

テンプレート A（修正が必要な問題がある場合）を使用し、少なくとも1件にコード変更が必要な場合は、構造化された出力の後に、提案された修正を適用するかどうかを尋ねる短い質問を追加してください。例：「提案された修正を使って、これらの問題に対処しましょうか？」

テンプレート B（問題がない場合）
## Code review
No issues found.

コメント

Markdown 対応