2026年6月4日 周四晚上19:30,报名腾讯会议了解“业务抓夹如何成为前线部署工程师(FDE)”(限30人)
免费POC, 零成本试错
FDE知识库

FDE知识库

学习大模型的前沿技术与行业落地应用


我要投稿

手搓Skill串联成专属 SubAgent:打造前端代码审查→修复→提交自动化流水线

发布日期:2026-05-29 12:20:34 浏览次数: 1551
作者:小天码苑

微信搜一搜,关注“小天码苑”

推荐语

自动化流水线解放前端开发者,告别繁琐的代码审查与提交操作。

核心内容:
1. 拆分并创建三个独立原子Skill:代码审查、自动修复、Git提交
2. 封装SubAgent,实现审查→修复→提交的串行自动化流程
3. 支持多种触发方式,适配所有主流前端项目并永久生效

杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
身为前端开发者,你是不是常常在完成代码编写后,还要手动进行 ESLint 检查、修复格式问题,接着执行 git add、commit、push 这些繁琐操作?
这类重复机械工作不仅浪费开发时间,还很容易在忙碌的时候漏掉关键步骤。今天我带大家手把手,利用 Cursor 的 Custom Skills 和 SubAgent 功能,搭建一套从代码审查、自动修复到 Git 提交推送的完整自动化流水线。
一次配置永久生效,Vue、React、原生 JS 所有前端项目都能直接适配复用。

整体架构设计

我们按照单一职责的思路,先拆分出三个独立原子 Skill:
前端 JS - 代码审查:只做代码规范检测,不改动项目任何文件。
前端 JS - 代码自动修复:自动修复 ESLint 语法问题、Prettier 格式化排版。
前端 JS - Git 提交推送:一键完成 git 暂存、提交、推送到远程仓库。
再单独封装一个 SubAgent,固定按照 代码审查→代码修复→代码提交 的顺序,串行调用这三个 Skill。只要中间任意一步执行失败,整条流水线立刻终止并提醒用户。
同时支持三种调用方式:手动对话触发、AI 自动调度、命令面板一键启动,所有前端项目都能无缝复用。

第一步:创建 3 个独立原子 Skill

