audit-ui

UI 审计

面向 Web 界面的最终审核工作流。重点关注具体问题和具体修复方案。

触发条件

在以下情况下使用此技能：

• 用户要求进行 UI 质量审计、设计 QA、打磨检查或发布前审核
• 任务需要检查无障碍访问、键盘操作、表单易用性、排版或交互
• 请求涉及加载、错误、空状态、响应式布局或视觉稳定性检查

审计工作流

在审计期间复制并跟踪此检查清单：

Audit progress:
- [ ] Step 1: Scope changed surfaces and select relevant categories
- [ ] Step 2: Run CRITICAL checks first (a11y, interaction, forms)
- [ ] Step 3: Run HIGH/MEDIUM checks for the same surfaces
- [ ] Step 4: Report findings with file:line and concrete fixes
- [ ] Step 5: Re-check touched files and mark passes

1. 仅审计有变更的页面/组件，除非用户要求全面检查。
2. 优先处理 CRITICAL 和 HIGH 级问题，再进行中优先级的打磨。
3. 对于动态效果，还应使用 ui-animation 检查时序、缓动和减少动态效果的细节。
4. 修复后，在最终定稿前重新运行相关规则。

按优先级分类的规则类别

优先级	类别	影响	前缀
1	无障碍访问与语义	CRITICAL	a11y-
2	键盘与交互	CRITICAL	interaction-
3	表单与验证	CRITICAL	forms-
4	排版与可读性	HIGH	type-
5	导航与反馈	HIGH	nav-
6	布局与适应性	HIGH	layout-
7	性能与视觉稳定性	HIGH	perf-
8	动态效果与主题行为	HIGH	motion-
9	内容与微文案	MEDIUM	copy-

快速参考

仅阅读当前审计范围所需的内容：

• 类别映射与影响说明：rules/_sections.md
• 规则级指导与示例：rules/<prefix>-*.md
• 全面工艺检查：craft-checklist.md
• 排版深度检查：typography-checklist.md

规则文件示例：

rules/a11y-semantic-html-first.md
rules/forms-inline-errors-first-focus.md
rules/perf-image-dimensions-and-priority.md

每个规则文件都包含：

• 规则的重要性说明
• 错误示例
• 正确示例

审核输出约定

按以下格式报告发现的问题：

## UI Audit Findings

### path/to/file.tsx
- [CRITICAL] `a11y-icon-controls-labeled`: Icon button is missing an accessible name.
  - Fix: Add `aria-label="Close dialog"` (or visible text label).

### path/to/clean-file.tsx
- ✓ pass

• 按文件归类问题。
• 有行号时使用 file:line。
• 说明问题并提出具体修复方案。
• 将无问题的文件标记为 ✓ pass。