frontend-code-review：Difyのフロントエンドコードレビューを自動化するスキル
導入
フロントエンドのコードレビューは、開発チームにとって大きな負担になりがちです。コード品質、パフォーマンス、ビジネスロジックの正確性など、確認すべきポイントが多岐にわたり、レビュアーの経験や注意力に依存する部分も大きいのが現実です。
frontend-code-reviewは、Dify（オープンソースのLLMアプリ開発プラットフォーム、127K+ Stars）の公式スキルとして提供されており、チェックリストベースの構造化されたフロントエンドコードレビューをClaude Codeが実行できるようにします。
このスキルは何をしてくれるのか
frontend-code-reviewは、2つのレビューモードと構造化された出力フォーマットを提供します。
レビューモード
- pending-changeレビュー - Git上の未コミット・未プッシュの変更を対象に、一括レビューを実行
- ファイル指定レビュー - 特定のファイルやディレクトリを指定してレビューを実行
チェックリストカテゴリ
- Code Quality - 命名規則、型安全性、コード構造の適切さ
- Performance - 不要な再レンダリング、メモ化の適用、バンドルサイズへの影響
- Business Logic - 仕様との整合性、エッジケースの処理、エラーハンドリング
出力フォーマット
- Template A（指摘あり） - 問題点をUrgency（High/Medium/Low）付きで一覧表示
- Template B（指摘なし） - 問題がない場合の簡潔な承認レポート
インストール方法
Difyプロジェクトの.claude/skills/ディレクトリに配置します。
mkdir -p .claude/skills/frontend-code-review
Difyリポジトリをクローンしている場合は、リポジトリの.claude/skills/ディレクトリに含まれている場合があります。
使い方
pending-changeレビュー
作業中の変更をまとめてレビューしたい場合に使います。
「フロントエンドの変更をコードレビューして」
Claude CodeがGitの差分を分析し、チェックリストに基づいたレビューレポートを生成します。Urgencyメタデータにより、優先度の高い問題が一目でわかります。
ファイル指定レビュー
特定のコンポーネントやモジュールに絞ってレビューしたい場合に使います。
「web/app/components/workflow/ ディレクトリのコードレビューをして」
指定されたファイルやディレクトリ内のコードに対して、集中的なレビューが実行されます。
レビュー結果の活用
レビューで指摘された問題は、Urgencyレベルで優先順位付けされています。
- High - すぐに修正が必要（バグ、セキュリティ問題）
- Medium - 近いうちに対応すべき（パフォーマンス、保守性）
- Low - 改善推奨（コードスタイル、ベストプラクティス）
知っておくべき注意点
- TypeScript/React/JSファイルに特化しています。バックエンドコード（Python等）は対象外です
- Difyプロジェクトの規約やディレクトリ構造を前提としたチェック項目が含まれています
- 自動レビューはあくまで補助ツールです。最終的な判断は人間のレビュアーが行ってください
- 大量のファイル変更がある場合、レビューの実行に時間がかかることがあります
まとめ
frontend-code-reviewは、Difyプロジェクトのフロントエンドコードレビューをチェックリストベースで自動化するスキルです。2つのレビューモードとUrgencyベースの優先順位付けにより、レビューの効率と品質を向上させます。特にチームでの開発において、レビューの一貫性を保つための有効なツールです。