react-doctor について
react-doctorは、Reactコードベースのセキュリティ、パフォーマンス、正確性、設計上の問題を検出するコマンドラインスキルです。ファイル位置付きの診断と、0〜100のスコアを提示します。
主な機能
- 01複数領域を対象とする47以上のルール
- 02ファイルと行番号付きの診断
- 03コードベースを0〜100で採点
- 04Next.jsとサーバーのパターンを検査
活用シーン
- 01Reactプロジェクトのセキュリティ確認
- 02パフォーマンスとバンドルサイズの問題発見
- 03診断の重大度に基づく修正の優先付け
- 04修正後のコードの再検査
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/react-doctorを入力して読み込まれたか確認します。
詳細
React Doctor
React コードベースのセキュリティ、パフォーマンス、正確性、アーキテクチャの問題をスキャンします。実行可能な診断とともに 0〜100 のスコアを出力します。
使用方法
npx -y react-doctor@latest . --verbose
ワークフロー
- プロジェクトのルートで上記のコマンドを実行します
- ファイルパスと行番号を含むすべての診断を確認します
- エラー（最も重大度が高い）から順に問題を修正します
- 再度実行してスコアが改善したことを確認します
ルール（47 以上）
- セキュリティ: クライアントバンドルへのハードコードされたシークレット、eval()
- 状態とエフェクト: useEffect 内の派生状態、クリーンアップの欠如、props からの useState、連鎖する setState
- アーキテクチャ: コンポーネント内のコンポーネント、巨大なコンポーネント、インラインのレンダー関数
- パフォーマンス: レイアウトプロパティのアニメーション、transition-all、大きな blur 値
- 正確性: キーとしての配列インデックス、条件付きレンダリングのバグ
- Next.js: metadata の欠如、サーバーデータに対するクライアントサイドフェッチ、非同期クライアントコンポーネント
- バンドルサイズ: バレルインポート、lodash 全体、moment.js、コード分割の欠如
- サーバー: サーバーアクションにおける認証の欠如、after() なしのブロッキング
- アクセシビリティ: prefers-reduced-motion の欠如
- デッドコード: 未使用のファイル、エクスポート、型
スコア
- 75 以上: 良好
- 50〜74: 要改善
- 0〜49: 危機的
コメント
Markdown 対応