performing-visual-regression-testing
This skill enables Claude to execute visual regression tests using tools like Percy, Chromatic, and BackstopJS. It captures screenshots, compares them against baselines, and analyzes visual differences to identify unintended UI changes. Use this skill when the user requests visual testing, UI change verification, or regression testing for a web application or component. Trigger phrases include "visual test," "UI regression," "check visual changes," or "/visual-test".
93
53%
Does it follow best practices?
Impact
97%
1.02xAverage score across 12 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./backups/skills-migration-20251108-070147/plugins/testing/visual-regression-tester/skills/visual-regression-tester/SKILL.mdQuality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that clearly articulates specific capabilities (screenshot capture, baseline comparison, visual diff analysis), names concrete tools, and provides explicit trigger guidance with natural user phrases. It covers both 'what' and 'when' comprehensively and occupies a distinct niche that minimizes conflict risk with other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'execute visual regression tests', 'captures screenshots', 'compares them against baselines', 'analyzes visual differences to identify unintended UI changes'. Also names specific tools (Percy, Chromatic, BackstopJS). | 3 / 3 |
Completeness | Clearly answers both 'what' (execute visual regression tests, capture screenshots, compare baselines, analyze differences) and 'when' (explicit 'Use this skill when...' clause with trigger phrases listed). | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms: 'visual testing', 'UI change verification', 'regression testing', 'visual test', 'UI regression', 'check visual changes', '/visual-test'. These cover natural variations a user would say. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly occupies a distinct niche around visual regression testing with specific tool names and UI-focused triggers. Unlikely to conflict with general testing skills or other document/code skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
7%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill reads like a marketing description or README overview rather than an actionable skill for Claude. It lacks any concrete code, commands, or tool-specific instructions despite naming three specific tools (Percy, Chromatic, BackstopJS). The content is entirely abstract and descriptive, providing no executable guidance that Claude could actually follow to perform visual regression testing.
Suggestions
Replace abstract descriptions with concrete, executable commands for at least one tool (e.g., `npx backstop test`, `npx percy snapshot`, or Chromatic CLI commands) with actual configuration examples.
Add a concrete workflow with validation checkpoints, such as: run test → check exit code → if diffs found, list changed components → prompt user for approval/rejection → update baselines if approved.
Remove the 'How It Works' and 'When to Use' sections entirely—Claude already understands these concepts—and replace them with tool-specific configuration snippets and CLI invocations.
Add example configuration files (e.g., backstop.json, .percy.yml) and show how to interpret diff output, including specific commands to approve or reject changes.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is verbose and explains concepts Claude already knows (what visual regression testing is, what screenshots are, how comparisons work). The 'How It Works' section restates obvious steps, the 'When to Use' section repeats the description, and the examples describe what the skill 'will do' in abstract terms rather than providing actionable instructions. Nearly every section could be cut or replaced with concrete commands. | 1 / 3 |
Actionability | There is no executable code, no concrete commands, no configuration snippets, no tool-specific CLI invocations, and no copy-paste ready examples. The entire skill describes what should happen in abstract terms ('capture a screenshot,' 'compare against baseline') without showing how to actually do it with Percy, Chromatic, or BackstopJS. | 1 / 3 |
Workflow Clarity | While numbered steps exist, they are abstract descriptions rather than actionable workflows. There are no validation checkpoints, no error recovery steps, no feedback loops for when visual diffs are detected, and no concrete commands for any step in the process. The multi-step nature of visual regression testing (tool setup, capture, comparison, approval/rejection) is not properly sequenced. | 1 / 3 |
Progressive Disclosure | The content is organized into logical sections with headers, which provides some structure. However, there are no references to external files for tool-specific configurations, API references, or detailed setup guides. The content is a monolithic overview that neither provides depth nor points to where depth can be found. | 2 / 3 |
Total | 5 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Commit
13d35b8
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.