微信扫码
添加专属顾问
我要投稿
自动化流水线解放前端开发者,告别繁琐的代码审查与提交操作。 核心内容: 1. 拆分并创建三个独立原子Skill:代码审查、自动修复、Git提交 2. 封装SubAgent,实现审查→修复→提交的串行自动化流程 3. 支持多种触发方式,适配所有主流前端项目并永久生效
---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 要求的代码引用格式;大块省略用 `...`。---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:写明实际执行的命令与结果(通过 / 残留规则)- ...## 残留风险 / 未测项- ...```## 约束- 不删除无关注释;不批量格式化无关文件。- 若依赖后端或设计决策:写清阻塞点,不猜测接口契约。---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` 到共享分支除非用户明确要求。- 合并冲突时说明文件与选项,由用户或后续步骤解决。
---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 的对应小节中展开,照抄执行并汇报结果。- 不臆测业务;不确定处标注需确认方。
53AI,企业落地大模型首选服务商
产品:场景落地咨询+大模型应用平台+行业解决方案
承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业
2026-05-29
微软悄然开源了一款 Skill 神器
2026-05-29
人才+1,有人把申请专利也做成了skill,知识产权的普及度再次增加
2026-05-29
让 Skill 自己训练自己:8阶段Loop与自进化机制
2026-05-29
Codex 必装十大 Skills,我挨个翻车之后,重新排了一次顺序
2026-05-29
如何评估你写的 SKILL.md 质量?一套完整的 Eval 方法论
2026-05-28
小红书支持上传 skill 了,AI 创作者赚钱的时机到了
2026-05-28
大模型的Agent Skill功能,在LLM HTTP底层交互流中是怎么承载的?
2026-05-27
Skill越详细Agent越傻!砍到40词一次选对
2026-04-05
2026-03-05
2026-03-17
2026-03-04
2026-03-03
2026-03-03
2026-03-17
2026-03-26
2026-03-10
2026-03-05