别再堆万字 Prompt：用 Agent Skills 给团队写一个「前端 Review」Skill
团队里要是有人用 AI 帮着看 PR，你会很快撞上同一件事：每个人对话框里都塞着一份「前端审查规范」。今天加三条，明天删两条，有人复制的还是上个月那版。规范本身没错，错在它住错了地方——住在聊天记录里，而不是仓库里。
Agent Skills 干的事很朴素：把「怎么干某类活」收成一个文件夹，核心是一份 SKILL.md。助手需要时自己去读，不用每次把万字手册粘进 Prompt。2026 年 10 月 22 日，Anthropic 把这套开放标准捐给了 Linux 基金会旗下的 Agentic AI Foundation（AAIF）；规范继续开放，名字、logo、GitHub 组织和 agentskills.io 一并交出去，方便跨产品共用。
这篇不讲概念巡礼。目标就一个：你读完能把一份前端 Review Skill 拷进仓库，当天就能用。 文末有完整模板，配套 demo/ 目录也能直接跑校验脚本。
先分清：Prompt、AGENTS.md、Skill 各管啥
口头上大家爱混着说，落地时最好分开：
Skill 的价值不在「写得更长」，而在可发现、可复用、按需加载。规范里把它叫 progressive disclosure（渐进式披露）：启动时只看每个 skill 的 name + description；真匹配到任务，才读完整 SKILL.md；脚本和参考文档再往后按需打开。这样你可以在仓库里挂很多 skill，也不用一上来把上下文塞爆。
一手说明见：Agent Skills 规范、Anthropic 捐赠公告（2026-10-22）。
一个 Skill 目录到底长什么样
最少只要一份文件：
frontend-review/
└── SKILL.md
完整一点可以长这样（后面三个目录都是可选）：
frontend-review/
├── SKILL.md # 必需：YAML 头 + Markdown 正文
├── scripts/ # 可选：可执行脚本
├── references/ # 可选：按需阅读的补充说明
└── assets/ # 可选：模板、静态资源
SKILL.md 必须以 YAML frontmatter 开头。规范要求至少两个字段：
- name：小写字母 / 数字 / 连字符，必须和目录名一致，不能 --，不能首尾是 -
- description：说清楚做什么、什么时候用；这是助手决定「要不要启用你」的主依据
可选字段还有 license、compatibility、metadata、allowed-tools（实验性）等。正文怎么写没有强制模板，但官方建议主体别太膨胀：详细资料拆到 references/，能脚本化的放进 scripts/。
最小骨架长这样：
---
name: frontend-review
description: Review frontend code changes in this repo. Use when the user asks for code review, PR review, 前端 review, 检查改动, or before merging UI changes.
---
# 前端 Review
按顺序执行：看清改动范围 → 类型检查 → Lint → 危险改动禁区。
输出固定结构的结论，少写空话。
就这几行，已经比「把审查规范粘进每一个新对话」强——因为它进了版本库，改一处，全队下次会话都能吃到。
为什么前端 Review 适合当第一个 Skill
不是所有流程都值得做成 skill。前端 Review 刚好踩中几个点：
- 步骤稳定：先看范围，再 typecheck，再 lint，再盯敏感面。人审也是这个顺序。
- 命令能跑：tsc --noEmit、eslint、biome 比「感觉这段写得优雅」可靠。
- 禁区明确：.env、鉴权、dangerouslySetInnerHTML、未校验 origin 的 postMessage……列得出清单。
- 团队口径要统一：最怕每个人 Prompt 里各写各的「必须改 / 建议改」。
一句话：把「我们组约定怎么审前端」从聊天记录搬进仓库。
动手：写一份能用的「前端 Review」Skill
下面这份和文末 demo/frontend-review/SKILL.md 同源，可以直接复制。按你们仓库脚本名改两处即可。
---
name: frontend-review
description: Review frontend code changes in this repo. Use when the user asks for code review, PR review, 前端 review, 检查改动, 帮我看看这段代码, or before merging UI/React/Vue/Next changes. Runs typecheck then lint, then checks a deny-list of risky paths. Do not invent security exploits; only report defensive findings.
license: MIT
metadata:
author: team-frontend
version: "1.0"
audience: frontend
---
# 前端 Review Skill
你在帮这个仓库做**前端改动审查**。目标不是写长篇作文，而是按固定顺序把关，并给出可执行结论。
## 何时启用
用户提到 code review / PR review / 检查改动 / 帮我看看这段前端代码 / merge 前自查时启用本 skill。
## 硬规矩（按顺序，不要跳）
1. **看清改动范围**
- 先列出本次相关文件（`git status` / `git diff --stat`，或用户粘贴的片段）。
- 超出需求的顺手重构：标成「建议另开 PR」，默认不要帮用户直接改。
2. **类型检查**
- 仓库有 TypeScript 时优先跑项目脚本，例如：
- `pnpm typecheck` / `npm run typecheck` / `npx tsc --noEmit`
- 有报错：先把错误路径和信息贴出来，再谈风格。
3. **Lint**
- 有 ESLint / Biome / Oxlint 就跑对应脚本，例如 `pnpm lint`。
- 只修与本次改动相关的告警；全仓历史债另记，不借机大扫除。
4. **危险改动禁区（防御清单）**
若 diff 触及下列路径或模式，必须**显式标红**，并要求人工确认后再继续：
- `**/.env*`、密钥、Token、私钥、内网地址硬编码
- `**/auth/**`、登录态、Cookie / LocalStorage 写敏感字段
- `dangerouslySetInnerHTML`、未消毒的 HTML 拼接
- `postMessage` / `iframe` 未校验 `origin`
- 依赖锁文件被无关改动大面积重写
- 删除或弱化 CSP、CORS、CSRF、权限校验相关代码
- 把用户输入直接拼进 `eval`、动态 `Function`、未校验的路由跳转
只做**防御向说明**：指出风险点与建议改法。不要给出可复现的攻击步骤、PoC、payload。
## 输出格式（照抄结构）
（输出模板开始）
## Review 结论
- 结论：通过 / 有条件通过 / 不通过
- 一句话原因：…
## 已执行检查
- [ ] 改动范围已核对
- [ ] 类型检查：通过 / 失败 / 仓库无脚本（说明）
- [ ] Lint：通过 / 失败 / 仓库无脚本（说明）
- [ ] 禁区：未命中 / 命中（列出文件）
## 必须改
1. …
## 建议改
1. …
## 可以以后再说
1. …
（输出模板结束）
## 写作语气
- 像同事在评审：短句、点名文件、少形容词。
- 不确定就说不确定，并写出要用户确认的点。
禁区细则可以另放 references/denylist.md，正文里链过去——这正好吃到 progressive disclosure：平常不占上下文，真碰到敏感改动再展开。
拷进仓库：怎么放、怎么验、怎么叫它
1）目录放哪
官方 Quickstart（以 VS Code 为例）默认找项目下的：
mkdir -p .agents/skills
cp -R frontend-review .agents/skills/
不同产品扫描路径可能略有差异，但文件格式是同一套。以你正在用的 Agent 文档为准；关键是：name 字段和文件夹名都叫 frontend-review。
2）先校验 skill 自己写得对不对
配套脚本不连网，只检查 frontmatter、命名、行数：
bash demo/frontend-review/scripts/check-skill.sh
你应该看到类似输出：
OK: frontmatter 分隔符
OK: name=frontend-review
OK: description 长度 …
OK: SKILL.md 行数 …
全部通过。把本目录拷到仓库的 .agents/skills/frontend-review/ 即可试用。
规范也提到可用官方参考实现里的 skills-ref validate ./my-skill 做更完整校验；上面这个 bash 脚本是给「零依赖、当场能跑」准备的。
3）对话里怎么触发
新开一轮 Agent 对话，直接说人话即可，例如：
按前端 review skill，审查当前改动。先 typecheck 再 lint。
或：
这是一段 React PR，做 code review。
助手应先靠 description 命中 frontend-review，再加载正文，按四道关卡输出。若它空口夸代码、不跑检查，把 skill 里的「硬规矩」再写狠一点，或换到更听话的 Agent 模式 / 模型——工具服从度因产品而异，这点官方 Quickstart 也老实写了。
4）和 CI 的分工
Skill 是会话里的工序卡；CI 是合入门槛。前者提高日常自查效率，后者不该被取代。typecheck / lint 该红还是红。
一段「像样」的 Review 输出长什么样
假设同事改了登录页附近的组件，还顺手动了 postMessage 监听。Skill 跑完后，理想输出接近下面这样（示意，不是让你背模板）：
## Review 结论
- 结论：有条件通过
- 一句话原因：类型检查和 Lint 过了，但 `src/features/auth/sessionBridge.ts` 的 postMessage 未校验 origin，需人工确认。
## 已执行检查
- [x] 改动范围已核对（5 files）
- [x] 类型检查：通过（pnpm typecheck）
- [x] Lint：通过（pnpm lint）
- [x] 禁区：命中 sessionBridge.ts（postMessage）
## 必须改
1. `sessionBridge.ts`：处理消息前校验 `event.origin`，只接受白名单域名；来源不明时直接 return。
2. 不要把 access token 写入 `localStorage` 的调试字段；改用现有 session 封装。
## 建议改
1. 登录按钮 loading 态与错误文案拆开，避免失败时按钮一直转圈。
## 可以以后再说
1. 顺手重排的无关 import，建议另开 PR，别和鉴权改动绑在一起。
注意两点：
- 「有条件通过」是常态，不是和稀泥。禁区命中就该停一下。
- 必须改 / 建议改 / 以后再说 分桶，比一篇小作文好合并。人审也省时间：你只要核对「必须改」有没有漏。
如果你发现助手仍在输出「整体不错，建议注意性能」这种空话，回去改 skill 正文：把输出格式写成强制结构，并明确禁止无文件路径的夸赞。
团队落地：别一次发明十二张作业卡
建议按这个顺序扩：
- 先上 Review（本文）：收益立刻体现在每天的 PR 对话里。
- 再补「新建页面 / 新建组件」：规定目录、命名、是否要 story / 测试。
- 最后才做窄域 skill（例如「改图表」「改表单校验」），避免一上来技能列表比组件库还长。
协作上有三条很实用：
- Skill 的修改走 PR，reviewer 看的是「工序有没有变严/变松」，不是文采。
- description 变更要回归：用团队高频口头禅试三轮触发。
- 在 README 或贡献指南里写一句：「前端自查可先喊 frontend-review skill」——比口头安利持久。
和「把规范写进系统 Prompt」比，Skill 多了两样东西：版本和按需加载。系统 Prompt 一改影响所有对话；Skill 只在相关任务被点亮，改起来也更敢改。
description 怎么写，才叫得出来
很多人把 description 写成「帮助审查代码」——太虚，助手不知道何时启用。
更好的写法同时回答两件事：会做什么，以及用户可能怎么喊你：
description: Review frontend code changes in this repo. Use when the user asks for code review, PR review, 前端 review, 检查改动, 帮我看看这段代码, or before merging UI/React/Vue/Next changes.
中英文关键词都可以放一点，贴合你们团队真实口头禅。改完 description 后，用三五句真实会说的话试触发；该出手时不出手，多半是描述太窄或太飘，而不是正文写得不够长。
常见坑（我们踩过或看别人踩过）
- name 和目录名不一致
规范写明必须一致。目录叫 frontend-review，name 却写成 FrontendReview，属于直接不合格。
- 把整本设计文档塞进 SKILL.md
规范建议主体控制体量，细节外置。Review skill 尤其别把三年前的组件规范全文贴进来；链到 references/ 或仓库文档路径即可。
- 禁区写成「攻击教程」
防御清单只写「碰了什么要标红、建议怎么收紧」。不写 PoC，不写 payload。第三方 skill 更要先通读 scripts/ 再装——官方研究文也强调只信任审过的来源。
- 期望 skill 替代人审
它擅长固定工序和漏项提醒；产品语义、交互是否合理，还是人说了算。结论里留「有条件通过」比硬给「通过」更诚实。
- 每人本地一份互不同步
Skill 进 Git 才有意义。Review 规则的改动走正常 PR，别再私发给同事一份 .docx。
你读完最少能带走什么
- Agent Skills = 文件夹 + SKILL.md；跨产品的开放格式，现由 AAIF 托管。
- 渐进式披露：先 name/description，用到再加载正文和附件。
- 前端 Review 很适合做成团队第一个 skill：顺序固定、命令可跑、禁区可列。
- 文内模板 + demo/frontend-review/ 可直接拷贝；先跑 scripts/check-skill.sh，再放进 .agents/skills/。
下次想加「改组件必须补单测」「改样式先搜 design token」之类的规矩，不要新开一份万字 Prompt——在同一份 SKILL.md 里加一条硬规矩，或者再挂一个更窄的 skill。作业卡越贴越全，聊天框反而能变短。
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。
Prompt: Write "Faceend Review"Skill with Agent Skills
If someone on the team uses AI to watch PR, you're gonna hit the same thing quickly: everyone's dialogue box has a front-end review code. Today we add three, we delete two, and we have copies of last month's edition. The norm itself is right, it is wrong to live in the wrong place — in chat records, not in warehouses.
Agent Skills does a very simple thing: collects "how to do something" into a folder with a SKILL.md at its core. The assistant reads it himself when he needs it. He doesn't have to stick it to Prompt. On 22 October 2026, Anthropic donated the Open Standards to the Agenic AI Foundation (AAIF) under the umbrella of the Linux Foundation; the Code continues to be open, with names, logo, GitHub and angentskills.io being handed over together to facilitate cross-product sharing.
This is not a concept tour. The target is one: you can copy a front-end Revie Skill into the warehouse and use it that day. A complete template is available at the end of the text, and the accompanying demo/ directory can also run the script directly.
Let's start with Prompt, AGENTS.md, Skyll.
It's a good word to say that when you land, it's better to separate:
The value of Skill is not "written longer" but is foundable, reusable, load on demand. It is called progressive disclosure (progressive disclosure): on start-up, look only at the name of each skill; really match to the task to read the full SKILL.md; scripts and reference documents are then opened as required. So you can hang a lot of skills in the warehouse, and you don't have to pop up context.
See: Agent Skills Code, Anthropic Endowment Proclamation (2026-10-22).
What does a Skill catalogue look like?
At least one document:
frontend-review/
└── SKILL.md
The whole thing can be this long (the last three directories are optional):
frontend-review/
Ideas - SKILL.md # Need: YaML Head + Markdown Text
Ideas - scripts/ # Option: Executable script
Ideas -References/ # Options: Additional information read on demand
└-assets/#option: templates, static resources
SKILL.md must start with YAML Frontmatter. The norm requires at least two fields:
-name: lowercase letters / numbers / hyphenation, must match the directory name, cannot -- cannot start with --
-description: state exactly what to do and when to use it; this is the basis of the assistant's decision to "use you."
field is also available for license, compatibility, metadata, experimental-tools, etc. The text does not have a mandatory template, but the official suggestion is that the subject should not be too big: details are taken down to references/, scripts/.
The smallest skeleton is this:
---
name: frontend-review
Once when the user asks for code review, PR review, front review, or before changing UI changes.
---
# Frontend Review
Implement sequentially: See the range of changes Type check Lint hazard change restricted area.
Output the conclusions of a fixed structure, with less empty words.
In these lines, it's better than "plugging the review code into every new conversation" -- because it's in the version library, in one place, and the team will be able to eat it next time.
Why is front-end Review fit to be the first Skill
Not all processes are worth doing. Frontend Review just stepped on a few points:
- Stable steps: scope, typecheck, lint, sensitive. That's the order of the trial.
- Orders to run: tsc-noEmit, eslint, biome is more reliable than "the feeling of grace."
- The restricted areas are clear:...env, forensics, dangerously SetInnerHTML, postmessage of unverified origin...
- The team size needs to be uniform: most afraid of "must change/recommended change" written by everyone in Prompt.
One sentence: "How do we agree on the pre-trial end" from the chat record to the warehouse.
Do it: Write a "front-end review" Skill
The following text, which is identical to the end of the text, can be reproduced directly. You can change the script by two places.
---
name: frontend-review
Once when the user asks for code review, PR review, or before changing UI/React/Vue/Next changes.
license: MIT
metadata:
author: team-frontend
version: "1.0"
audience: frontend
---
# Frontend Revie Skill
You're doing front-end change reviews for this warehouse. The goal is not to write a long text, but to close it in a fixed order and give enforceable conclusions.
# When to start
User refers to code review / PR review / check changes / Enables this skill before checking this front-end code /merge.
# Hard rules
1. **Specific scope of change**
- List this relevant document (`git status ' /`git diff-stat ', or pasted by user).
- Reconstructing over and above demand: Mark it as "Proposal for a separate PR", with the default not to change the user directly.
2.** Type check**
- Priority running project scripts in warehouse with TypeScript, e.g.:
- `pnpm typecheck` / `npm run typecheck` / `npx tsc --noEmit`
- Mistake: Post the wrong path and message, then talk about style.
3. **Lint**
- ESLint / Biome / Oxlint runs corresponding scripts such as `pnpm lint '.
- Only the alarms related to this change will be repaired; the entire historical debt will be recorded and no opportunity will be used to remove it.
4.** Dangerous changes to restricted areas (defence lists)**
If diff touches the following paths or modes, it must** be visible red** and requires human confirmation to continue:
- `**/.env*, key, Token, private key, Intranet address hard code
- '**/auth/** ', login, Cookie / LocalStorage sensitive field
- `dangerusly SetInnerHTML ', unsterilized HTML fusion
- `postMessage ' / `iframe ' failed to verify `origin '
- Reliance on lock files is irrelevant. Heavy Write
- Delete or weaken CSP, CORS, CSRF, permission
- Enter the user directly into the `eval ', dynamic `Function ', unverified path jump
** Defensive Note:** Point of risk and suggested change. Do not give replicable strike steps, PoC, Payload.
# Output format (copy structure)
(Output template starts)
# Review Conclusion
- Conclusions: adopted / conditional / not adopted
- One thing:...
# Checked
- [ ] Scope of changes checked
- [ ] Type check: passed / failed / repository without script (description)
-[ ] Lint: Passed / Failed / Repository No Script (Description)
- [ ] No-go: missed / hit (file listing)
# Must change #
1. …
# Suggested change #
1. …
We can talk later
1. …
(end of output template)
# Writing tone
- Like co-workers, evaluating: short sentences, roll-call documents, less adjectives.
- Uncertainty means uncertainty and writes points for user confirmation.
The rules of restricted areas can be added to the rules of reference/denylist.md, the frontal chain of the body - which is so delicious that it is not usually context, which is subject to sensitive changes.
Back to the warehouse: how, how, how, how.
Where's the directory?
The official Quickstart (for example, VS Code) defaulted on the following items:
mkdir -p .agents/skills
cp -R frontend-review .agents/skills/
The scanned paths for different products may vary slightly, but the document format is the same. The key is: name field and the folder name is Frontend-review.
Check first, skill.
Scripts are unconnected. Only frontmatter, name, number of lines are checked:
bash demo/frontend-review/scripts/check-skill.sh
You should see a similar output:
OK: frontmatter separator
OK: name=frontend-review
OK: length...
OK: SKILL.md lines...
All through. Copying this directory to the warehouse is available for trial.
The regulation also refers to a more complete validation of skills-ref validate./my-skill, which can be achieved with official reference; this bash script above is prepared for "zero dependence, running on the spot."
3) How do you trigger the conversation?
A new round of Agent conversations, which can be spoken directly, such as:
Review current changes by front-end review skill. First typecheck and then lint.
or:
This is a react PR, do code review.
The assistant should first rely on the description hit Frontend-review, then load the text and press the four-track level. If it exaggerates the code, does not run a check, writes "hard rules" in the skiller, or replaces it with a more accompanied Agent mode/ model -- the conformity of tools varies from product to product, and the official Quickstart writes it.
(4) and CI
Skill is the process card in the session; CI is the threshold. The former improves day-to-day self-censorship efficiency, while the latter should not be replaced. typecheck/int that red or red.
What's a good "renew" output like?
Assuming that colleagues had modified the components adjacent to the login page, they had also physically monitored postmessage. After the Skill run, the ideal output is close to the following:
# Review Conclusion
- Conclusion: conditional adoption
- Reason for one sentence: Type check and Lint passed, but `src/features/auth/sessionBridge.ts ' postmessage was not verified origin required human confirmation.
# Checked
- [x] The scope of the changes is checked (5 files)
- [x] Type check: pass (pnpm typecheck)
- [x] Lint: pass (pnpm lint)
- [x] Closed area: command Bridge.ts (postMessage)
# Must change #
1. `sessionbridge.ts ' : check `event.orgin ' before processing messages, accepting only white list domain names; direct return when source unknown.
2. Do not write access token to debug field in `localStorage '; change to existing session.
# Suggested change #
1. Login buttons loading state and error file to remove the buttons from the loop when they fail.
We can talk later
1. Import, which is irrelevant, proposes to create a separate PR, which is bound together with the change of authority.
Two:
- Conditional passage is the norm, not the mud. It's time to stop in a restricted area.
- We have to change / suggest change / later on. You just have to check if there's a "must change" or not.
If you find that the assistant is still exporting the empty phrase "good as a whole, advise on performance" then go back to the skill text: write the output format into a mandatory structure and expressly ban exaggerating without a file path.
Team landing: Don't invent 12 cards at once
It is proposed to expand in this order:
- First, Review (in this text): The benefits are immediately reflected in the PR conversation.
- Add "New Page / New Component" to specify directory, name, question/ test.
- Finally, narrow-area skill (e.g., "change chart" "change sheet check") to avoid a list of skills that is longer than the assembly library.
There are three practical examples of collaboration:
-Skill's modification is going PR, reviewer's looking at "Is the process getting tougher or looser" and not vindictive.
- Change is going back: Triple test with team high frequency oral Zen.
- Write in README or contribution guide: "A front end self-check can start by shouting front-review skill" — more permanent than oral ale.
Skill has two more things than "Booking the norms into the system Prompt": version and load on demand. The system Prompt changes everything; Skill is lighted only for related tasks, and changes are bolder.
How do you write it?
Many people write "help review the code" -- too false, the assistant doesn't know when it's working.
A better way to answer two questions at once: what to do and how users might call you:
Once when the user asks for code review, PR review, front review, or before changing UI/React/Vue/Next changes.
You can put a little bit of a key in Chinese, and it fits your team's true rhetoric. After changing the description, try to trigger it with three or five words that are true; it is mostly too narrow or too drifty to describe it.
Common pit.
- Name does not match directory name
The norm states that there must be consistency. The directory is called Frontend-review, but the name is written as FrontendReview, which is directly ineligible.
- SKILL.md
Regulates the body control volume of the body, with details to be placed. Review Skill in particular does not paste the full text of the three-year-old component instruction; a chain to references/ or a warehouse document path is sufficient.
- The restricted area is written as "Attack Academy."
The list of defenses only says, "What you touch is red, how you propose to tighten it." Not Poc, not Payload. The third party, skill, has to read the scripts/scripts first - the official research paper also emphasizes trust in only the source of the trial.
- Expecting a skill alternative trial.
It specializes in fixed processes and missing reminders; whether the semantics of the product, interaction is reasonable, or is in the hands of people. In the conclusion, "conditional passage" is more honest than "adoption".
- One local each.
Skill went into Git to make sense. Review rules change normal. PR, don't send a copy of.docs to your colleagues.
What can you take after reading?
- Agent Skills = folder + SKILL.md; Open format across products, now hosted by AAIF.
- Progressive disclosure: First name/description, then load the body and attachment.
- Front-end Review is well suited to be the first skill team: fixed order, command to run, restricted area to list.
- The text template + demo/frontend-review/ directly available; run first/check-skill.sh, then insert.AGents/skills/.
Next time you want to add a rule like "reorganization must be completed" and "dissign token" instead of opening a new "prompt" -- a hard rule in the same SKILL.md or a narrower skill. The more you paste the card, the shorter the chat box.
Auto-fetched and translated by AI Atlas. All rights belong to the original author.