audit

上下文： 此子技能是更广泛的 ui-craft 技能的一个审查视角。如果也安装了 ui-craft 技能，请先阅读其 SKILL.md，了解 Discovery + Anti-Slop + Craft Test，然后应用下方的特定审查视角。

对 $ARGUMENTS 处的 UI 进行技术审计。加载 ui-craft 技能并应用审计视角。

步骤 0：视觉捕获（必须）

仅审查代码是不够的。每次审计／评审都要从用户看到的界面开始。按以下顺序尝试，使用第一个可用选项：

1. Playwright MCP — 如果有 playwright MCP 服务可用，请使用它。在三个视口下捕获整页截图：桌面端（1280×800）、平板端（768×1024）、移动端（375×812）。如果应用支持深色模式，也要捕获深色模式。
2. 浏览器开发者工具／Chrome MCP — 第二选择；使用相同的视口组合。
3. 其他浏览器自动化工具（agent-browser、cursor-ide-browser）— 第三选择。
4. 询问用户 — 最后手段。如果没有可用的自动化工具，请在继续前向用户索取截图。请具体说明：
   • “视觉评审需要截图。请提供：
     • 1280px（桌面端）的整页截图
     • 768px（平板端）的整页截图
     • 375px（移动端）的整页截图
     • 如果支持，请提供每种尺寸下的深色模式截图。”

在捕获或收到视觉内容之前，不要开始评审。如果没有成功使用任何自动化工具，请明确告知用户这一点，不要悄悄退回到仅审查代码的方式。

如果用户拒绝提供截图，请进行仅代码审查，并在报告顶部明确标注 [CODE-ONLY REVIEW — visual issues not assessed]，说明这一限制。

注意： 审计与可调参数无关 — 无障碍和性能不可调整。

范围（必须检查）：

1. 无障碍 — 阅读 references/accessibility.md：
   • 每个交互元素都显示 :focus-visible 样式
   • 可通过键盘访问，且不存在焦点陷阱
   • 触控目标 ≥ 44px（移动端）
   • 状态不能仅通过颜色传达
   • 表单标签、错误关联、必填项指示
   • 所有动画都遵循 prefers-reduced-motion
2. 性能 — 阅读 references/motion.md 中的 Rendering Performance 部分：
   • 动画仅使用 transform / opacity（不得使用 width/top/height）
   • 不使用 transition: all
   • will-change 仅在交互期间启用，并在交互结束后移除
   • 图片具有 width/height 或 aspect-ratio（CLS）
   • 滚动／调整大小处理程序中不存在布局抖动
3. 响应式 — 阅读 references/responsive.md：
   • 采用移动端优先的断点，不使用固定宽度组件
   • 固定元素遵循 env(safe-area-inset-*)
   • 触控区域不重叠
   • 320px 下没有横向滚动

输出格式 — 使用 SKILL.md 中的 Review Format 表格：

Before	After	Why

按优先级对问题分组：严重（阻碍使用／无障碍）→ 高影响（一眼可见）→ 快速改进（润色）。

除非用户要求，否则不要改写代码。先报告问题；获得批准后再编辑。

最后附上 Craft Report（references/review.md → Craft Report），概括上方的问题表格 — Checked 说明检查范围（无障碍／性能／响应式，以及检查的视口），Passed 列出已检查且表现良好的项目，Changed 在获批前留空，Verdict 指出最高优先级的问题。即使审计结果良好，也要生成该报告 — 无障碍／性能／响应式检查全部通过，本身就是审计结论。

下一步： /harden — 将问题转化为真正的生产级保障（第 1 阶段）。