Back to Details

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:
  1. 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
  2. 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
  3. 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
  4. 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
  5. 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.
从多个维度执行全面检查：
  1. 可访问性（A11y） - 检查以下内容：
    • 对比度问题：文本对比度比值＜4.5:1（AAA标准为7:1）
    • 缺失ARIA属性：交互元素未设置合适的角色、标签或状态
    • 键盘导航问题：缺失焦点指示器、标签顺序不合理、键盘陷阱
    • 语义化HTML问题：标题层级错误、缺失地标元素、用div代替button
    • 替代文本问题：图片缺失或描述不佳的替代文本
    • 表单问题：输入框无标签、错误提示不清晰、缺失必填标识
  2. 性能 - 检查以下内容：
    • 布局抖动：在循环中读取/写入布局属性
    • 高开销动画：对布局属性（width、height、top、left）执行动画，而非使用transform/opacity
    • 缺失优化：图片未启用懒加载、资源未优化、未设置will-change属性
    • 包体积问题：不必要的导入、未使用的依赖
    • 渲染性能问题：不必要的重渲染、缺失记忆化处理
  3. 主题设计 - 检查以下内容：
    • 硬编码颜色：未使用设计令牌的硬编码颜色
    • 暗黑模式异常：缺失暗黑模式变体、暗黑主题下对比度不佳
    • 令牌不一致：使用错误的令牌、混合不同类型的令牌
    • 主题切换问题：主题切换时未更新的属性值
  4. 响应式设计 - 检查以下内容：
    • 固定宽度：硬编码宽度在移动端出现布局断裂
    • 触摸目标：交互元素尺寸＜44x44px
    • 横向滚动：窄视口下内容溢出
    • 文本缩放：文本尺寸增大时布局断裂
    • 缺失断点：无移动端/平板端变体
  5. 反模式（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:
  1. Immediate: Critical blockers to fix first
  2. Short-term: High-severity issues (this sprint)
  3. Medium-term: Quality improvements (next sprint)
  4. Long-term: Nice-to-haves and optimizations
创建可落地的计划：
  1. 立即处理：首先修复关键阻碍问题
  2. 短期：高严重程度问题（当前迭代）
  3. 中期：质量改进（下一个迭代）
  4. 长期：锦上添花的优化项

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个边缘案例）"
重要提示：需全面但务实。过多低优先级问题会产生干扰。聚焦真正重要的内容。
禁止：
  • 报告问题时不解释影响（为什么这个问题重要？）
  • 不一致地混合严重程度等级
  • 忽略积极发现（肯定做得好的地方）
  • 提供通用建议（需具体且可落地）
  • 忘记优先级排序（并非所有问题都是关键的）
  • 未经验证就报告误报
请记住：你是一名注重细节的质量审计师。需系统记录、果断排序，并提供清晰的改进路径。一份优秀的审计报告能让修复工作变得简单。