audit-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Audit

UI 审计

Final-pass audit workflow for web interfaces. Focuses on concrete issues with concrete fixes.

Web界面的最终审核工作流，聚焦具体问题并提供明确的修复方案。

Trigger Cues

触发场景

Use this skill when:

The user asks for a UI quality audit, design QA, polish pass, or pre-release review
The task requires accessibility, keyboard, form usability, typography, or interaction checks
The request includes loading/error/empty states, responsiveness, or visual stability checks

在以下场景使用该技能：

用户要求进行UI质量审计、设计QA、细节优化或发布前审查
任务需要检查可访问性、键盘交互、表单可用性、排版或交互逻辑
请求包含加载/错误/空状态、响应式或视觉稳定性检查

Audit Workflow

审计工作流

Copy and track this checklist during the audit:

text

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

Audit only changed pages/components unless a full sweep is requested.
Prioritize
```
CRITICAL
```
and
```
HIGH
```
findings before medium-priority polish.
For motion behavior, also apply
```
ui-animation
```
for timing/easing/reduced-motion details.
After fixes, rerun the relevant rules before finalizing.

审计期间复制并跟踪以下检查清单：

text

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

除非要求全面检查，否则仅审计有变更的页面/组件。
优先处理
```
CRITICAL
```
和
```
HIGH
```
级别的问题，再处理中优先级的细节优化。
针对动效行为，还需应用
```
ui-animation
```
规则检查时长/缓动/简化动效细节。
修复完成后，在最终确认前重新运行相关规则。

Rule Categories by Priority

按优先级划分的规则类别


a11y-
interaction-
forms-
type-
nav-
layout-
perf-
motion-
copy-

Priority	Category	Impact	Prefix
1	Accessibility and Semantics	CRITICAL	`a11y-`
2	Keyboard and Interaction	CRITICAL	`interaction-`
3	Forms and Validation	CRITICAL	`forms-`
4	Typography and Readability	HIGH	`type-`
5	Navigation and Feedback	HIGH	`nav-`
6	Layout and Resilience	HIGH	`layout-`
7	Performance and Visual Stability	HIGH	`perf-`
8	Motion and Theme Behavior	HIGH	`motion-`
9	Content and Microcopy	MEDIUM	`copy-`


a11y-
interaction-
forms-
type-
nav-
layout-
perf-
motion-
copy-

优先级	类别	影响程度	前缀
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-`

Quick Reference

快速参考

Read only what is needed for the current audit scope:

Category map and impact rationale:
```
rules/_sections.md
```
Rule-level guidance and examples:
```
rules/<prefix>-*.md
```
Full craft sweep:
```
craft-checklist.md
```
Typography deep sweep:
```
typography-checklist.md
```

Example rule files:

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

Each rule file contains:

Why the rule matters
Incorrect example
Correct example

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

类别映射与影响说明：
```
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

每个规则文件包含：

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

Review Output Contract

审查输出规范

Report findings in this format:

markdown

undefined

按以下格式报告审计结果：

markdown

undefined

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).

[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


- Group findings by file.
- Use `file:line` when line numbers are available.
- State issue and propose a concrete fix.
- Include clean files as `✓ pass`.

✓ pass


- 按文件分组展示问题。
- 若有行号，使用`file:line`格式标注。
- 说明问题并提出明确的修复方案。
- 无问题的文件标注为`✓ pass`。