Skills
.Work. You
Rest

chromatic

Community

Automate visual regression testing.

Design & Creative#ci/cd#frontend#regression testing#visual testing#storybook#ui components
Authormgd34msu
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the process of visual regression testing for UI components, ensuring that visual changes are caught and reviewed before they reach production.

Core Features & Use Cases

  • Automated Snapshotting: Captures screenshots of Storybook components in various viewports and themes.
  • Visual Diffing: Compares new screenshots against baselines to detect visual regressions.
  • CI Integration: Seamlessly integrates with CI/CD pipelines for automated testing on every commit or pull request.
  • Use Case: When developing a new UI component, use this Skill to automatically generate visual tests that verify its appearance across different browsers and screen sizes, preventing unexpected visual bugs.

Quick Start

Run the command npx chromatic --project-token=<token> to start visual testing.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: chromatic
Download link: https://github.com/mgd34msu/goodvibes-gemini/archive/main.zip#chromatic

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.