audit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Run a technical audit of the UI at the target the user described. Load the

ui-craft

skill and apply the audit lens.

Note: audit is knob-agnostic — accessibility and performance are not tunable.

Scope (non-negotiable checks):

Accessibility — read
```
references/accessibility.md
```
:
- Visible
```
:focus-visible
```
  on every interactive element
- Keyboard reachable, no focus traps
- Touch targets ≥ 44px (mobile)
- Color not the only signal for state
- Form labels, error association, required indication
- ```
prefers-reduced-motion
```
  honored for all animations
Performance — read
```
references/performance.md
```
:
- Only
```
transform
```
  /
```
opacity
```
  animated (no
```
width
```
  /
```
top
```
  /
```
height
```
  )
- No
```
transition: all
```
- ```
will-change
```
  scoped to active interaction, removed after
- Images have
```
width
```
  /
```
height
```
  or
```
aspect-ratio
```
  (CLS)
- No layout thrash in scroll/resize handlers
Responsive — read
```
references/responsive.md
```
:
- Mobile-first breakpoints, no fixed-width components
- ```
env(safe-area-inset-*)
```
  respected on fixed elements
- Touch zones don't overlap
- No horizontal scroll at 320px

Output format — the Review Format table from SKILL.md:

Before	After	Why

Group findings by priority: Critical (blocks usability/a11y) → High-impact (immediately noticeable) → Quick wins (polish).

Do NOT rewrite code unless asked. Report findings first; wait for approval before editing.

背景说明： 此子技能是更广泛的

ui-craft

技能的一个专项视角。如果

ui-craft

技能已安装，请先阅读其SKILL.md中的发现排查、防冗余及工艺测试部分，再应用以下专项视角。

对用户描述的目标UI执行技术审计。加载

ui-craft

技能并应用审计视角。

注意： 审计无需调整参数——无障碍和性能相关检查不可调优。

检查范围（不可协商的必查项）：

无障碍（Accessibility） — 参考
```
references/accessibility.md
```
：
- 每个交互元素都有可见的
```
:focus-visible
```
  状态
- 可通过键盘访问，无焦点陷阱
- 移动端触摸目标尺寸≥44px
- 状态提示不唯一依赖颜色
- 表单标签、错误关联、必填项标识
- 所有动画均遵循
```
prefers-reduced-motion
```
  设置
性能（Performance） — 参考
```
references/performance.md
```
：
- 仅对
```
transform
```
  /
```
opacity
```
  执行动画（不使用
```
width
```
  /
```
top
```
  /
```
height
```
  ）
- 不使用
```
transition: all
```
- ```
will-change
```
  仅作用于正在交互的元素，交互结束后移除
- 图片设置
```
width
```
  /
```
height
```
  或
```
aspect-ratio
```
  （优化CLS）
- 滚动/ resize处理程序中无布局抖动
响应式设计（Responsive） — 参考
```
references/responsive.md
```
：
- 采用移动端优先的断点设置，无固定宽度组件
- 固定元素遵循
```
env(safe-area-inset-*)
```
  规则
- 触摸区域不重叠
- 在320px宽度下无横向滚动

输出格式 — 采用SKILL.md中的评审格式表格：

现状	优化方案	原因

按优先级分组展示发现的问题：严重（Critical）（阻碍可用性/无障碍）→ 高影响（High-impact）（用户可立即感知）→ 快速优化（Quick wins）（细节打磨）。

除非用户要求，否则请勿重写代码。先报告问题发现，等待用户批准后再进行编辑。