component-screenshot-testing
CommunityPixel-perfect UI testing for React components.
Software Engineering#react#playwright#storybook#ui-testing#pixel-perfect#visual-regression#component-testing
Authorjoshribakoff
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Captures React component screenshots and compares them to baselines. Tests that UI components render correctly at the pixel level.
Core Features & Use Cases
- Pixel-perfect visual tests for React components using Playwright.
- Detect color/style regressions, layout shifts, and missing UI elements.
- Use cases include UI component testing during design reviews, theme changes, and regression checks across releases.
Quick Start
Install dependencies and run the visual tests with npm run test:visual:headless to generate baseline screenshots for your components.
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: component-screenshot-testing Download link: https://github.com/joshribakoff/surfsim/archive/main.zip#component-screenshot-testing 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.