chromatic-troubleshoot-diff
Troubleshoot Diff
Diagnose why a Chromatic snapshot changed and identify the narrowest stabilizing fix.
Required workflow
- Start with current evidence. Prefer the build URL or build number, affected story, screenshot or diff description, local Storybook repro signal, active Chromatic params or globals, and any recent changes to fonts, assets, animations, viewports, decorators, or shared preview code. If the issue already points to a likely branch, do not ask for a broad repo dump.
- Classify the issue using
reference/diagnosis-taxonomy.md. Usereference/workflow-playbook.mdwhen the branch is unclear. Prioritize local rendering problems before Chromatic-only theories, and treat intentional UI changes as expected diffs rather than stabilization work. - Read the mapped local source notes from
reference/docs-map.mdandreference/source-pack/README.md. Ground the fix path in those notes when they clearly apply. - Inspect the repo before asking for more data when the repo is available. Use
reference/command-catalog.md; check the story,.storybook/preview.*,.storybook/preview-head.html, and relevant asset, mode, animation, and layout surfaces. If Playwright is available and helps settle the branch, reproduce there too. - If still blocked, ask for one exact artifact using
reference/evidence-ladder.md. Prefer rerun-build or trace-viewer evidence when the issue is inconsistent across runs. - Return the diagnosis card from
reference/output-contract.md. If confidence is still low, name the most likely diagnosis, say why confidence is limited, and request one exact next artifact or repo check.
Boundaries
- Ask for one artifact at a time.
- Do not recommend
diffThreshold, snapshot ignores, or broad suppression as the first response to unexplained diffs. - Do not claim Chromatic is the root cause when the same issue is already visible in local Storybook.
- Use the local source pack when it clearly applies instead of giving generic advice.
- Do not ask for the entire repository, all screenshots, or long CI logs when one story-level artifact would settle the branch.
References and examples
reference/workflow-playbook.mdreference/diagnosis-taxonomy.mdreference/docs-map.mdreference/evidence-ladder.mdreference/command-catalog.mdreference/output-contract.mdreference/source-pack/README.mdtemplate.mdevaluations/README.md
More from chromaui/chromatic-skills
turbosnap-debug
Diagnose TurboSnap behavior using logs, config, git context, support-shareable hosted metadata references, and targeted trace commands. Use when you need to classify why TurboSnap is enabled, disabled, unavailable, or tracing the wrong stories, then recommend the smallest valid next step.
8chromatic-themes
Configure Chromatic to capture visual test snapshots across multiple themes (light/dark mode, design tokens, branded variants) using the Modes API and @storybook/addon-themes. Use when the user wants to test components with different themes in Chromatic, set up light/dark mode visual testing, configure @storybook/addon-themes with Chromatic, or apply theme modes at the project, component, or story level.
6chromatic-viewports
Configure Chromatic to capture visual test snapshots at multiple viewport sizes using the Modes API. Use when the user wants to test responsive components at different screen sizes, set up viewport breakpoints for Chromatic visual testing, apply viewports to individual stories or globally, control snapshot height with cropToViewport, or migrate from the legacy chromatic.viewports API to the new Modes API.
6chromatic-setup-ci
Configure CI/CD pipelines to run Chromatic visual tests automatically. Use when the user wants to set up Chromatic in CI, add Chromatic to GitHub Actions / GitLab / Bitbucket Pipelines / CircleCI / Jenkins / Azure Pipelines, automate visual testing, or run Chromatic on every push.
6chromatic-troubleshoot-config
Diagnose Storybook configuration issues that block Chromatic or local Storybook, including missing stories, framework or builder mismatches, addon conflicts, preview errors, static asset path issues, and package version drift. Use when Storybook fails to build, Chromatic cannot verify Storybook, stories are missing, or a team needs the smallest config change to restore a working Storybook surface.
6chromatic-turbosnap-debug
Diagnose TurboSnap behavior using logs, config, git context, support-shareable hosted metadata references, and targeted trace commands. Use when you need to classify why TurboSnap is enabled, disabled, unavailable, or tracing the wrong stories, then recommend the smallest valid next step.
6