Performing Visual Regression Testing
This skill empowers Claude to automatically detect unintended UI changes by performing visual regression tests. It integrates with popular visual testing tools to streamline the process of capturing screenshots, comparing them against baselines, and identifying visual differences.
Install
/plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills
/plugin install visual-regression-tester@claude-code-plugins-plusRun these inside Claude Code. The skill comes with its plugin.
What this skill does
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".
Trigger phrases
Claude loads this skill automatically when you say things like:
How it works
- Compare Against Baselines: Compares the captured screenshots against established baseline images.
- Analyze Visual Diffs: Identifies and analyzes visual differences between the current screenshots and the baselines.
When to use it
- Detect unintended UI changes introduced by recent code modifications.
- Verify the visual consistency of a web application across different browsers or environments.
- Automate visual regression testing as part of a CI/CD pipeline.
Best practices
- Baselines: Maintain accurate and up-to-date baseline images to avoid false positives.
- Viewport Sizes: Define appropriate viewport sizes to cover different screen resolutions and devices.
Details
- Skill name
performing-visual-regression-testing- Plugin
- visual-regression-tester
FAQ
What does the Performing Visual Regression Testing skill do?
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".
How do I install the Performing Visual Regression Testing skill?
Claude Code plugin: /plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills then /plugin install visual-regression-tester@claude-code-plugins-plus. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Related skills
000 Jeremy Content Consistency Validator
jeremylongshore/claude-code-plugins-plus-skills
Validates messaging consistency across website, GitHub repositories, and local documentation. Generates comprehensive read-only discrepancy reports showing where messaging conflicts or inconsistencies exist. Activates when user mentions "consistency check", "validate documentation", "check for mixed messaging", "audit content consistency", or before updating internal paperwork.
001 Jeremy Taskwarrior Integration
jeremylongshore/claude-code-plugins-plus-skills
Enforces complete Taskwarrior integration protocol for ALL coding tasks. Activates automatically when user mentions "taskwarrior", "task warrior", "tw", or discusses task management. Decomposes all coding work into properly tracked Taskwarrior tasks with full lifecycle: task add → task start → implementation → task done. Integrates with Timewarrior for automatic time tracking.
Adapting Transfer Learning Models
jeremylongshore/claude-code-plugins-plus-skills
This skill automates the adaptation of pre-trained machine learning models using transfer learning techniques. It is triggered when the user requests assistance with fine-tuning a model, adapting a pre-trained model to a new dataset, or performing transfer learning. It analyzes the user's requirements, generates code for adapting the model, includes data validation and error handling, provides performance metrics, and saves artifacts with documentation. Use this skill when you need to leverage existing models for new tasks or datasets, optimizing for performance and efficiency.
Playwright Browser Automation
Model-invoked browser automation for web testing using Playwright. Automate browser interactions and validate web applications.
Performance Testing
jeremylongshore/claude-code-plugins-plus-skills
This skill enables Claude to design, execute, and analyze performance tests using the performance-test-suite plugin. It is activated when the user requests load testing, stress testing, spike testing, or endurance testing, and when discussing performance metrics such as response time, throughput, and error rates. It identifies performance bottlenecks related to CPU, memory, database, or network issues. The plugin provides comprehensive reporting, including percentiles, graphs, and recommendations.
Raffle Winner Picker
Randomly selects winners using cryptographic randomness. Fair and verifiable random selection for contests and giveaways.
Browse the most popular Claude skills, all testing & qa skills, or write your own with the skills generator.