Chromatic Visual Tests

Catch every pixel regression with Chromatic. Configures Storybook visual snapshots, cross-browser captures, interaction tests, and TurboSnap to only re-test what changed.

This skill wires Chromatic into a Storybook + CI pipeline. It covers project token setup, baseline approvals, TurboSnap with Webpack/Vite, interaction tests via @storybook/test, viewports + theme variants, and pull-request UI review gating.

When to use

Use when adding visual regression coverage to a design system or product UI, when shipping a Storybook to stakeholders, or when component-level tests miss CSS regressions.

Examples

Storybook + Chromatic CI

Run Chromatic on every PR with TurboSnap

Set up Chromatic in GitHub Actions for a Storybook project with TurboSnap, dark-mode and mobile viewports, and required PR check

Interaction test with snapshot

Test hover/focus states with play functions

Add a Storybook interaction test that opens a dropdown and captures the open state as a Chromatic snapshot