用途:为一套设计系统建立自动加人工的质量门禁,防止质量回退。按资料所述的 QA 金字塔推进:token/lint 门禁 → 自动化无障碍 → 视觉回归 → 人工无障碍。
使用前先判断套件是否存在: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 若为 KIT_MISSING,说明只安装了技能文件夹(与 npx skills add 的行为一致),应明确告知用户并指向 npx ux-ui-agent-skills init 或插件安装,然后停止;不要去猜测未能打开文件的内容。
主要能力与步骤: 1)先接快速门禁(每次提交/PR):python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py(对 token 组合批量做 WCAG 检查)、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py <src>(组件代码中不允许原始 hex/px/时序)。仓库的 .github/workflows/ci.yml 会运行这些。 2)加入自动化无障碍(axe-core / Pa11y),覆盖每个组件的各状态(error/loading/disabled/expanded/selected),严重/致命问题为零才可合并。再用真实渲染对比度门禁 node ${CLAUDE_SKILL_DIR}/../../../scripts/measure_render.mjs <file.html>(以及 --dark):它在无头 Chromium 中打开页面、关闭过渡,测量每个文本元素的真实计算样式与 alpha 合成后对比度,能发现静态 token 检查漏掉的问题。 3)加入视觉回归快照,覆盖 变体 × 尺寸 × 状态 × 明暗主题 + 关键断点 + RTL;冻结动画并使用确定性数据。 4)每次发布签核人工无障碍清单(键盘、屏幕阅读器、400% 回流、200% 文本间距、减少动效、强制颜色),相关文件在 ${CLAUDE_SKILL_DIR}/../../../accessibility/*。
完成标准:未审查的 PR 不能引入未解决的 token 别名、对比度失败、原始 hex/px 或 axe 违规,每项都有门禁拦截;快照覆盖暗色模式、RTL 与语义变化状态,而非仅正常路径;人工无障碍清单在发布时完成签核。
限制:资料未提供支持的平台、版本要求、收费或价格等信息;若未安装完整套件,部分脚本与清单文件无法使用。