在 Cursor 里按这个路径打开配置:Settings → Features → Custom Skills → Add Skill,依次新建下面三个 Skill,照着填写即可。
Skill 1:前端 JS - 代码审查
---name: frontend-code-reviewdescription: >-  Reviews frontend changes (React/Vue/Svelte/TS/CSS) for correctness, UX,  accessibility, performance, security, and ESLint/Prettier consistency. Use  when the user asks for a frontend code review, UI PR review, or  @@frontend-code-review; run alone without fixing or committing unless  explicitly asked.disable-model-invocation: true---# 前端代码审查(独立执行)仅做审查与结论输出;**不自动改代码、不提交**,除非用户明确要求合并步骤。## 输入- 用户给出的路径、分支、`git diff` 范围,或「审查当前改动」。- 若无范围:优先 `git diff` / `git diff main...HEAD`,再补全文件列表。## 审查维度(按需覆盖)1. **正确性**:状态与副作用、条件渲染、边界与空值、路由与权限。2. **可维护性**:组件职责、重复逻辑、命名与类型(TS)、魔法数/字符串。3. **可访问性**:语义标签、`aria`、焦点与键盘、对比度与触控目标。4. **性能**:不必要重渲染、大列表/图表、图片与 bundle、懒加载。5. **安全**:`dangerouslySetInnerHTML`、拼接 URL/脚本、敏感信息进前端。6. **样式与响应式**:断点、溢出、暗色/主题 token 一致性。7. **ESLint / Prettier**:与仓库配置一致;规则冲突处注明「以 `.eslintrc` / `eslint.config` / `.prettierrc` 为准」。## 工具链(只读,不改文件)若项目存在 `package.json`:1. 优先读脚本名(如 `lint`、`lint:fix`、`format`、`format:check`),**审查阶段仅运行不写文件的命令**(例如 `eslint . --max-warnings 0`、或项目已有的 `lint`/`format:check`,避免 `fix`/`write` 污染审查)。2. 若无脚本:可对 **本次 diff 涉及文件** 运行 `npx eslint <paths>`、`npx prettier --check <paths>`(路径来自用户范围或 `git diff --name-only`)。3. 将 ESLint/Prettier 的 **error 级** 纳入「必须修复」;**warn** 与格式偏好纳入「建议」或「可选」,除非团队约定零 warning。## 运行命令示例(审查 / 只读)在项目前端根目录(含 `package.json` 与 ESLint/Prettier 配置)执行。**优先**使用仓库已有脚本;下列为无脚本或需针对改动文件时的兜底。**包管理器调用脚本(任选其一)**```bashnpm run lintnpm run format:check# 或pnpm run lintpnpm run format:check# 或yarn lintyarn format:check```**针对「工作区已改动文件」(不含未提交删除;可按需改成 `main...HEAD`)**```bash# 列出待检查路径(按需增删扩展名)git diff --name-only --diff-filter=ACM | grep -E '\.(js|jsx|mjs|cjs|ts|tsx|vue|svelte|css|scss|md|mdx|json|yaml|yml)$' || true``````bash# Prettier:仅检查、不写回npx prettier --check "**/*.{js,jsx,ts,tsx,mjs,cjs,vue,svelte,css,scss,md,json}"# 若需缩到本次 diff 文件,可先写入变量再传参(路径含空格时改用 -0 与 xargs -0)FILES="$(git diff --name-only --diff-filter=ACM | tr '\n' ' ')"[ -n "${FILES// }" ] && npx prettier --check $FILES``````bash# ESLint:检查(不写回);可按项目习惯加 --max-warnings 0npx eslint . --ext .js,.jsx,.ts,.tsx --max-warnings 0# 仅检查若干文件时:npx eslint "src/components/Foo.tsx" "src/hooks/useBar.ts"```路径含空格或文件很多时,改用 **eslint 的缓存与 `--no-error-on-unmatched-pattern`** 等选项以匹配项目配置;上述为最小可运行示例。## 输出格式按严重程度分组(与仓库惯例冲突时在结论中说明):```markdown## 摘要[1–3 句]## 必须修复(阻塞合并)- [文件:行] 问题 — 理由## 建议改进(非阻塞)- ...## 可选 / 风格- ...## 未覆盖范围(若有)- 例如未运行 ESLint/Prettier、未运行测试、未做视觉回归```## 约束- 不臆测业务:不确定处标注「需产品/后端确认」。- 引用代码用 Cursor 要求的代码引用格式;大块省略用 `...`。
Skill 2:前端 JS - 代码自动修复
---name: frontend-code-fixdescription: >-  Implements minimal, focused fixes for frontend issues from review or bug  reports, then aligns changes with ESLint and Prettier. Use when the user asks  to fix reviewed issues, patch UI/TS/CSS, run eslint --fix/prettier, or  @@frontend-code-fix; does not perform review-from-scratch or git commit  unless explicitly combined with other skills.disable-model-invocation: true---# 前端代码修复(独立执行)在**已明确问题列表**或**用户指定文件/行为**的前提下改代码;**不替代完整审查流程**,也不默认执行 `git commit`。## 输入- 问题列表(来自审查、issue、或用户描述);或- 具体文件 + 期望行为。缺省时先向用户确认范围,避免发散修改。## 修复原则1. **最小改动**:只改完成任务所需的行;不做顺手重构(除非用户要求)。2. **风格一致**:沿用目录内既有模式(hooks、状态库、CSS 方案、i18n)。3. **类型与安全**:TS 严格处理 `null`/`undefined`;避免放宽类型糊弄过关。4. **可验证**:改完后说明如何验证(命令、页面路径、关键交互);若项目有 `lint`/`test` 脚本则运行并处理与本改动相关的失败项。## ESLint 与 Prettier(修复阶段必做)在业务逻辑改完后、交付前,对 **本次修改范围内的文件** 执行格式化与 lint;优先使用项目脚本,避免与仓库配置冲突。1. **发现脚本**:读 `package.json` 的 `scripts`。常见映射:   - `lint` / `eslint` → 先 `--fix` 若存在(如 `eslint . --fix` 或项目封装脚本)。   - `format` / `prettier` → 写回时用 `prettier --write` 或与脚本一致。2. **执行顺序(推荐)**:Prettier 与 ESLint 并存时,以 **项目文档或 `lint-staged` 配置** 为准;无说明时:**先 `prettier --write` 再 `eslint --fix`**,避免互相覆盖;若使用 `eslint-config-prettier`,仍按上述顺序即可。3. **仅改动文件**:对 `git diff --name-only` 或用户给出的路径执行;不全局格式化整个仓库除非用户要求。4. **残余**:若规则无法自动修复,手写最小修改满足 ESLint;勿随意 `eslint-disable` 全文件,单行禁用需附简短理由。## 运行命令示例(修复 / 写回)在项目前端根目录执行。**优先** `package.json` 里已有脚本(常见命名如下);没有则用 `npx`。**包管理器调用脚本(任选其一)**```bashnpm run formatnpm run lint:fix# 或合并命令(若项目提供)npm run fix# pnpm / yarn 同理,例如:# pnpm run format && pnpm run lint:fix```**无脚本时:先 Prettier 再 ESLint(与上文「执行顺序」一致)**```bash# 全仓格式化(仅当用户允许;否则缩小路径)npx prettier --write "**/*.{js,jsx,ts,tsx,mjs,cjs,vue,svelte,css,scss,md,json}"# 本次 git 已跟踪的改动文件(不含未 add;若含未暂存改动仍会用工作区内容)npx prettier --write $(git diff --name-only --diff-filter=ACM | grep -E '\.(js|jsx|mjs|cjs|ts|tsx|vue|svelte|css|scss|md|mdx|json|yaml|yml)$' | tr '\n' ' ')``````bash# ESLint 自动修复(规则支持的部分)npx eslint . --ext .js,.jsx,.ts,.tsx --fix# 或指定文件:npx eslint "src/components/Foo.tsx" --fix```路径含空格时勿依赖上述 `$FILES` 拼接;改为 **逐文件** 传参或使用项目提供的 **lint-staged** / `eslint .` 配合已有 ignore。## 输出格式```markdown## 变更摘要- [文件]:做了什么## 验证方式- ESLint / Prettier:写明实际执行的命令与结果(通过 / 残留规则)- ...## 残留风险 / 未测项- ...```## 约束- 不删除无关注释;不批量格式化无关文件。- 若依赖后端或设计决策:写清阻塞点,不猜测接口契约。
Skill 3:前端 JS - Git 代码提交推送
---name: frontend-commitdescription: >-  Stages and commits frontend changes with Conventional Commit-style messages,  scoped diffs, and safe git hygiene after ESLint/Prettier pass when applicable.  Use when the user asks to commit frontend work, write a commit message for  UI changes, or @@frontend-commit; does not review or fix logic unless  explicitly asked.disable-model-invocation: true---# 前端提交(独立执行)完成 **暂存、撰写说明、提交**;**默认不做代码审查或修复**。若工作区包含非前端文件,仅在用户同意时一并提交。## 前置检查- `git status`:确认分支正确;若有敏感文件(`.env`、密钥)勿加入。- 区分本次应提交的文件;与用户确认是否拆分多次提交。- **ESLint / Prettier**:若本次提交包含 JS/TS/CSS 等前端源码,在暂存前运行项目的 **只读检查**(如 `npm run lint` 无 fix、`npm run format:check`,或等价 `npx eslint`、`npx prettier --check` 针对待提交路径)。若失败:回到修复流程或征得用户同意后再提交(不强行 `--no-verify` 除非用户明确要求)。## 运行命令示例(提交前只读检查)在含前端的包根目录执行;**与审查阶段相同**,不得使用 `--write` / `--fix`。```bashnpm run lintnpm run format:check# 或pnpm run lint && pnpm run format:check# 或yarn lint && yarn format:check``````bash# 无脚本时:对即将 git add 的文件检查(先确认路径列表)npx prettier --check $(git diff --name-only --diff-filter=ACM | grep -E '\.(js|jsx|ts|tsx|vue|css|scss|json)$' | tr '\n' ' ')npx eslint $(git diff --name-only --diff-filter=ACM | grep -E '\.(js|jsx|ts|tsx)$' | tr '\n' ' ') --max-warnings 0```检查通过后再执行下文「执行步骤」中的 `git add` / `git commit`。## 提交信息约定采用 **Conventional Commits** 风格:```text<type>(<scope>): <简短描述>[可选正文:动机、行为变更、风险][可选 Footer:BREAKING CHANGE: / Refs #123]```常用 `type`:`feat`、`fix`、`refactor`、`style`、`perf`、`test`、`chore`、`docs``scope` 示例:`ui`、`a11y`、`router`、`i18n`、`deps`## 执行步骤1. `git diff` / `git diff --stat` 核对变更与意图一致。2. `git add` 指定路径(避免 `git add .` 除非用户确认)。3. 使用完整句子撰写主题行;正文用中文或英文**与仓库近期提交习惯一致**。4. `git commit -m`(或多行 `-m`);需要时代用户配置 `GPG`/`sign`(不强制)。## 输出格式```markdown## 提交结果- Hash: ...- Message:  ```  ...  ```## 后续建议(可选)- 是否 push / 开 PR / 打 tag(仅当用户需要时执行)```## 约束- 不 `push --force` 到共享分支除非用户明确要求。- 合并冲突时说明文件与选项,由用户或后续步骤解决。
三个 Skill 全部保存之后,各自都可以单独调用,想用哪一个直接单独执行就行。

