布局审计
layout-audit.mjs（与该文件同目录）以多个宽度驱动页面并测量 DOM。它仅报告人们称之为布局缺陷的问题；可访问性是另一个独立的问题，本工具不涉及。
node ~/.claude/skills/layout-audit/layout-audit.mjs --base=http://localhost:3000 --routes=/,/pricing
标志：--routes（逗号分隔，默认为 /）、--widths（默认为 1440x900,390x844）、--auth=user:pass 用于基本认证、--shots=<dir> 用于为每个路由和宽度保存截图、--json 用于比较运行结果。Playwright 取自全局安装的 @playwright/cli，因此项目不增加依赖。
检查项
| 检查项 | 含义 |
|---|---|
viewport-overflow | 元素超出视口边缘——页面出现横向滚动 |
clipped-text | 框裁剪了自身文本，既无省略号也无 title 属性，导致文本不可见 |
collapsed-text | 元素包含文本但高度为零——显示为空白间隙 |
overlapping-text | 两个文本框绘制在相同的像素位置 |
tiny-text | 字号小于手机可读的尺寸 |
处理结果
- 在构建版本上运行，而非编辑中的开发服务器。 热重载会遗留未完全应用的样式。
- 在修复之前按元素对发现结果进行分组。 一个跨十个路由共享的通用头部只是一个缺陷，而非十个；报告中的计数并非工作量。
- 带省略号和 title 的截断是一种模式，而非缺陷——该工具已将其排除。如果某发现指出框裁剪了文本，则文本确实不可见。
- 同一类元素上的重复发现是一个设计决策。 整体表面上的字体大小或颜色，属于设计方的职责；报告数据，让其决定，而非顺手修改配色。
- 截图仍能捕获规则未明确说明的问题。 使用
--shots参数并查看规则判定为干净的页面，尤其是手机宽度下的页面。 - 一次干净的运行并不能说明手机端的情况。 Playwright 使用 iPhone 配置的 WebKit 并非 iPhone 上的 Safari。当报告的手机缺陷无法重现时，应说明情况，而非报告“一切正常”，然后索要设备或直接移除可疑机制。
- 在信任零值之前，先证明规则会触发。 在测试页上植入缺陷，运行检查，观察规则报告该缺陷。尤其是页面级裁剪会使朴素的宽度比较在每个页面上都通过。