wehub-skill-sync
3.1 KiB
3.1 KiB
检查清单 — Waitlist 页面
P0 — 在输出 <artifact> 之前必须通过
- 页面有且只有一个主要 CTA（邮箱输入框 + 提交按钮）
- 首屏渐变区高度不超过视口高度的 20%
- 邮箱输入框有可见的标签或有意义的占位符——不只是"Email"
- 没有编造的社会证明数字（例如"10,000 人正在等待"）
- 不存在倒计时器——倒计时器是本 skill 的明确反模式（见 SKILL.md §Quality gates）
- 在 375px 视口宽度下无水平滚动
- 没有使用通用 emoji 图标作为装饰元素
- 排版最多使用两种字体家族（展示字体 + 正文字体）
- 名字（First name）输入框没有
required属性 - 工作邮箱输入框有
type="email"和required - 表单不使用
novalidate；JS 守卫在展示成功状态前调用checkValidity() - 成功消息使用
role="status"或aria-live="polite"，以便屏幕阅读器播报 - 所有颜色值源自 DESIGN.md；唯一允许硬编码的例外是用于
--success的#2D6A4F - 所有用户提供的文本令牌均已进行 HTML 转义；颜色令牌遵循严格语法（
#hex、rgb/hsl/oklch、color-mix()），且不包含不安全字符（;、{}、<、>、/*、@、url(）；字体名称令牌在 Google Fonts URL 中进行 URL 编码；{{LOGO_MARK}}为转义后的文本首字母或经过严格清理的内联 SVG（无脚本/事件）
P1 — 高质量提交通常应满足
- Hero 区域视觉上清晰可辨，且在首屏可见
- 邮箱提交按钮有悬停和激活状态
- 表单验证在出错时提供清晰的内联反馈（原生
reportValidity()亦可接受） - 页面在 375×667 和 390×844 尺寸下可滚动（未被裁剪）；在这些尺寸下 CTA 无需滚动即可见
- 在
prefers-reduced-motion: reduce下，滚动字幕动画已暂停或移除 - 所有可交互元素有可见的焦点样式（不仅仅是
outline: none） - 键盘：Tab 键可到达每个表单字段和提交按钮；Enter 键可提交表单
- 正文文本在背景上的颜色对比度满足 WCAG AA（≥ 4.5:1）
- 按钮标签在按钮背景上的颜色对比度满足 WCAG AA（≥ 4.5:1）
- Logo 文本/首字母在 Logo 容器背景上的颜色对比度满足 WCAG AA（≥ 4.5:1）
- 如果 Logo 是
<img>或有意义的 SVG，则存在 Logo 的alt文本或aria-label - 滚动字幕条带有
aria-hidden="true"（装饰性，非有意义内容） <html lang="">属性已设置为正确的语言代码
P2 — 加分打磨项
- Google Fonts 使用
display=swap加载，避免 FOIT - 表单输入框有匹配的
autocomplete属性（given-name、email） - 按钮悬停时有细微的微动效（仅缩放或透明度——不引起布局偏移）
- 装饰区域在任何视口宽度下均不覆盖或重叠表单
- 页面标题为
{{PRODUCT_NAME}} — Coming Soon，而非通用的占位符
翻译完成。请问还需要在这个项目里做什么工作？