用途:对指定文件做一次覆盖面广、简洁的预提交式 UI 代码审查,检查是否符合 Vercel Web Interface Guidelines。用法:以 $ARGUMENTS 传入待审查文件,读取文件后逐条对照规则,输出按文件分组、file:line 格式(VS Code 可点击)的简短发现,无问题标 ✓ pass,除修复不明显外不写解释,无前言。
主要检查范围:无障碍(图标按钮需 aria-label、表单控件需 label、交互元素需键盘处理、用 button/a 而非 div onClick、图片 alt、装饰图标 aria-hidden、异步更新 aria-live、语义 HTML 优先、标题层级与跳转链接、锚点 scroll-margin-top);焦点状态(可见 focus-visible 环、禁止无替代的 outline-none、用 :focus-visible、复合控件用 :focus-within);表单(autocomplete 与 name、正确 type/inputmode、禁止阻止粘贴、标签可点击、邮箱/代码/用户名关闭拼写检查、复选框单选共享点击区、提交按钮状态与 spinner、错误内联并聚焦首个错误、占位符以 … 结尾、谨慎使用 autocomplete=off、未保存更改离开前警告);动画(尊重 prefers-reduced-motion、只动画 transform/opacity、禁止 transition: all、正确 transform-origin、SVG 变换处理、动画可中断);排版(… 而非 ...、弯引号、不换行空格、加载状态以 … 结尾、tabular-nums、text-wrap: balance/pretty);内容处理(长内容截断或换行、flex 子项 min-w-0、空状态、用户内容长度);图片(显式宽高、懒加载、首屏优先级);性能(大列表虚拟化、渲染中不做布局读取、批量 DOM 读写、非受控输入、preconnect、字体 preload 与 font-display: swap);导航与状态(URL 反映状态、链接用 a/Link、可深链、破坏性操作需确认或撤销);触控(touch-action: manipulation、tap-highlight、overscroll-behavior: contain、拖拽时禁用选择、谨慎 autoFocus);安全区与布局;暗色模式与主题(color-scheme、theme-color、原生 select 颜色);国际化(Intl.DateTimeFormat/NumberFormat、按 Accept-Language 检测语言);水合安全;悬停与交互状态;文案(主动语态、句首大写、数字计数、具体按钮标签、错误含修复步骤、第二人称)。同时标记反模式,如禁用缩放、阻止粘贴、transition: all、无尺寸图片、无标签输入、无 aria-label 图标按钮、硬编码日期数字格式等。限制:资料未提供安装命令、收费、平台或效果信息。