mcpField
F
front-review

front-review

github.com/effeilo测试与质量339 次安装26 周前更新
代码仓库

关于 front-review

front-review 是用于审查当前打开或用户指定文件的代码审查技能,面向前端代码。它按文件扩展名加载对应规则,并提供标准与严格两种审查模式。

主要功能

  1. 01按扩展名选择语言规则
  2. 02标准与严格审查模式
  3. 03依据共享及语言规则检查
  4. 04按严重程度生成结构化报告

适用场景

  1. 01检查当前打开的前端文件
  2. 02严格检查复杂度与性能问题
  3. 03按指定文件路径执行代码审查

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/effeilo/claude-code-frontend-skills --skill front-review

安装后在 Claude Code 中输入/front-review确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

front-review-astro.md
front-review-css.md
front-review-html.md
front-review-js.md
front-review-rules.md
front-review-svelte.md
front-review-vue.md
README.md
examples/css/
dashboard.css
dashboard.review.md
examples/js/
cart-service.js
cart-service.review.md

详细介绍

检查当前打开或用户明确提及的文件。

  • 默认(无参数):标准模式:平衡地标记明确的问题,并提供可执行的建议。
  • 如果 $ARGUMENTS 包含 strict:严格模式:提高对质量、复杂度和性能规则的审查门槛。

步骤 1:检测文件语言

查看目标文件的扩展名:

  • 如果是 .js、.ts、.mjs、.jsx、.tsx → 语言规则文件为 front-review-js.md
  • 如果是 .css、.sass、.scss → 语言规则文件为 front-review-css.md
  • 如果是 .html → 语言规则文件为 front-review-html.md
  • 如果是 .vue → 语言规则文件为 front-review-vue.md
  • 如果是 .svelte → 语言规则文件为 front-review-svelte.md
  • 如果是 .astro → 语言规则文件为 front-review-astro.md
  • 否则 → 告知用户不支持此文件类型。支持的类型:.js、.ts、.mjs、.jsx、.tsx、.css、.sass、.scss、.html、.vue、.svelte、.astro。

此技能文件的路径始终可从上下文中获取。所有子文件路径均相对于此文件解析。


步骤 1.5:补充最新文档(可选)

如果本次会话中提供了 context7 MCP,请获取检测到的语言或框架(例如 React、Vue、Svelte、Astro、Sass)的最新官方文档。 使用这些文档补充步骤 2 和步骤 3 加载的规则,尤其是用于标记已弃用的模式,或在最新版本中有更好替代方案的模式。 如果未提供 context7,请跳过此步骤,并根据训练知识继续。


步骤 2:加载通用规则

读取 front-review-rules.md(与此技能文件位于同一目录)。 其中包含通用审查规则、严重性定义和严格模式的门槛调整。


步骤 3:加载语言专属规则

读取步骤 1 中确定的语言规则文件(与此技能文件位于同一目录)。 其中包含语言专属规则、检测模式和代码示例。


步骤 4:审查文件

报告前先完整读取目标文件,并收集所有问题。 应用 front-review-rules.md 和语言规则文件中的所有规则。 在严格模式下,应用 front-review-rules.md 末尾定义的门槛调整。


输出格式

不要修改文件。输出结构化的审查报告:

## Code Review : filename.ext
> **Strict mode** *(include this line only when strict is active)*

### 🔴 Critical
**[line N] Short issue title**
Code: `relevant snippet`
Problem: clear explanation of what is wrong and why it matters.
Fix: concrete suggestion to resolve it.

---

### 🟠 Important
...

### 🟡 Minor
...

### 💡 Suggestion
...

---

### Summary
| Severity | Count |
|---|---|
| 🔴 Critical | N |
| 🟠 Important | N |
| 🟡 Minor | N |
| 💡 Suggestion | N |
| **Total** | **N** |
  • 按严重性分组问题:严重 → 重要 → 次要 → 建议。
  • 省略没有问题的严重性分组。
  • 聚焦影响较大的问题,不要标记每个轻微的风格偏好。
  • 每个问题都必须包含行号引用、代码片段、清晰的问题说明和具体的修复方法。

评论

支持 Markdown