第二步:创建串联 SubAgent 编排三个 Skill

在 Cursor 中进入这个路径:Settings → Rules,Skills,Subagents,开始配置专属流水线代理。
---End-to-end frontend pipeline for this repo:  run project skills frontend-code-review →  frontend-code-fix (ESLint/Prettier) → frontend-commit (Conventional Commits). Use  proactively when the user asks for review+fix+commit, UI delivery, PR prep, or  「前端一条龙」; respect skip flags for review-only or no-commit.name: frontend-deliverymodel: defaultdescription: >----你是本仓库专用的 **前端交付 Subagent**。你必须严格按 **三个阶段顺序** 执行,且每个阶段的行为以项目内对应 Cursor Skill 为准(路径如下,必要时先阅读再动手):- `.cursor/skills/frontend-code-review/SKILL.md` — 仅审查与输出结论,默认不改代码- `.cursor/skills/frontend-code-fix/SKILL.md` — 按清单最小修复 + Prettier/ESLint 写回- `.cursor/skills/frontend-commit/SKILL.md` — 暂存、提交信息与 git 卫生;提交前只读 lint/format## 被调用时立即做1. 与用户确认 **范围**(分支、`git diff`、路径或 issue);若无说明则用 `git diff` / `git diff main...HEAD` 推断改动文件。2. 若用户声明 **仅审查** / **不提交**,则跳过对应阶段并在回复首段写明「已跳过阶段 X」。## 阶段 1:审查(frontend-code-review)- 只做代码审查与工具链 **只读** 检查(ESLint、Prettier `--check`),遵守该 SKILL 中的「运行命令示例(审查 / 只读)」。- 输出须包含:**必须修复(阻塞)**、**建议**、**可选**;无阻塞时也要给出明确结论。- **门禁 G1**:没有书面清单不得进入阶段 2。## 阶段 2:修复(frontend-code-fix)- 仅修复阶段 1 中的 **阻塞项**;范围不清时先提问,禁止发散改无关文件。- 遵守「最小改动」;完成后对本次改动文件执行 **Prettier write + ESLint --fix**(顺序与命令以该 SKILL 的「运行命令示例(修复 / 写回)」为准)。- **门禁 G2**:阶段结束时须满足该 SKILL 的 ESLint/Prettier 要求,或用户明确声明跳过。## 阶段 3:提交(frontend-commit)- 仅在用户需要提交时执行;若用户只要改完不提交,在阶段 2 结束并停止。- 暂存前运行 **提交前只读检查**(见 `frontend-commit` 的「运行命令示例(提交前只读检查)」);通过后按 Conventional Commits 撰写说明,再 `git add`(指定路径)与 `git commit`。- **门禁 G3**:不默认 `--no-verify`;不 `push --force` 共享分支除非用户明确要求。## 阶段交接每进入下一阶段前用 **3 ~ 6 行** 摘要交接:**范围**、**阻塞项是否清零**、**待提交文件列表**(若有)。## 硬性约束- 不把三个阶段混成一步;每步边界与该 SKILL 冲突时以 SKILL 为准。- ESLint/Prettier 的具体可复制命令只在上述三个 SKILL 的对应小节中展开,照抄执行并汇报结果。- 不臆测业务;不确定处标注需确认方。
保存 Agent,到这里专属流水线 SubAgent 就已经封装完成了。

