Sanity Visual Regression
sanity-io/sanity
Add, review, and maintain Chromatic visual regression coverage in the Sanity monorepo via dev/storybook stories, the vitest browser-mode suite, and Playwright e2e snapshots.
Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR…
Install Check Visual Changes
$ npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen check-visual-changes --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/check-visual-changes .claude/skills/check-visual-changes && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "check-visual-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/check-visual-changes into .claude/skills/check-visual-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-visual-changes", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/check-visual-changesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen check-visual-changes --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/check-visual-changes .agents/skills/check-visual-changes && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "check-visual-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/check-visual-changes into .agents/skills/check-visual-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-visual-changes", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen check-visual-changes --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/check-visual-changes .cursor/skills/check-visual-changes && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "check-visual-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/check-visual-changes into .cursor/skills/check-visual-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-visual-changes", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/igrlk/storybook-addon-test-codegen.git --path .agents/skills/check-visual-changes--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen check-visual-changes --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/check-visual-changes .gemini/skills/check-visual-changes && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "check-visual-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/check-visual-changes into .gemini/skills/check-visual-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-visual-changes", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install igrlk/storybook-addon-test-codegen check-visual-changesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/check-visual-changes .github/skills/check-visual-changes && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "check-visual-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/check-visual-changes into .github/skills/check-visual-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-visual-changes", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen check-visual-changes --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/check-visual-changes .opencode/skills/check-visual-changes && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "check-visual-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/check-visual-changes into .opencode/skills/check-visual-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-visual-changes", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
check-visual-changes- GitHub stars
- 154
- Used in
- 1 other repo
- Token cost
- ~1.4k tokens
- SKILL.md length
- 681 words
- Files
- 1
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR…
- A coding agent has changed UI and wants a fast
- SKILL.md covers The one rule: scope it to what…, Prepare the capture, then… and Read the verdict, then hand…
- Calls npx and npm; needs UIVERIFY_API_KEY
- Authoritative would this pass answer before pushing — check my visual changes
What it does
Check Visual Changes is an agent skill from igrlk/storybook-addon-test-codegen. Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR, posting a check, or moving a baseline. Works for every capture method (Storybook, Playwright, Vitest archives, and raw screenshots). Use when a coding agent has changed UI and wants a fast, authoritative "would this pass" answer before pushing — "check my visual changes", "did I break anything visually", "preview this…
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Testing & QA, covering Unit testing and Browser testing. It works with Storybook, Playwright and Vitest. The repository describes itself as: Addon for Storybook that generates test code for your stories. The licence is MIT.
When your agent uses it
- A coding agent has changed UI and wants a fast
- Authoritative would this pass answer before pushing — check my visual changes
- Did I break anything visually
- Preview this diff
Example prompts
- “would this pass”
- “check my visual changes”
- “did I break anything visually”
- “/check-visual-changes”
Requirements
- Node.js
- A credential in UIVERIFY_API_KEY
What it can do on your machine
Read from SKILL.md and the folder at commit cdfbf4e. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npxnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
UIVERIFY_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Check Visual Changes loads about 1.4k tokens when it runs. Until then it costs about 157 tokens; SKILL.md has 681 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from igrlk/storybook-addon-test-codegen at commit cdfbf4e, republished under its MIT licence (© igrlk). 681 words, ~1,409 tokens.
Download SKILL.mdSave it as
.claude/skills/check-visual-changes/SKILL.md (or your agent's skills folder).- name
- check-visual-changes
- description
- Check the visual impact of an edit mid-task with `uiverify check` — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR, posting a check, or moving a baseline. Works for every capture method (Storybook, Playwright, Vitest archives, and raw screenshots). Use when a coding agent has changed UI and wants a fast, authoritative "would this pass" answer before pushing — "check my visual changes", "did I break anything visually", "preview this diff", "run uiverify check". Hands off to triage-visual-changes for the pixel review.
Check your visual changes mid-edit
uiverify check is the interactive preview build — the agent edit-loop counterpart to the CI
uiverify upload. You're mid-task, you've changed a component, and you want to know now whether it
changed anything visually and whether that change is intended — without opening a PR, waiting for CI, or
touching a baseline.
It renders on the same fleet and diffs against the same resolved CI baseline a real build would, so the answer is authoritative (not a local macOS screenshot that won't match Linux). But it's walled off from CI:
- No GitHub check — invisible on the PR.
- Never advances a CI baseline. Accepting a preview build writes a branch-scoped preview baseline, so your own accepted change stops re-flagging on the next check, while CI's baseline is untouched.
A changed verdict exits 0 — it's the expected result to review, not a gate. Only a real failed/blocked
or an operational error exits non-zero.
The one rule: scope it to what you touched
This is the whole point, and it's the opposite of CI. CI computes the transitive affected set from the dependency graph — editing one primitive can mark a third of the suite affected. That's correct for CI (it writes the baseline and can't under-render) but useless in an edit loop: it's slow, expensive, and drowns the signal you actually want.
So you choose what to render — the stories for the component you're editing, plus the specific places it matters, not everything the graph lights up. Under-scoping is safe here: a preview build is never a baseline, so the worst case is you didn't preview a story you didn't ask about, and the exhaustive CI build catches it later. Name the few things that matter.
Prepare the capture, then check — per method
check is a dumb HTTP client: it uploads what you built or captured and asks the fleet to render it.
It does not run your build or your tests for you — you prepare the capture input first, exactly the
same input the matching capture skill produces (storybook-visual-testing, playwright-visual-testing,
vitest-visual-testing), then point check at it.
UIVERIFY_API_KEY (a uv_proj_… project key) must be set. All four methods take --strict/--no-strict
and --working-directory like uiverify upload.
Storybook — --target is required
Storybook builds the whole suite (there's no single-story build), so you must name what to render. The build is monolithic; only the named stories actually render on the fleet.
npm run build-storybook # or: storybook build --stats-json
uiverify check --static-dir storybook-static --target 'components-button--*' --target 'pages-checkout--default'Pass --target per id; each is an exact story id (components-button--default) or an anchored glob
(components-button--*). Render the component you changed plus the one or two pages where it actually
appears — not the whole components-* tree.
Show full SKILL.md (247 more words)Show less
Playwright / Vitest archives — --target optional
Run only the tests you care about to produce the capture archive, then check it. The archive already
contains just those captures, so the uploaded artifact is the render set — no --target needed.
# Playwright: run only the specs you touched, producing the archive
npx playwright test tests/checkout.spec.ts
uiverify check --static-dir <archive-dir>
# Vitest browser-mode component tests: run only the touched files
npx vitest run src/components/Button.test.tsx
uiverify check --static-dir <archive-dir>You can still pass --target to narrow further (it matches the capture/test ids the SDK emitted, e.g.
--target 'checkout/*'), but the usual discipline is "run the tests you want, then check the archive."
Raw screenshots — --target optional
Upload exactly the PNGs you produced (native / mobile / React Native, or any surface we don't render). The upload is inherently scoped to the screens you took.
uiverify check --screenshots ./screenshotsNarrow with --target against the image path keys if you want (--target 'settings/*'), but it's optional.
Read the verdict, then hand off to triage
check prints the changed-story list and an MCP handoff. When it comes back changed, don't eyeball
the diff numbers alone — use the triage-visual-changes skill to review the actual pixels over the
UI Verify MCP (get_diff / render_diff_image), bucket real regressions vs cosmetic reflow vs noise, and
accept the baselines you mean to keep. Accepting establishes the branch-scoped preview baseline, so a
re-run of check comes back clean for the change you just approved while a fresh change still flags.
Rule of thumb for the loop: edit → check the few things you touched → triage the diff → accept what's
intended → keep editing. The exhaustive answer still comes from the real CI build on your PR; this is the
fast, scoped preview that keeps you moving.
© igrlk, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/check-visual-changes of igrlk/storybook-addon-test-codegen.
Open the folder on GitHubat commit cdfbf4e
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in igrlk/storybook-addon-test-codegen, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Check Visual Changes next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Check Visual Changes this skilligrlk/storybook-addon-test-codegen | 154 | 1 repos | ~1.4k | Automated safety check: Pass | MIT | |
| Sanity Visual Regressionsanity-io/sanity | 6.4k | — | ~3.4k | Automated safety check: Pass | MIT | |
| React Testingaffaan-m/ECC | 275k | 1 repos | ~3.3k | Automated safety check: Pass | MIT | |
| Control UI E2Eopenclaw/openclaw | 392k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Ckeditor5 TestingTriliumNext/Trilium | 38k | — | ~3.3k | Automated safety check: Pass | AGPL-3.0 | |
| Svelte Testingspences10/sveltest | 113 | — | ~579 | Automated safety check: Pass | MIT |
Similar skills
- Official
React Testing
affaan-m/ECC
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…
Control UI E2E
openclaw/openclaw
A skill your agent uses when designing, testing, fixing, or extending the OpenClaw Control UI GUI, including UI stress-test galleries with feedback inputs, Vitest + Playwright end-to-end checks…
Ckeditor5 Testing
TriliumNext/Trilium
Testing CKEditor 5 plugins in the Trilium monorepo. An agent skill from TriliumNext/Trilium.
Svelte Testing
spences10/sveltest
Fix and create Svelte 5 tests with vitest-browser-svelte and Playwright.
Playwright Testing
chongdashu/vibejam-starter-pack
Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.
More from igrlk/storybook-addon-test-codegen
Economical Visual Tests
igrlk/storybook-addon-test-codegen
Author economical visual tests — full visual coverage in the fewest billable snapshots.
Triage Visual Changes
igrlk/storybook-addon-test-codegen
Triage a UI Verify build from your coding agent via the UI Verify MCP — bucket a build's changed stories into real regressions vs cosmetic reflow vs rendering noise, summarize the real regressions…
Storybook Visual Testing
igrlk/storybook-addon-test-codegen
Make Storybook stories deterministic for UI Verify so captures stop coming back "changed" without a real change (flaky diffs).
Making UI Changes
igrlk/storybook-addon-test-codegen
Read before changing any component, page, or styles. An agent skill from igrlk/storybook-addon-test-codegen.
Related
Works with
Categories
Questions about Check Visual Changes
What does Check Visual Changes do?
Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR…. Check Visual Changes is an agent skill from igrlk/storybook-addon-test-codegen. Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR, posting a check, or moving a baseline.
When should I use Check Visual Changes?
Check Visual Changes fits situations like: A coding agent has changed UI and wants a fast; authoritative would this pass answer before pushing — check my visual changes; did I break anything visually; preview this diff.
How do I install Check Visual Changes in Claude Code?
Run `npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a claude-code`. Or copy the skill folder (.agents/skills/check-visual-changes in igrlk/storybook-addon-test-codegen) into .claude/skills/check-visual-changes in your project. Claude Code loads it when a task matches its description.
How do I install Check Visual Changes in Codex?
Run `npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a codex`. Or copy the skill folder (.agents/skills/check-visual-changes in igrlk/storybook-addon-test-codegen) into .agents/skills/check-visual-changes in your project. Codex loads it when a task matches its description.
Can I use Check Visual Changes in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add igrlk/storybook-addon-test-codegen --skill check-visual-changes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/check-visual-changes, .gemini/skills/check-visual-changes, .github/skills/check-visual-changes and .opencode/skills/check-visual-changes in your project.
What does Check Visual Changes need to run?
Going by SKILL.md and its folder, Check Visual Changes needs the command-line tools its instructions call (npx and npm) and credentials named UIVERIFY_API_KEY. Our summary lists: Node.js; A credential in UIVERIFY_API_KEY.
Does Check Visual Changes access the network?
SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Check Visual Changes safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Check Visual Changes use?
Check Visual Changes is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Check Visual Changes use?
About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Check Visual Changes?
Skills that share tags, products or a category with Check Visual Changes: Sanity Visual Regression (sanity-io/sanity, 6.4k stars), React Testing (affaan-m/ECC, 275k stars), Control UI E2E (openclaw/openclaw, 392k stars) and Ckeditor5 Testing (TriliumNext/Trilium, 38k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Check Visual Changes?
igrlk (a GitHub user) maintains it in igrlk/storybook-addon-test-codegen, which has 154 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on September 13, 2026.
Source: igrlk/storybook-addon-test-codegen on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.