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 個
主要問題：
- 2 次在清單映射中缺少 React key
- 1 次 useEffect 沒有清理函式
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
- 檢視所有警告，而不僅僅是錯誤
- 在開發早期使用此技能可防止問題累積
- 將 react-doctor 整合到 CI 管道中以進行自動化檢查
Éviter
- 在不理解的情況下忽略警告
- 僅在出現錯誤時才執行 react-doctor（而非主動執行）
- 在未評估取捨的情況下停用規則
- 僅依賴 react-doctor 而不進行手動程式碼審查