Argus 设计评审技能

当该技能启用时，所有前端代码行均需遵循统一标准进行审查：设计 Token 使用正确、无硬编码值、深色模式全覆盖、满足无障碍基础要求。

评审维度

1. 设计 Token

规则：组件样式规则中出现的所有颜色必须使用 var(--ds-*) 引用。禁止直接使用 oklch()、#hex 或 rgb() 等裸色值。

/* 错误 — 组件规则中直接使用 oklch */
.ds-card {
  background: oklch(99% 0.005 80);
  color: oklch(20% 0.02 60);
}

/* 正确 — 使用 Token 引用 */
.ds-card {
  background: var(--ds-color-surface);
  color: var(--ds-color-fg);
}

例外：:root 和 @keyframes 中定义 Token 时，允许使用裸色值（oklch/hex）。

标记项：在组件规则（CSS 或内联 style=）中发现任何裸色值。

2. 硬编码值

规则：所有间距、圆角和字号比例值必须使用设计 Token 尺度系统。禁止使用“魔法数字”（magic numbers）。

/* 错误 */
padding: 16px;
border-radius: 8px;

/* 正确 */
padding: var(--ds-space-4);
border-radius: var(--ds-radius-lg);

标记项：任何本应使用设计 Token 却未使用的非零数值。

3. 深色模式覆盖

规则：:root 中声明的每个颜色 Token 都必须提供 [data-theme="dark"] 对应的重载定义。

/* 错误 — 缺少深色模式重载 */
:root {
  --ds-color-bg: oklch(97% 0.012 80);
}

/* 正确 — 已定义重载 */
[data-theme="dark"] {
  --ds-color-bg: oklch(15% 0.008 75);
}

标记项：任何在 :root 中声明但未在 [data-theme="dark"] 下重载的颜色 Token。此类问题将导致深色模式静默失效——颜色可能变得不可读。

4. 可访问性

规则：必须满足 WCAG AA 基线要求。此项为强制项，不得降级为警告。

模式	要求
仅含图标的	必须包含 aria-label
	必须包含 alt 属性
无 href 的	不得用作按钮；应改用
可聚焦元素	必须具备可见的焦点指示器
颜色对比度	普通文本 ≥ 4.5:1，大号文本 ≥ 3:1

标记项：任何违反项均为 P1 级别起评。

5. CSS 质量

• 同一选择器块内不得存在重复规则
• 不得存在空的 catch {} 块
• 必须符合有效 BEM 规范（禁止悬挂式修饰符，例如 .parent a--active）
• 不得存在无效的 HTML id 重复

6. HTML 结构

• 禁止将无 href 的 标签用作交互元素
• 语义化标签需正确使用（ 表示操作行为， 表示跳转链接）

[P 严重等级] <文件路径>:<行号> — <问题描述>
  发现:   <当前代码内容>
  期望: <应修改为的内容>
  Token:    <应使用的设计 Token（如适用）>