Agent Skills › NicholasFlemmer/styx-app › visual-diff

visual-diff

GitHub

运行 Playwright 视觉回归测试，对比 Electron 应用截图与原型基线，分析像素差异并定位 CSS/组件问题。

.claude/skills/visual-diff/SKILL.md NicholasFlemmer/styx-app

Trigger Scenarios

需要验证 UI 视觉一致性排查样式渲染差异

Install

npx skills add NicholasFlemmer/styx-app --skill visual-diff -g -y

More Options

Non-standard path

npx skills add https://github.com/NicholasFlemmer/styx-app/tree/main/.claude/skills/visual-diff -g -y

Use without installing

npx skills use NicholasFlemmer/styx-app@visual-diff

指定 Agent (Claude Code)

npx skills add NicholasFlemmer/styx-app --skill visual-diff -a claude-code -g -y

安装 repo 全部 skill

npx skills add NicholasFlemmer/styx-app --all -g -y

预览 repo 内 skill

npx skills add NicholasFlemmer/styx-app --list

SKILL.md

Frontmatter

{
    "name": "visual-diff",
    "description": "Run the Playwright screenshot harness comparing the Electron app to prototype baselines for a screen (dark\/light × mac\/win) and interpret the diff image.",
    "allowed-tools": "Bash(pnpm:*), Read, Glob",
    "argument-hint": "<screen|state> [--update-baseline]"
}

Visual diff: $ARGUMENTS

From apps/desktop run env -u ELECTRON_RUN_AS_NODE npx playwright test -c e2e/playwright.config.ts --project visual --grep "$0" (the pnpm visual wrapper does not forward --grep); it launches Electron with STYX_FIXTURE=demo STYX_SCREEN=<screen> at 1280×800 and compares against apps/desktop/e2e/visual/__baseline__/<state>-<theme>-<chrome>.png (pixelmatch, threshold 0.1, ≤0.2% differing pixels; native chrome regions masked).
Read apps/desktop/e2e/visual/output/<state>-*-diff.png; describe where red pixels cluster and map to component/CSS.
Common causes: font not loaded (fallback metrics), collapsed 1px hairline, missing letter-spacing, missing tabular-nums, scrollbar width, wrong --w-*, sub-pixel rounding.
Baselines are baked from design/handoff/Styx.dc.html by pnpm visual:baseline; regenerate only when the handoff changes, with a commit message explaining why.