前端代码审查工具 - 自动化检查TypeScript/JS代码质量、性能与业务逻辑

frontend-code-review by langgenius/dify

4,000 周安装量

134,100 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/langgenius/dify --skill frontend-code-review

AI/机器学习开发生产力

🇨🇳中文介绍

前端代码审查

目的

当用户要求审查前端代码（特别是 .tsx、.ts 或 .js 文件）时使用此技能。支持两种审查模式：

待提交变更审查 – 检查暂存区/工作区中计划提交的文件，并在提交前标记出违反检查清单的情况。
文件定向审查 – 审查用户指定的特定文件，并报告相关的检查清单发现。

对于每个适用的文件和模式，请严格遵守下面的检查清单。

检查清单

请参阅 references/code-quality.md、references/performance.md、references/business-logic.md 获取按类别划分的动态检查清单——将其视为需要遵循的规范规则集。

为每个规则违反情况标记紧急程度元数据，以便未来的审查者可以优先处理修复。

审查流程

打开相关的组件/模块。收集与类名、React Flow 钩子、属性记忆化和样式相关的代码行。
对于审查要点中的每条规则，记录代码偏离的地方并捕获有代表性的代码片段。
根据下面的模板撰写审查部分。首先按紧急标志对违反情况进行分组，然后按类别顺序（代码质量、性能、业务逻辑）分组。

必需输出

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

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, references/performance.md, 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 Installs

4.0K

Repository

langgenius/dify

GitHub Stars

134.1K

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykFail

Installed on

claude-code3.0K

opencode1.9K

gemini-cli1.9K

cursor1.8K

codex1.8K

github-copilot1.6K