技能说明
适合上线前的网页 UI 评审、无障碍检查和 UX 走查；它只输出按文件和行号定位的问题，不直接修改代码。每次评审前会读取最新规则，建议结合项目实际需求复核结论。
关于此技能
Vercel 官方的网页界面规范审查技能，把界面质量拆成可检查、可定位的问题清单。
核心能力
100+ 条界面规则
覆盖可访问性、焦点状态、表单、动画、排版、图片、性能、导航、深色模式、触控和国际化。
按文件和行号反馈
读取指定文件或匹配范围后，按 file:line 形式输出问题，方便开发者直接回到代码修复。
以最新规范为准
评审前从 Vercel 的公开规则源获取最新内容，减少只依赖旧版提示的风险。
适用场景
网页上线前检查
在提交或部署前快速检查页面是否遗漏键盘操作、焦点、表单状态、图片说明和响应式细节。
无障碍与 UX 走查
针对已有组件或页面代码，找出可访问性、交互反馈和导航状态方面的明显问题。
设计规范落地
把网页设计要求转成具体的代码审查项，帮助团队保持一致的实现质量。
使用步骤
- 01
第一步：指定范围
提供页面、组件或代码文件路径；如果没有指定范围，技能会先要求补充评审对象。
- 02
第二步：读取规则
评审前获取最新 Web Interface Guidelines，再逐项检查指定代码。
- 03
第三步：输出清单
用文件和行号标出问题，并给出足够清楚的修正方向；完成后由开发者结合项目约定复核。
常见问题
它会自动改代码吗？+
不会。它定位网页界面问题并输出审查结果，是否修改以及如何修改由开发者确认。
只适合 React 或 Next.js 吗？+
不限定框架。只要 Agent 能读取网页界面代码，就可以用它检查通用的 HTML、CSS、JavaScript 或组件实现。
为什么每次都要读取最新规则？+
规则源会更新。使用最新内容能减少旧规则造成的遗漏，但仍应结合项目目标、浏览器支持和实际用户需求判断。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/08/29
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add vercel-labs/agent-skills