frontend-code-review
審查前端程式碼
前端程式碼審查可幫助開發人員在部署前發現錯誤和不良模式。此技能使用業界最佳實踐,為 TypeScript、JavaScript、TSX 和 JSX 檔案提供基於清單的自動化審查。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-code-review". Review app/components/button.tsx
النتيجة المتوقعة:
- ## Code Review: app/components/button.tsx
- ### Business Logic
- ✓ Error boundaries handled appropriately
- ✓ Type definitions are strict
- ### Code Quality
- ✓ Component naming follows PascalCase convention
- ✓ Props are properly typed with interfaces
- ⚠ Consider extracting inline styles to CSS modules
- ### Performance
- ✓ No unnecessary re-renders detected
- ✓ Event handlers are properly memoized
استخدام "frontend-code-review". Review app/utils/api.ts
النتيجة المتوقعة:
- ## Code Review: app/utils/api.ts
- ### Business Logic
- ⚠ Missing error handling for network failures
- ✓ API response validation in place
- ### Code Quality
- ✓ Consistent naming convention for functions
- ⚠ Consider using a typed response wrapper
- ### Performance
- ✓ Appropriate use of caching annotations
- ✓ Request deduplication implemented
التدقيق الأمني
آمنDocumentation-only skill with no executable code. Static scanner flagged text patterns in markdown files (backticks for code formatting, URLs in references, technical terms in documentation). All 45 detected patterns are FALSE POSITIVES - markdown documentation cannot execute commands, make network calls, or contain exploitable code. Safe for publication.
مشكلات منخفضة المخاطر (1)
عوامل الخطر
⚙️ الأوامر الخارجية
🌐 الوصول إلى الشبكة
درجة الجودة
ماذا يمكنك بناءه
快速檔案審查
請求對單一檔案進行重點審查,以立即獲得程式碼品質和潛在問題的回饋。
Pull Request 審查
審查 Pull Request 中所有已更改的檔案,以確保程式碼在合併前符合品質標準。
舊程式碼評估
評估較舊的程式碼庫以識別技術債務並優先考慮重構工作。
جرّب هذه الموجهات
Review this file for code quality and potential issues:
${file_path}Review these changed files for a pull request. Apply the full checklist from business-logic.md, code-quality.md, and performance.md:
${file_paths}Review this file with emphasis on business logic and error handling:
${file_path}Perform a complete code review of the following files. For each issue found, explain the problem and suggest improvements:
${file_paths}أفضل الممارسات
- 對重點單一檔案審查和全面的多檔案評估都使用此技能,以發現不同類型的問題
- 在上下文中審查發現 - 有些建議可能不適用於您的特定用例或程式碼標準
- 將自動化審查與手動測試相結合,以確保程式碼不僅結構良好,而且能正確運作
تجنب
- 避免請求審查非前端檔案(Python、Go 等)- 此技能已針對 TS/JS 生態系統進行優化
- 不要期望此技能執行或測試您的程式碼 - 它僅提供靜態分析
- 避免忽視與 TypeScript 類型相關的發現 - 嚴格的類型可防止執行時錯誤