‹ 首页

dev-visual-verdict

@evolution-foundation · 收录于 5 天前 · 上游提交 2 个月前

Visual regression testing — capture before/after screenshots of UI changes and compare. Use when a UI change might have unintended visual impact across components.

场景ui改版上线前检查

适合你，如果每次 UI 改动后都要手动截图对比

/ 下载安装
https://github.com/evolution-foundation/evo-nexus/tree/main/.claude/skills/dev-visual-verdict ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add evolution-foundation/evo-nexus/dev-visual-verdict
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- evolution-foundation/evo-nexus/dev-visual-verdict
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify evolution-foundation/evo-nexus/dev-visual-verdict
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
509GitHub stars
~382上下文体积 · 单文件
索引托管

怎么用

商店整理自技能原文 · 版本 7f5dd76 · 表述以原文为准
它做什么

装上后，Claude 可以在 UI 改动前后分别截图，并对比两张图片的差异，最终给出「完全一致」「预期变化」或「意外回归」的判断。

什么时候触发

当你要修改 CSS、重构组件或更换主题，且担心改动会意外影响其他 UI 部分时触发。

装好后可以这样说
Claude 会先拍一张「之前」的照片作为基准。
Claude 会执行视觉回归测试并输出对比表。
技能原文 SKILL.md作者撰写 · Apache-2.0 · 7f5dd76

Dev Visual Verdict

Derived from oh-my-claudecode (MIT, Yeachan Heo). Adapted for the EvoNexus Engineering Layer.

Visual regression testing. Capture before/after screenshots of UI components, compare them, and flag unintended visual impact.

Use When
  • CSS / styling change that might cascade to other components
  • Component refactor where the visual output should remain identical
  • Theme change that needs to be verified across the app
Do Not Use When
  • Backend-only changes
  • Intentional redesigns (use @canvas-designer instead)
  • Single-component changes with obvious visual outcome
Workflow
  1. Identify scope — which components could be affected
  2. Capture baseline — screenshot current state of each affected component
  3. Apply change — let @bolt-executor make the modification
  4. Capture after — screenshot post-change state
  5. Compare — flag any visual differences (pixel-level or layout-level)
  6. Verdict — IDENTICAL / EXPECTED CHANGES / UNEXPECTED REGRESSION
Output

Saved to workspace/development/verifications/[C]visual-{component}-{date}.md:

## Visual Verdict — {component}

### Scope
- Components checked: [list]

### Comparison
| Component | Before | After | Diff | Verdict |
|---|---|---|---|---|
| Header | ![](before-1.png) | ![](after-1.png) | 0% | IDENTICAL |
| Footer | ![](before-2.png) | ![](after-2.png) | 12% | UNEXPECTED |

### Verdict
{IDENTICAL | EXPECTED CHANGES | UNEXPECTED REGRESSION}

### Unexpected Regressions
- Footer color shifted from #1A1A1A to #2A2A2A — investigate cascade
Pairs With
  • @canvas-designer (when regression is intentional)
  • @hawk-debugger (when regression is unintended)
  • @oath-verifier (final visual verification)
按 Apache-2.0 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…