chromatic-diff
Chromatic Diff Investigation
Chromatic tells you that a snapshot changed. It does not tell you why. This skill closes that gap: it resolves a Chromatic URL into the two builds being compared, puts both published Storybooks on localhost, and renders the same story from each so the difference can be read as structure, computed style, and token values rather than pixels.
Working from the rendered page rather than the snapshot image matters, because the useful answers are named things — "the dark-theme surface token changed", "this element gained a wrapper", "both builds render identically, so the snapshot is flaky". A pixel diff cannot say any of those.
How far you are allowed to go
Read this before the workflow. The steps below assume three things are present, and which of them this session actually has decides how much of the workflow exists for you:
| What is missing | How far this skill goes |
|---|---|
CHROMATIC_TOKEN |
Nowhere. Nothing else authenticates this API. Say it is missing, point at references/token.md, stop. |
| Bun | Nowhere. Say Bun is not installed, stop. |
| a chrome-devtools driver, meaning the MCP tools or the CLI | Steps 1 and 2. Report those, name the gap, stop. |
| nothing | Steps 1 through 5. |
Finishing the investigation is not the goal; a trustworthy answer is.