---
id: sm-frontend-code-review
name: "frontend-code-review"
url: https://skills.yangsir.net/skill/sm-frontend-code-review
author: langgenius
domain: ai-code-generation-quality
tags: ["code-review", "frontend-best-practices", "linting", "static-analysis", "pull-requests"]
install_count: 7600
rating: 4.50 (27 reviews)
github: https://github.com/langgenius/dify
---

# frontend-code-review

> 专注于前端代码审查，确保代码质量和规范，支持代理式工作流开发，提升项目可靠性与协作效率。

**Stats**: 7,600 installs · 4.5/5 (27 reviews)

## Before / After 对比

### 自动化前端代码审查流程

## Readme

# frontend-code-review

# Frontend Code Review

## Intent

Use this skill whenever the user asks to review frontend code (especially `.tsx`, `.ts`, or `.js` files). Support two review modes:

- **Pending-change review** – inspect staged/working-tree files slated for commit and flag checklist violations before submission.

- **File-targeted review** – review the specific file(s) the user names and report the relevant checklist findings.

Stick to the checklist below for every applicable file and mode.

## Checklist

See [references/code-quality.md](https://github.com/langgenius/dify/blob/HEAD/.agents/skills/frontend-code-review/references/code-quality.md), [references/performance.md](https://github.com/langgenius/dify/blob/HEAD/.agents/skills/frontend-code-review/references/performance.md), [references/business-logic.md](https://github.com/langgenius/dify/blob/HEAD/.agents/skills/frontend-code-review/references/business-logic.md) for the living checklist split by category—treat it as the canonical set of rules to follow.

Flag each rule violation with urgency metadata so future reviewers can prioritize fixes.

## Review Process

- Open the relevant component/module. Gather lines that relate to class names, React Flow hooks, prop memoization, and styling.

- For each rule in the review point, note where the code deviates and capture a representative snippet.

- Compose the review section per the template below. Group violations first by **Urgent** flag, then by category order (Code Quality, Performance, Business Logic).

## Required output

When invoked, the response must exactly follow one of the two templates:

### Template A (any findings)

```
# Code review
Found <N> urgent issues need to be fixed:

## 1 <brief description of bug>
FilePath: <path> line <line>
<relevant code snippet or pointer>

### Suggested fix
<brief description of suggested fix>

---
... (repeat for each urgent issue) ...

Found <M> suggestions for improvement:

## 1 <brief description of suggestion>
FilePath: <path> line <line>
<relevant code snippet or pointer>

### Suggested fix
<brief description of suggested fix>

---

... (repeat for each suggestion) ...

```

If there are no urgent issues, omit that section. If there are no suggestions, omit that section.

If the issue number is more than 10, summarize as "10+ urgent issues" or "10+ suggestions" and just output the first 10 issues.

Don't compress the blank lines between sections; keep them as-is for readability.

If you use Template A (i.e., there are issues to fix) and at least one issue requires code changes, append a brief follow-up question after the structured output asking whether the user wants you to apply the suggested fix(es). For example: "Would you like me to use the Suggested fix section to address these issues?"

### Template B (no issues)

```
## Code review
No issues found.

```
Weekly Installs3.2KRepository[langgenius/dify](https://github.com/langgenius/dify)GitHub Stars133.3KFirst SeenJan 20, 2026Security Audits[Gen Agent Trust HubPass](/langgenius/dify/frontend-code-review/security/agent-trust-hub)[SocketPass](/langgenius/dify/frontend-code-review/security/socket)[SnykFail](/langgenius/dify/frontend-code-review/security/snyk)Installed onclaude-code2.3Kopencode1.7Kgemini-cli1.7Kcursor1.6Kcodex1.6Kgithub-copilot1.4K

---
*Source: https://skills.yangsir.net/skill/sm-frontend-code-review*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-frontend-code-review/markdown*