网页体验与可访问性检查

为什么需要自动化的规范审查

在多人协作的前端项目中，UI 规范往往散落在各种文档或 Confluence 页面里。人工 Code Review 时，很容易遗漏诸如“间距必须为 8px 的倍数”或“按钮在 :focus 状态下必须有可见轮廓”这类细节。这就导致线上页面在不同设备或浏览器上出现体验割裂。我们急需一种能将抽象规则直接映射到源码行的工具。

工作原理与核心步骤

这个技能通过动态拉取指南来解决规则过期的问题。当你提供文件路径或匹配模式时，它的工作流非常直接：

1. 动态获取规则：利用 WebFetch 从源 URL 拉取最新的网页界面指南，确保审查标准不是陈旧的快照。
2. 定位目标代码：读取你指定的 <file_path> 或匹配 <pattern> 的源文件。如果未指定，技能会主动询问。
3. 逐条比对：将指南中的每一条规则应用到代码中，不放过任何命名规范或结构层级的定义。
4. 结构化输出：最终以 file:line 的格式给出结果，让你可以直接跳转到问题所在的代码行。

适用边界与注意事项

需要注意的是，该技能的核心依赖在于源 URL 的可达性。如果目标指南站点无法访问，或者规则本身存在歧义，检查可能会中断或产生误报。此外，它主要进行静态文本层面的审查，无法替代在真实浏览器中的渲染验证或真机上的交互测试。建议将其作为 CI/CD 流程中的补充环节，而非唯一的质量防线。