第三步:三种调用方式

方式 1:直接对话 AI 调用

在 Cursor 聊天框输入一句话即可: 调用前端代码审查修复提交流水线,执行完整代码审查、修复、提交流程
AI 会自动识别 Agent,严格按顺序跑完整套流程,全程不用手动操作。

方式 2:命令面板一键调用

按下 Ctrl + Shift + P ,Mac 电脑用 Cmd + Shift + P,搜索 Agent 名称 前端代码审查修复提交流水线,直接回车就能启动。

方式 3:单独调用任意原子 Skill

如果只需要检查代码、不用修复,或者只修复格式、暂时不提交,可以打开命令面板,单独搜索单个 Skill 名称执行。保留了原子操作的灵活性,想用就用。

第四步:增强容错与约束(可选)

开启失败中断

 一旦某一步命令执行报错,整条流水线会立刻停止,不会带着错误继续往下跑,避免引发更多项目问题。

单文件版 Skill(新增可选)

如果只想对当前打开的单个文件做审查和修复,可以新建 Skill,用 $CURSOR_FILE_PATH 变量即可。
单文件审查 npx eslint $CURSOR_FILE_PATH
单文件修复 npx eslint $CURSOR_FILE_PATH --fix npx prettier --write $CURSOR_FILE_PATH

全局多项目复用

把三个 Skill 和 SubAgent 保存到 Cursor 全局配置里,后续所有前端项目,不管是 Vue、React 还是原生 JS,都能直接调用,不用重复配置,一次搭建终身复用。

最终效果

3 个 Skill 完全解耦,可以单独使用,适配各种零散开发场景。 1 个 SubAgent 统一编排流程,串行执行每一步,出错自动中断,全程可控。 AI 支持自动调度整套流水线,一句话就能触发,彻底解放双手。 一次配置完成,所有前端项目永久通用,团队之间也能直接共享配置,整体开发效率大幅提升。
从 2025 年开始,Cursor 的 Skills 和 SubAgent 功能已经越来越成熟,官方的 BugBot 也能自动审查 PR、修复代码问题。但日常开发最实用、最贴合自己项目习惯的,还是我们自己手搓的这条自动化流水线。
既保留了单个技能的灵活度,又靠 SubAgent 实现了全流程自动化,真正实现检查、修复、提交一键搞定。
后续新开项目直接套用这套配置,从此告别重复性机械工作,把精力全部放在业务逻辑开发上。
跟着步骤操作,十分钟就能配置完成,大家现在就可以去 Cursor 里动手试一试。

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询