tomevault-io Stabilize data and state (fixtures/seed) Disable animations and auto-updates when needed Fix fonts, theme, and locale Fix viewport size and scale
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
Testing Visual Regression
Visual regression (baseline diffs, UI stabilization) Use when this capability is needed.
Testing Visual Regression by tomevault-io · 3edc2f4
npx skillmds@latest add tomevault-io/testing-visual-regression File contents
---name: testing-visual-regressiondescription: Visual regression (baseline diffs, UI stabilization) Use when this capability is needed.---<input_requirements> <required>List of pages/components for visual coverage</required> <required>Baseline version and update rules</required> <required>Browsers and viewports</required> <optional>Dynamic areas to mask</optional> <optional>Diff sensitivity threshold</optional> <optional>Theme/locale requirements</optional></input_requirements><preparation> <steps> <step>Stabilize data and state (fixtures/seed)</step> <step>Disable animations and auto-updates when needed</step> <step>Fix fonts, theme, and locale</step> <step>Fix viewport size and scale</step> </steps></preparation><execution_rules> <rule importance="critical">Screenshots are reproducible and deterministic</rule> <rule importance="high">Comparison is done against the correct baseline</rule> <rule importance="high">Dynamic areas are masked or stabilized</rule> <rule importance="high">Changes are confirmed by a human (review)</rule> <rule importance="medium">The tool and comparison version are recorded</rule></execution_rules><coverage> <focus> <item>Critical screens and user flows</item> <item>High-variance UI components</item> <item>Tables, forms, charts, modals</item> <item>Different viewports and themes</item> </focus></coverage><quality_rules> <rule importance="critical">Expected output and baseline match by version</rule> <rule importance="high">Diff threshold is documented</rule> <rule importance="high">Results include artifact links</rule> <rule importance="medium">Reasons for baseline updates are recorded</rule></quality_rules><do_not> <item importance="critical">Do not update baseline without reviewing changes</item> <item importance="high">Do not compare screenshots with unstable data</item> <item importance="high">Do not mix different locales/themes in one baseline</item></do_not><example_checks> <check>Compare a product card across 3 viewports with fixed data</check> <check>Verify visual changes in a modal after an update</check></example_checks>---> Converted and distributed by [TomeVault](https://tomevault.io/claim/ozerohax) — claim your Tome and manage your conversions.<!-- tomevault:4.0:skill_md:2026-04-11 -->
tomevault-io/skills-registry/tree/main/ozerohax--assistagents--visual-regression commit 3edc2f4e96
Frequently asked questions
Run npx skillmds@latest add tomevault-io/testing-visual-regression in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Visual regression (baseline diffs, UI stabilization) Use when this capability is needed. It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.