SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfrontend-code-review

frontend-code-review

Coding & development

View repository

Updated 10-15 20:05

About this skill

Frontend Code Review Skill

Skill Purpose

Systematically review frontend code, covering multiple dimensions such as code quality, performance, security, and accessibility. Supports React, Vue, Angular, and native JavaScript/TypeScript projects.

Review Workflow

Step 1: Identify Project Type and Scope

Perform the following identification tasks:

  1. Determine the framework type (React, Vue, Angular, native JS/TS)
  2. Assess the code scale (single component, feature module, full application)
  3. Check for obvious syntax errors, formatting issues, or import errors

Step 2: Multi-Dimensional Systematic Review

Review the code one by one according to the following dimensions:

Code Quality

  • Check whether naming is semantic and consistent
  • Identify code duplication and opportunities for refactoring
  • Confirm whether functions/components follow the single responsibility principle
  • Evaluate the reasonableness of file organization and module structure

Feature Implementation

  • Verify the correctness of business logic
  • Check edge cases and error handling
  • Review asynchronous operation handling (Promise, async/await)
  • Confirm user feedback mechanisms for loading states and error states

Performance Optimization

  • Identify unnecessary component re-renders
  • Check whether the key usage in list rendering is correct
  • Evaluate the impact on bundle size
  • Review image optimization strategies (format, lazy loading, responsiveness)
  • Check network request efficiency (caching, deduplication, debounce/throttle)

Security

  • Detect XSS vulnerabilities (unescaped input, dangerouslySetInnerHTML usage)
  • Verify input validation and data sanitization
  • Review sensitive data handling (localStorage, API tokens)
  • Check CSRF protection mechanisms
  • Evaluate the security risks of third-party dependencies

Accessibility (a11y)

  • Check the use of semantic HTML
  • Verify the correctness of ARIA attributes
  • Test keyboard navigation support
  • Check color contrast
  • Confirm image alt text and form labels

Framework-Specific Patterns

React:

  • Check Hook usage (useEffect dependency arrays, custom Hook design)
  • Identify closure traps
  • Verify the correct use of controlled and uncontrolled components
  • Evaluate the appropriateness of Context usage
  • Review state management design (local vs global)

Vue 3 Composition API:

  • Check whether ref/reactive usage is reasonable
  • Verify whether computed/watch usage is correct
  • Evaluate component communication methods (props/emit/provide/inject)
  • Check lifecycle hook usage
  • Review whether composable function (Composables) extraction is reasonable

TypeScript:

  • Verify the accuracy and completeness of type definitions
  • Identify any excessive use of the any type
  • Check the reasonableness of generic usage
  • Evaluate the reusability of interfaces/types

Browser Compatibility

  • Check features supported by target browsers
  • Validate CSS vendor prefixes
  • Assess polyfill necessity
  • Review responsive design implementation

Step 3: Generate a structured report

Output the review results using the following format:

## 🔍 代码审查报告

### 文件：[文件路径]

#### ✅ 优秀实践

列出代码中做得好的地方：
- 优雅的解决方案
- 良好的设计模式
- 清晰的代码结构
- 周到的抽象设计

#### ⚠️ 需要改进的问题

| 类别 | 问题描述 | 改进建议 | 严重程度 |
|------|---------|---------|----------|
| 性能 | [具体问题] | [改进方案] | 🔴 高 / 🟡 中 / 🟢 低 |

#### 📊 代码评分

> ### 🎯 综合评分：X.X / 10
> **等级：[🏆S/🥇A/🥈B/🥉C/⚠️D/❌F]（[等级描述]）** | **状态：[✅可直接上线/⚠️需修复后上线/❌需要重构]**

| 维度 | 得分 | 评价 |
|------|------|------|
| 代码质量 | X/10 | [简要评价] |
| 功能实现 | X/10 | [简要评价] |
| 性能优化 | X/10 | [简要评价] |
| 安全性 | X/10 | [简要评价] |
| 可访问性 | X/10 | [简要评价] |

**主要扣分项**：[具体说明扣分原因]

#### 📝 改进建议

- **优先修复**：[关键问题列表]
- **后续优化**：[可选改进方向]

Rating grade criteria:

Grade Score range Status Meaning
🏆 S 9.5-10 ✅ Ready to deploy Excellent, can serve as a best practice model
🥇 A 8.5-9.4 ✅ Ready to deploy Outstanding, production-grade code
🥈 B 7.0-8.4 ⚠️ Deploy after fixes Good, a small number of issues need to be fixed
🥉 C 5.5-6.9 ⚠️ Deploy after fixes Average, needs serious fixes and optimization
⚠️ D 4.0-5.4 ❌ Needs refactoring Poor, a relatively large-scale refactor is recommended
❌ F < 4.0 ❌ Needs refactoring Unacceptable, rewriting is recommended

Severity definitions:

  • 🔴 High: security vulnerabilities, severe bugs, crash risks → must fix
  • 🟡 Medium: performance issues, coding standards, maintainability → recommended to fix
  • 🟢 Low: code style, optimization suggestions → optional improvements

Step 4: Actively recognize excellent practices

Highlight in the report:

  • Elegant solutions and design patterns
  • Good coding practices
  • Clearly structured code organization
  • Thoughtful abstraction and encapsulation

Review depth adjustment strategy

Adjust the review depth and focus based on the following factors:

  • Code scale: For small changes, quickly review core issues; for large features, conduct a comprehensive in-depth review
  • Code context: Use strict standards for production code; prototype code may be moderately tolerated
  • Time constraints: When time is tight, review by priority (security > performance > standards > style)

Supplementary resources

For detailed review checklists and tool recommendations, please refer to references/checklist.md。