chromatic-troubleshoot-diff
Installation
SKILL.md
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.