testing-visual
OfficialCatch UI regressions with automated visual tests.
Software Engineering#UI testing#design consistency#regression testing#visual testing#web components#screenshot comparison#front-end testing
Authorblueprintui
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automatically detects unintended visual changes in UI components, preventing regressions that could impact user experience and brand consistency. It saves design and development teams countless hours of manual visual inspection.
Core Features & Use Cases
- Automated Screenshot Comparison: Captures and compares component screenshots across different states and themes, highlighting any pixel-level differences.
- Proactive Regression Detection: Identifies visual inconsistencies early in the development cycle, preventing them from reaching production.
- Cross-Theme Consistency: Ensures components render correctly and consistently in various themes (e.g., light/dark mode).
- Use Case: After making CSS changes to a button component, use this skill to run visual tests. It will automatically compare new screenshots against baselines, ensuring the button's appearance remains consistent across light and dark themes and flagging any unexpected UI shifts.
Quick Start
Use the testing-visual skill to run visual tests for the 'bp-card' component, ensuring its appearance is consistent in both light and dark themes.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: testing-visual Download link: https://github.com/blueprintui/blueprintui/archive/main.zip#testing-visual 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.