visual-regression
OfficialCatch visual bugs with automated screenshots.
AuthorMolcajeteAI
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the process of catching unintended visual changes in web applications by using screenshot-based testing, ensuring UI consistency across different browsers and viewports.
Core Features & Use Cases
- Automated Screenshot Testing: Integrates with Playwright and Percy to capture and compare screenshots of web pages and components.
- Dynamic Content Handling: Provides strategies for masking dynamic elements and handling animations to ensure stable visual tests.
- Responsive Testing: Captures screenshots across various device viewports (mobile, tablet, desktop).
- Use Case: After a UI update, automatically run visual regression tests to ensure that buttons, forms, and layouts still appear as expected across all supported devices, preventing visual bugs from reaching production.
Quick Start
Use the visual-regression skill to run all visual tests in the tests/visual/ directory.
Dependency Matrix
Required Modules
@percy/cli@percy/playwright@percy/storybook
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: visual-regression Download link: https://github.com/MolcajeteAI/plugin/archive/main.zip#visual-regression Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.