Back to Details

ui-audit

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
  • The request mentions visual hierarchy, dense product chrome, headers, tabs, sidebars, icons, or separator cleanup
在以下场景使用此技能：
  • 用户提出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
  1. Audit only changed pages/components unless a full sweep is requested.
  2. Prioritize 
    CRITICAL
    and 
    HIGH
    findings before medium-priority polish.
  3. For motion behavior, also apply 
    ui-animation
    for timing/easing/reduced-motion details.
  4. After fixes, rerun the relevant rules before finalizing.
  5. When hierarchy or chrome cleanup is in scope, use the navigation, layout, and extra-polish sections in 
    craft-checklist.md
    before reporting.
审计过程中复制并跟踪以下检查清单：
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
  1. 除非要求全面检查，否则仅审计有变更的页面/组件。
  2. 优先处理
    CRITICAL
    和
    HIGH
    级别的问题，再处理中优先级的细节打磨。
  3. 针对动效行为，还需结合
    ui-animation
    规则检查时长/缓动/简化动效细节。
  4. 修复完成后，重新运行相关规则再最终确认。
  5. 若涉及层级或界面冗余元素清理，在提交报告前，需参考
    craft-checklist.md
    中的导航、布局和额外打磨章节。

Rule Categories by Priority

按优先级划分的规则类别

PriorityCategoryImpactPrefix
1Accessibility and SemanticsCRITICAL
a11y-
2Keyboard and InteractionCRITICAL
interaction-
3Forms and ValidationCRITICAL
forms-
4Typography and ReadabilityHIGH
type-
5Navigation and FeedbackHIGH
nav-
6Layout and ResilienceHIGH
layout-
7Performance and Visual StabilityHIGH
perf-
8Motion and Theme BehaviorHIGH
motion-
9Content and MicrocopyMEDIUM
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

UI Audit Findings

path/to/file.tsx

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

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`。