Agent Skills › evolution-foundation/evo-nexus › dev-visual-verdict

dev-visual-verdict

GitHub

用于前端UI视觉回归测试，捕获并对比组件修改前后的截图，识别非预期的视觉差异或级联影响。

.claude/skills/dev-visual-verdict/SKILL.md evolution-foundation/evo-nexus

Trigger Scenarios

CSS或样式变更可能影响其他组件组件重构需验证视觉一致性主题变更需跨应用验证

Install

npx skills add evolution-foundation/evo-nexus --skill dev-visual-verdict -g -y

More Options

Non-standard path

npx skills add https://github.com/evolution-foundation/evo-nexus/tree/main/.claude/skills/dev-visual-verdict -g -y

Use without installing

npx skills use evolution-foundation/evo-nexus@dev-visual-verdict

指定 Agent (Claude Code)

npx skills add evolution-foundation/evo-nexus --skill dev-visual-verdict -a claude-code -g -y

安装 repo 全部 skill

npx skills add evolution-foundation/evo-nexus --all -g -y

预览 repo 内 skill

npx skills add evolution-foundation/evo-nexus --list

SKILL.md

Frontmatter

{
    "name": "dev-visual-verdict",
    "description": "Visual regression testing — capture before\/after screenshots of UI changes and compare. Use when a UI change might have unintended visual impact across components."
}

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

Identify scope — which components could be affected
Capture baseline — screenshot current state of each affected component
Apply change — let @bolt-executor make the modification
Capture after — screenshot post-change state
Compare — flag any visual differences (pixel-level or layout-level)
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