audit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.

First: Use the frontend-design skill for design principles and anti-patterns.

执行系统性质量检查，生成一份包含优先级排序问题及可落地改进建议的全面审计报告。不要直接修复问题，而是将问题记录下来，交由其他命令处理。

第一步：使用frontend-design技能来参考设计原则与反模式。

Diagnostic Scan

诊断扫描

Run comprehensive checks across multiple dimensions:

Accessibility (A11y) - Check for:
- Contrast issues: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
- Missing ARIA: Interactive elements without proper roles, labels, or states
- Keyboard navigation: Missing focus indicators, illogical tab order, keyboard traps
- Semantic HTML: Improper heading hierarchy, missing landmarks, divs instead of buttons
- Alt text: Missing or poor image descriptions
- Form issues: Inputs without labels, poor error messaging, missing required indicators
Performance - Check for:
- Layout thrashing: Reading/writing layout properties in loops
- Expensive animations: Animating layout properties (width, height, top, left) instead of transform/opacity
- Missing optimization: Images without lazy loading, unoptimized assets, missing will-change
- Bundle size: Unnecessary imports, unused dependencies
- Render performance: Unnecessary re-renders, missing memoization
Theming - Check for:
- Hard-coded colors: Colors not using design tokens
- Broken dark mode: Missing dark mode variants, poor contrast in dark theme
- Inconsistent tokens: Using wrong tokens, mixing token types
- Theme switching issues: Values that don't update on theme change
Responsive Design - Check for:
- Fixed widths: Hard-coded widths that break on mobile
- Touch targets: Interactive elements < 44x44px
- Horizontal scroll: Content overflow on narrow viewports
- Text scaling: Layouts that break when text size increases
- Missing breakpoints: No mobile/tablet variants
Anti-Patterns (CRITICAL) - Check against ALL the DON'T guidelines in the frontend-design skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).

CRITICAL: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.

从多个维度执行全面检查：

可访问性（A11y） - 检查以下内容：
- 对比度问题：文本对比度比值＜4.5:1（AAA标准为7:1）
- 缺失ARIA属性：交互元素未设置合适的角色、标签或状态
- 键盘导航问题：缺失焦点指示器、标签顺序不合理、键盘陷阱
- 语义化HTML问题：标题层级错误、缺失地标元素、用div代替button
- 替代文本问题：图片缺失或描述不佳的替代文本
- 表单问题：输入框无标签、错误提示不清晰、缺失必填标识
性能 - 检查以下内容：
- 布局抖动：在循环中读取/写入布局属性
- 高开销动画：对布局属性（width、height、top、left）执行动画，而非使用transform/opacity
- 缺失优化：图片未启用懒加载、资源未优化、未设置will-change属性
- 包体积问题：不必要的导入、未使用的依赖
- 渲染性能问题：不必要的重渲染、缺失记忆化处理
主题设计 - 检查以下内容：
- 硬编码颜色：未使用设计令牌的硬编码颜色
- 暗黑模式异常：缺失暗黑模式变体、暗黑主题下对比度不佳
- 令牌不一致：使用错误的令牌、混合不同类型的令牌
- 主题切换问题：主题切换时未更新的属性值
响应式设计 - 检查以下内容：
- 固定宽度：硬编码宽度在移动端出现布局断裂
- 触摸目标：交互元素尺寸＜44x44px
- 横向滚动：窄视口下内容溢出
- 文本缩放：文本尺寸增大时布局断裂
- 缺失断点：无移动端/平板端变体
反模式（CRITICAL） - 对照frontend-design技能中的所有禁止准则进行检查。查找AI生成痕迹（AI调色板、渐变文本、毛玻璃效果、Hero指标、卡片网格、通用字体）及通用设计反模式（彩色背景上的灰色文本、嵌套卡片、弹跳缓动、冗余文案）。

重点提示：这是审计任务，而非修复任务。需详细记录问题，并清晰说明其影响。审计完成后，使用其他命令（如/normalize、/optimize、/harden等）来修复问题。

Generate Comprehensive Report

生成全面审计报告

Create a detailed audit report with the following structure:

创建一份结构如下的详细审计报告：

Anti-Patterns Verdict

反模式判定

Start here. Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.

从这里开始。 通过/不通过：是否看起来是AI生成的？列出技能中反模式部分的具体特征。请直言不讳。

Executive Summary

执行摘要

