mcpField
G
gate

gate

github.com/plugin87测试与质量3.0k143 次安装1 天前更新
代码仓库

关于 gate

gate 是运行项目 UI 质量检查并报告实际结果的 Claude 技能。它要求修复失败项并重新检查，对涉及的 HTML 还需验证状态、响应式布局和渲染效果。

主要功能

  1. 01运行准确性报告
  2. 02报告实际通过数与失败项
  3. 03修复问题并重新检查
  4. 04验证界面状态与响应式布局

适用场景

  1. 01按项目规则检查 UI 成果
  2. 02发现无障碍与令牌问题
  3. 03检查渲染后 HTML 的状态和布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill gate

安装后在 Claude Code 中输入/gate确认已加载。

详细介绍

步骤 0——工具包在这里吗？ 此技能会读取工具包中的文件。检查一次： 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. 运行：node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs （tokens + contrast + spec + no-hardcode + theme-refs + no-emoji + real-render WCAG + state-aware，浅色和深色——全部通过才算通过）。
  2. 报告它打印的确切 N/N 行。
  3. 如果未完全通过：
    • 逐字列出每项失败的检查。
    • 修复原因（不要抑制检查）。
    • 重新运行，直到全部通过。失败期间不要宣布成功。
  4. 对于本次会话中修改过的任何渲染 HTML，还要运行门禁无法验证的像素真实度检查：
    • node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> [--dark]
    • node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file>
    • 渲染并检查：截取测试框架的屏幕截图，将指针移到框架外，检查每种状态，并点击每个控件以确认状态已改变。

如实说明范围：这些门禁只能证明客观正确性（tokens、a11y、无偏差）。 它们无法证明审美。请结合 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs 和人工审核； 绝不要声称审美方面自动达到 100%。

评论

支持 Markdown