check-visual-changes

Renders scoped UI components on the UI Verify fleet and diffs them against the CI baseline.

21|1|Updated Jul 22, 2026
One-click install
npx skills add https://github.com/uiverify/uiverify --skill check-visual-changes-uiverify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: check-visual-changes
Source: https://github.com/uiverify/uiverify/tree/main/packages/skills/skills/check-visual-changes
Command: npx skills add https://github.com/uiverify/uiverify --skill check-visual-changes-uiverify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When editing UI code mid-task, you need to know immediately whether your change altered anything visually, without opening a PR, waiting for CI, or touching the shared baseline. This Skill runs a scoped preview build that renders only the components you touched and diffs them against the real CI baseline. ## Core Features & Use Cases - Scoped preview builds: Upload a Storybook build, Playwright/Vitest capture archive, or raw screenshots and render only the stories or tests you name via --target. - CI-isolated verdicts: Preview builds post no GitHub check and never advance the CI baseline; accepting a change writes only a branch-scoped preview baseline. - Triage handoff: A changed verdict exits 0 and hands off to the triage-visual-changes skill for pixel-level review over the UI Verify MCP. - Use Case: After editing a Button component, run uiverify check --static-dir storybook-static --target 'components-button--*' to confirm whether the change is visually intended before pushing. ## Quick Start Ask the agent to check your visual changes by running uiverify check against the Storybook build or capture archive for just the components you edited.

Frequently Asked Questions about check-visual-changes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check visual changes without opening a pull request?▼

Run uiverify check with your built capture input, such as uiverify check --static-dir storybook-static --target 'components-button--*'. It renders on the same fleet as CI and diffs against the real baseline, but posts no GitHub check and never moves the CI baseline.

How do I scope a visual check to only the components I edited?▼

Pass --target per story id or anchored glob, for example --target 'components-button--*', naming the component you changed plus the one or two pages where it appears. For Playwright or Vitest, run only the touched test files so the archive itself is the render set.

Does uiverify check work with Playwright and Vitest tests?▼

Yes, uiverify check accepts Playwright and Vitest browser-mode capture archives via --static-dir, plus raw screenshot directories via --screenshots. You prepare the capture by running the tests you care about, then point check at the resulting archive.

Why does uiverify check exit 0 when stories changed?▼

A changed verdict is the expected review outcome, not a failure, so it exits 0. Only a real failed or blocked verdict or an operational error exits non-zero. Use the triage-visual-changes skill to review the actual pixels and accept intended baselines.

Can uiverify check modify my CI baseline?▼

No, preview builds never advance the CI baseline. Accepting a change writes a branch-scoped preview baseline so your accepted change stops re-flagging on the next check, while the CI baseline stays untouched.