AgentSkillsCN

code-review

审查前端代码，寻找最佳实践、Bug与改进。适用于审查PR、检查代码质量，或提交前使用。

SKILL.md
--- frontmatter
name: code-review
description: Review frontend code for best practices, bugs, and improvements. Use when reviewing PRs, checking code quality, or before committing.
allowed-tools:
  - Read
  - Grep
  - Glob
  - Bash
argument-hint: <file_path>
user-invocable: true

前端代码审查

对前端代码进行审查，检查最佳实践、潜在错误和改进建议。

Instructions

  1. •读取指定的文件或目录
  2. •检查以下方面：
    • •代码风格一致性（ESLint、Prettier 等）
    • •潜在的 bug 或错误
    • •性能问题
    • •安全漏洞
    • •可读性和可维护性
    • •前端特定问题（如 React hooks 规则、状态管理、组件设计等）
    • •TypeScript 类型安全
    • •CSS/样式最佳实践
  3. •提供具体的改进建议

审查要点

JavaScript/TypeScript

  • •检查未使用的变量和导入
  • •确保正确使用异步操作（async/await, Promise）
  • •检查错误处理是否完善
  • •验证 React hooks 使用是否符合规则
  • •检查状态管理是否合理
  • •确保组件设计遵循单一职责原则

性能

  • •检查不必要的组件重渲染
  • •验证是否使用了适当的 memoization
  • •检查是否有内存泄漏风险
  • •确保资源（如事件监听器）被正确清理

安全性

  • •检查 XSS 漏洞（如 dangerouslySetInnerHTML 的使用）
  • •验证用户输入是否被正确验证和转义
  • •检查 API 调用是否安全

可访问性 (Accessibility)

  • •检查是否使用了适当的 ARIA 属性
  • •验证语义化 HTML 标签的使用
  • •确保键盘导航支持

TypeScript

  • •检查类型定义是否完整和准确
  • •验证是否避免了 any 类型的滥用
  • •确保接口和类型定义清晰

Output Format

  • •问题严重程度：🔴 严重 | 🟡 警告 | 🔵 建议
  • •具体位置和代码片段
  • •问题描述
  • •改进建议和示例代码
  • •相关最佳实践链接（如适用）

Examples

严重问题示例

code
🔴 严重: 潜在 XSS 漏洞
文件: src/components/UserProfile.tsx:25
问题: 使用了 dangerouslySetInnerHTML 且未对内容进行适当清理
建议: 使用 React 组件替代或对内容进行适当的 HTML 转义

警告问题示例

code
🟡 警告: 性能问题
文件: src/components/ItemList.tsx:42
问题: 在渲染循环中创建新函数，可能导致不必要的重渲染
建议: 将函数移出渲染函数或使用 useCallback 包装

建议改进示例

code
🔵 建议: 代码可读性
文件: src/utils/helpers.ts:15
问题: 函数名称不够描述性
建议: 将函数名从 processData 更改为更具体的 transformUserData