react-doctor
Reactの問題を自動診断
このスキルは、変更後にReactコードの問題を自動的に検出し、開発者が問題が大きくなる前に早期にバグを発見するのに役立ちます。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "react-doctor". react-doctorでReactコンポーネントをチェックしてください
Résultat attendu:
React Doctorレポート
✅ 重大な問題は見つかりませんでした
⚠️ 2件の警告が検出されました:
1. useEffectの依存関係が不足しています: 'userId'
場所: UserProfile.jsx:15
提案: 依存関係配列に'userId'を追加するか、useCallbackを使用してください
2. インラインスタイルが検出されました
場所: Header.jsx:23
提案: パフォーマンス向上のためCSSクラスに抽出することを検討してください
Utilisation de "react-doctor". プロジェクトでreact-doctorを実行してください
Résultat attendu:
React Doctorサマリー
スキャン: 42ファイル
発見された問題: 5件
- 重大: 0件
- 警告: 3件
- 情報: 2件
主要な問題:
- リストマッピングでReactキーが2件不足
- クリーンアップ関数なしのuseEffectが1件
Audit de sécurité
SûrStatic analysis found two patterns (external_commands, weak cryptographic algorithm) but evaluation confirms these are false positives. The external_commands finding is markdown documentation describing development commands (not actual execution). The weak cryptographic algorithm finding is likely a misidentification of normal text in the markdown file. This is a legitimate React debugging tool with no malicious intent.
Problèmes à risque moyen (1)
Problèmes à risque faible (1)
Score de qualité
Ce que vous pouvez construire
機能開発後のチェック
新しい機能の完了後にコミットする前にReactの問題を検出するために実行
コードレビュー前の品質ゲート
Reactベストプラクティスが守られていることを確認するためにコードレビュープロセスの一環として使用
レガシーコードベースの監査
古いReactコードをスキャンして技術的負債と潜在的なバグを特定
Essayez ces prompts
react-doctorスキルを使用して、最近のReactの変更に問題がないか確認してください
Buttonコンポーネントとその関連ファイルでreact-doctorを実行してください
srcディレクトリ全体でreact-doctorを実行して、すべての潜在的な問題を特定してください
react-doctorを使用して、バグ修正が元の問題を解決し、新しい問題を引き起こしていないことを確認してください
Bonnes pratiques
- 重大なコード変更ごとにreact-doctorを実行してください
- エラーだけでなく、すべての警告を確認してください
- 開発のごろにスキルを使用して、問題が蓄積されるのを防いでください
- 自動チェックのためにCIパイプラインにreact-doctorを統合してください
Éviter
- 警告を理解せずに無視する
- バグが発生したときだけreact-doctorを実行する（プロアクティブではなく）
- トレードオフを評価せずにルールを無効にする
- 手動のコードレビューなしでreact-doctorのみに依存する