何时使用
- 已有可读取的前端文件(组件、页面、样式、模板等),要对照一份权威、外部托管的 Web 界面准则做合规体检。
- 目标产出:以简洁的
file:line格式逐条列出违规点,可直接定位修复,而非长篇评论。 - 覆盖交互、状态反馈、键盘可达、无障碍、表单、动效、性能等通用网页准则(以抓到的最新规则为准)。
不该用的边界:
- 没有任何可读取的文件、只给截图或口头描述 → 本技能审的是源码文件,先索要文件/路径或改用
ux-ui-principles-audit(评界面描述)。 - 纯视觉稿、品牌评审、从零做设计 → 这是创作不是合规审查。
- 要求"顺手帮我改好" → 本技能只定位+给建议,不直接落代码。
- domain 注记:本仓库受控类表(taxonomy.json,06-creative 仅 design/image/av/brand)已无
misc,故归创意/design;若强写创意/misc会被build-index.mjs判为硬错误。
步骤 / 指令
1. 抓取最新准则(每次审查前都重新抓,规则会更新)
WebFetch: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
抓回的内容本身既含全部规则,也含输出格式说明 —— 以它为准。
2. 确定审查范围
- 用户给了文件/glob 模式 → 读取这些文件。
- 没给 → 停下来问"审哪些文件或哪个目录/模式",不要自行臆测扫全库。
3. 逐文件、逐规则比对
- 把每个文件内容对照抓回的每一条规则。
- 命中违规即记录精确位置(文件 + 行号)。
4. 按抓回准则指定的格式输出(默认 file:line 简洁清单)
path/to/file.tsx:42 — 违反的规则一句话(点名是哪条准则)
- 同类问题可合并归组;先严重后次要。
- 无违规则明说"未发现违规",不要凑数编造。
- 不确定的标"待确认"并写出假设。
规则:
- 单一职责:只做合规审查与定位,不改代码、不出新设计。
- 每条发现必须可定位(精确到
file:line)且对应某条具体准则。 - 准则是外部活文档,务必每次现抓,不要凭记忆复述旧规则。
示例
最小调用:
审查 src/components/**/*.tsx 是否符合 Web Interface Guidelines。
先 WebFetch 抓取最新准则,再逐文件比对,用准则指定的 file:line 格式输出。
无违规请明说,勿编造。
输出条目样例(file:line 简洁清单):
src/components/Button.tsx:17 — 交互元素无可见 focus 态,键盘用户无法感知焦点
src/components/Modal.tsx:54 — 弹层打开后焦点未陷入(focus trap 缺失),Esc 无法关闭
src/forms/Login.tsx:88 — 输入框仅用 placeholder 当标签,丢失语义 label
app/page.tsx:12 — 图片缺 width/height,触发布局抖动(CLS)
注意事项
- 必须先
WebFetch抓取准则源再审查;离线/抓取失败时如实告知,不要用记忆里的旧规则硬审。 - 准则源地址:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md,输出格式以抓回内容为准(本技能默认file:line)。 - 本技能读源码文件做静态比对,不渲染/不抓取运行中的页面;要看真实运行表现请配合浏览器/性能审计类技能。
- 区分"确证违反某条准则"与"主观风格偏好",别把口味标成违规。
- 输出不替代真实可用性测试与专家评审;缺文件、权限或成功标准时先停下问清。
互见
- requires:无。
- related:
ux-ui-principles-audit(对照研究支撑的 UX/UI 原则审界面描述,本技能则对源码文件按外部准则做 file:line 合规检查);accessibility-wcag-audit、wcag-22-audit-patterns(无障碍专项,与本技能的无障碍条目互补深挖);apple-hig-advisor(苹果 HIG 平台专项,本技能为通用 Web 准则)。 - combines_with:
ui-design-system-builder(审查发现的不一致/无障碍违规回流到设计令牌与组件体系修复);design-dev-handoff(交付前用本技能做一遍合规闸门);marketing-screenshots-playwright(需要看真实页面表现时配合截图/运行态验证)。
采编自 sickn33/antigravity-awesome-skills(MIT),原始准则来源 vercel-labs/web-interface-guidelines。