Web Interface Guidelines

Web Interface Guidelines 是什么

这是一个网页界面代码审查 Skill。它读取用户指定的文件或匹配模式，依据 Vercel 维护的界面规则检查可访问性、焦点、表单、动画、排版、图片、性能、导航状态、触摸交互、深色模式和国际化。

检查流程与输出

入口文件要求每次评审先获取远程最新规则，再读取目标文件并逐条检查。没有指定文件时应先询问范围。输出按文件分组，以 file:line 标记位置，说明问题和必要的修改方向；通过的文件可标记为 pass，不添加冗长前言。

重点规则

典型问题包括图标按钮缺少 aria-label、表单缺标签、焦点不可见、禁用粘贴、transition: all、忽略 reduced motion、图片缺尺寸、长列表不虚拟化、状态未进入 URL、破坏缩放、硬编码日期与数字格式，以及手势没有键盘替代。

依赖、版本与边界

运行需要网络以获取远程规则，并需要读取目标代码。默认行为是审查，不是自动修改。由于规则会更新，同一代码在不同日期可能得到不同结果；需要可复现审计时，应像本条目一样固定规则提交。规则清单也不能替代真实浏览器、屏幕阅读器和用户测试。

怎样验证审查结果

静态规则可以快速发现常见问题，但最终仍要在键盘操作、触摸设备、不同视口、深色模式和屏幕阅读器中验证。对表单要覆盖空值、错误、加载和成功状态；对动画检查 reduced motion；对长文本和多语言检查溢出。修复后应重新扫描同一文件，并记录无法应用规则的业务理由。

来源与许可

本条目依据 vercel-labs/agent-skills 的入口和 web-interface-guidelines 独立仓库固定提交中的完整 command.md 整理。规则仓库声明 MIT 许可证。

常见问题

1. 它检查哪些界面问题？

覆盖可访问性、焦点、表单、动画、排版、内容溢出、图片、性能、导航、触摸、布局、主题、国际化和 hydration。

2. 输入是什么？

输入为具体文件、目录或 glob 模式，代理随后读取匹配的界面代码。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

3. 输出格式是什么？

按文件分组，用 file:line 给出精简问题清单，便于编辑器直接定位。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

4. 规则会自动更新吗？

会。入口要求每次审查拉取远程最新规则，因此结论会随上游变化。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

5. 没有文件时怎么办？

应先询问要审查的文件范围，而不是扫描整个项目。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

6. 会检查可访问性吗？

会，包括语义 HTML、标签、键盘操作、焦点、替代文本、实时区域和媒体支持。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

7. 会直接修改代码吗？

默认只输出发现。若要自动修复，需要用户另行明确要求。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

8. 远程规则有什么风险？

需要联网，且上游变化会影响结果；合规审计应固定提交并保存规则版本。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。