关于 front-review
front-review 是用于审查当前打开或用户指定文件的代码审查技能,面向前端代码。它按文件扩展名加载对应规则,并提供标准与严格两种审查模式。
主要功能
- 01按扩展名选择语言规则
- 02标准与严格审查模式
- 03依据共享及语言规则检查
- 04按严重程度生成结构化报告
适用场景
- 01检查当前打开的前端文件
- 02严格检查复杂度与性能问题
- 03按指定文件路径执行代码审查
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ effeilo/ claude-code-frontend-skills --skill front-review安装后在 Claude Code 中输入/front-review确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
front-review-astro.mdfront-review-css.mdfront-review-html.mdfront-review-js.mdfront-review-rules.mdfront-review-svelte.mdfront-review-vue.mdREADME.mdexamples/css/dashboard.cssdashboard.review.mdexamples/js/cart-service.jscart-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