前端质量守门

这个技能解决什么问题

UI 不会永远喂给你设计稿里那行文案。用户名可能是一串 32 位 UUID，德语翻译会把一个单词拉到四倍宽，表格单元格里塞着完整 URL，最小目标屏只有 320px。结果很常见：flex 子项撑破卡片、长串 URL 把布局顶歪、tooltip 里的完整文本永远拿不到。多数团队靠肉眼 review 和「等设计师确认」兜底，问题往往到生产环境才暴露。

前端质量守门把这类检查从「review 时想起来看一眼」变成固定流程：先摸清项目已有规范，再把文本风险面逐一列出，给每个容器定行为，做最小改动，最后用极端内容和视口验证。

核心能力与工作流

1. 摸清约定：识别框架、样式系统、组件库、断点、字体尺度与间距 token，复用既有组件和工具类，不另起炉灶。

2. 列文本风险面：用户名、路径、slug、UUID、URL、邮箱、手机号、标题、表格单元格、Tab、面包屑、badge、tooltip、toast、表单错误、空态。

3. 定容器行为：按内容性质选换行、限行、截断、滚动或自适应，并保证完整值仍可访问。

4. 最小稳健修复：flex/grid 文本子项补 min-width: 0 / min-height: 0；按需补 max-width、overflow-wrap、text-overflow、line-clamp 或滚动容器。只有父容器才是溢出源时才动父级。

5. 极端验证：320/375/768/1024/1280px 与宽屏；超长无空格串、长自然语言、中英混排、URL、空值、密集列表；用截图或 DOM 检查确认视觉变化。

最终产出 FrontendReviewReport，记录处理了哪些具体溢出与布局风险、做过哪些验证、哪些视口或状态仍未检查，可直接交给代码评审类 skill 或前端文档拆分流程。

适用边界

适合 HTML、CSS、React、Vue、Svelte、Next.js、Tailwind、shadcn/ui、Ant Design 的表单、表格、仪表盘、弹窗、抽屉、导航与响应式布局。

不适用：后端、CLI、数据库等无可见 UI 的任务；完整品牌设计、插画、Logo；已有专门技能负责的像素级还原；正式 WCAG 合规审计——本技能覆盖可访问性的视觉细节，但不产出合规结论。

默认策略是小而局部的修复，不为一个溢出点重写整体结构。