用途:这是一个设计工程师视角的代码审查技能,依据 Rauno Freiberg 的 Web 界面指南检查 UI 代码,指南本身为非穷尽清单,部分条目带有主观性,且刻意不重复 WAI-ARIA 规范,仅点出部分无障碍要点。
主要能力:按交互、排版、动效、触控、优化、无障碍、设计七个板块逐条检查。交互方面关注 label 聚焦输入、表单包裹与 Enter 提交、input 类型与 required、禁用拼写检查与自动完成、前后缀装饰定位、开关即时生效、提交后禁用按钮防重复请求、禁用内部 user-select、装饰元素禁用 pointer-events、列表项无死区。排版关注字体平滑、text-rendering、字体子集、悬停不改变字重、字重不低于 400、标题 500-600、clamp() 流体字号、tabular-nums、iOS 横屏文字缩放。动效关注主题切换不触发过渡、交互动效不超过 200ms、动画幅度与触发尺寸成比例、高频低新奇操作避免多余动画、循环动画不可见时暂停、锚点平滑滚动。触控关注 hover 状态用 @media (hover: hover) 限定、输入字号不小于 16px、触屏不自动聚焦、video 加 muted 与 playsinline、自定义手势禁用 touch-action、替换 iOS 点击高亮。优化关注大 blur 性能、避免缩放模糊矩形产生色带、谨慎使用 translateZ(0) 与 will-change、iOS 自动播放视频数量、用 ref 绕过 React 渲染生命周期、适配设备硬件与网络。无障碍关注禁用按钮不加 tooltip、用 box-shadow 做焦点环、列表键盘导航与删除、下拉用 mousedown 触发、SVG favicon 跟随系统主题、图标按钮加 aria-label、悬停 tooltip 不含交互内容、图片用 img、HTML 插画加 aria-label、渐变文字在 ::selection 取消渐变、嵌套菜单用预测锥。设计关注乐观更新与回滚、服务端鉴权重定向、::selection 样式、反馈贴近触发源、空状态引导创建。
使用方式:若提供 $ARGUMENTS 则分析指定文件或模式,为空则询问要审查哪些文件。先读文件再评估,输出按板块分组的问题清单,标注行号与代码片段,给出修复建议而非仅指出问题,逐条检查不跳过,识别模式而非个例,可按需直接修复。输出含各板块问题数与总分(满分 100)。
适用场景:前端 UI 代码评审、设计工程规范落地、交互与无障碍自查。
限制:指南非穷尽且部分主观;不覆盖完整 WAI-ARIA 规范;具体评分算法、支持语言与集成方式暂未提供。