Total issues found (count by severity)
Most critical issues (top 3-5)
Overall quality score (if applicable)
Recommended next steps

发现的问题总数（按严重程度统计）
最关键的问题（前3-5个）
整体质量得分（如适用）
建议的后续步骤

Detailed Findings by Severity

按严重程度划分的详细发现

For each issue, document:

Location: Where the issue occurs (component, file, line)
Severity: Critical / High / Medium / Low
Category: Accessibility / Performance / Theming / Responsive
Description: What the issue is
Impact: How it affects users
WCAG/Standard: Which standard it violates (if applicable)
Recommendation: How to fix it
Suggested command: Which command to use (e.g.,
```
/normalize
```
,
```
/optimize
```
,
```
/harden
```
)

每个问题需记录：

位置：问题出现的位置（组件、文件、行号）
严重程度：Critical / High / Medium / Low
类别：可访问性 / 性能 / 主题设计 / 响应式设计
描述：问题内容
影响：对用户的影响
WCAG/标准：违反的标准（如适用）
建议：修复方案
推荐命令：应使用的命令（例如：
```
/normalize
```
、
```
/optimize
```
、
```
/harden
```
）

Critical Issues

关键问题

[Issues that block core functionality or violate WCAG A]

[阻碍核心功能或违反WCAG A级标准的问题]

High-Severity Issues

高严重程度问题

[Significant usability/accessibility impact, WCAG AA violations]

[对可用性/可访问性有重大影响、违反WCAG AA级标准的问题]

Medium-Severity Issues

中严重程度问题

[Quality issues, WCAG AAA violations, performance concerns]

[质量问题、违反WCAG AAA级标准、性能隐患]

Low-Severity Issues

低严重程度问题

[Minor inconsistencies, optimization opportunities]

[轻微不一致、优化机会]

Patterns & Systemic Issues

模式与系统性问题

Identify recurring problems:

"Hard-coded colors appear in 15+ components, should use design tokens"
"Touch targets consistently too small (<44px) throughout mobile experience"
"Missing focus indicators on all custom interactive components"

识别重复出现的问题：

"15+个组件中存在硬编码颜色，应使用设计令牌"
"移动端体验中触摸目标持续过小（＜44px）"
"所有自定义交互组件均缺失焦点指示器"

Positive Findings

积极发现

Note what's working well:

Good practices to maintain
Exemplary implementations to replicate elsewhere

记录表现良好的内容：

需保持的良好实践
可在其他地方复制的优秀实现

Recommendations by Priority

按优先级划分的建议

Create actionable plan:

Immediate: Critical blockers to fix first
Short-term: High-severity issues (this sprint)
Medium-term: Quality improvements (next sprint)
Long-term: Nice-to-haves and optimizations

创建可落地的计划：

立即处理：首先修复关键阻碍问题
短期：高严重程度问题（当前迭代）
中期：质量改进（下一个迭代）
长期：锦上添花的优化项

Suggested Commands for Fixes

修复推荐命令

Map issues to appropriate commands:

"Use
```
/normalize
```
to align components with design system (addresses 23 theming issues)"
"Use
```
/optimize
```
to improve performance (addresses 12 performance issues)"
"Use
```
/harden
```
to improve i18n and text handling (addresses 8 edge cases)"

IMPORTANT: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.

NEVER:

Report issues without explaining impact (why does this matter?)
Mix severity levels inconsistently
Skip positive findings (celebrate what works)
Provide generic recommendations (be specific and actionable)
Forget to prioritize (everything can't be critical)
Report false positives without verification

Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.

将问题映射至合适的命令：

"使用
```
/normalize
```
使组件与设计系统对齐（解决23个主题设计问题）"
"使用
```
/optimize
```
提升性能（解决12个性能问题）"
"使用
```
/harden
```
改进国际化与文本处理（解决8个边缘案例）"

重要提示：需全面但务实。过多低优先级问题会产生干扰。聚焦真正重要的内容。

禁止：

报告问题时不解释影响（为什么这个问题重要？）
不一致地混合严重程度等级
忽略积极发现（肯定做得好的地方）
提供通用建议（需具体且可落地）
忘记优先级排序（并非所有问题都是关键的）
未经验证就报告误报

请记住：你是一名注重细节的质量审计师。需系统记录、果断排序，并提供清晰的改进路径。一份优秀的审计报告能让修复工作变得简单。