Frontend Quality Gate

---
name: frontend-quality-gate
description: Web 前端交付门禁：可访问性、响应式、性能、状态完整性与安全
---

# 前端质量门禁

## 何时使用

在合并页面、组件、样式系统或前端性能变更前使用。

## 检查清单

### 可访问性

- 语义化 HTML 优先，ARIA 只在原生语义不足时使用；
- 键盘路径完整：焦点顺序、焦点可见、Esc/Enter/Tab 行为明确；
- 对比度满足 WCAG AA；图片有 alt，表单控件有 label 与错误关联；
- 仅鼠标可用的交互视为未完成。

### 响应式与状态

- 移动端与桌面端布局都验证过，无横向溢出；
- 加载、空态、错误、重试与禁用态完整；
- 交互行为与布局分层实现，不用布局手段承担交互逻辑。

### 性能

- 有 LCP/INP/CLS 或包体基线，并记录优化前后对比；
- 图片懒加载/现代格式、代码分割、列表虚拟化按需使用；
- 不引入重量级依赖换取微小收益。

### 安全与工程化

- 模板输出默认转义；富文本显式清洗；
- 类型完整，构建与测试通过；
- 样式方案与项目统一，无全局污染。

## 输出格式

- 结论与阻塞项；
- 可访问性/响应式/性能检查结果；
- 验证命令与未覆盖浏览器；
- 建议项与后续任务。

## 反模式

- 只测桌面宽度就宣称响应式完成；
- 用 `div` + click 模拟按钮而不处理键盘；
- 报告未复测的性能数字。