技能介绍

在前端开发中，代码审查往往偏重业务逻辑，而设计规范的一致性很容易被忽略。硬编码的色值和间距不仅破坏了主题切换的灵活性，还常常导致暗色模式下颜色失效、文字难以阅读。此外，不同框架的 API 最佳实践更新频繁，人工审查很难保证每行代码都符合最新的官方标准。

核心审查维度

argus-design-review 技能激活后，会像严格的代码审查员一样，对每一行前端代码进行自动化审计：

设计令牌与硬编码：强制检查组件内的颜色是否引用了 var(--ds-*)，拦截任何直接使用 oklch() 或 #hex 的行为。同时，确保间距、圆角和字体比例全部来自设计令牌，消除破坏主题的魔法数字。
暗色模式覆盖：自动扫描 :root 中声明的颜色变量，一旦发现缺少 [data-theme="dark"] 覆盖，直接将其标记为 P0 阻断级问题，防止静默的暗色模式崩溃。
无障碍底线：严格执行 WCAG AA 标准。自动检查图标按钮的 aria-label、焦点可见性以及文本对比度，确保不合规的交互元素被拦截。

技术栈感知与反模式拦截

在审查开始前，技能会通过读取文件扩展名和 package.json 自动识别项目技术栈（React、Vue、Svelte、Angular、Astro 等）。随后，它会加载对应框架的反模式库进行精准打击。例如，在 React 中校验 useEffect 的依赖数组是否完整，清理函数是否遗漏；在 Angular 中检查 RxJS 订阅是否使用了 takeUntilDestroyed 进行清理；在 Vue 中阻止直接修改 Props 的违规行为。

输出与修复

发现问题后，技能会将问题按严重程度（P0 到 P3）进行分组。每个问题不仅包含精确的文件路径和行号，还会直接附带可复制的修复代码，帮助开发者一键解决问题，而不是给出模棱两可的建议。

适用边界与注意事项

该技能假设项目内已建立标准的设计系统（即包含有效的 --ds-* CSS 变量定义）。对于通过 JavaScript 运行时动态拼接的内联样式或类名，静态扫描可能无法完全覆盖。此外，它专注于代码层面的静态审查，不会执行代码或模拟浏览器渲染，因此仍需配合单元测试和真实的视觉回归测试来保证最终质量。