chromatic-troubleshoot-config
Troubleshoot Config
Diagnose Storybook configuration problems that block Chromatic or local Storybook and identify the narrowest fix.
Required workflow
- Start with the current evidence: exact error text,
.storybook/main.*,.storybook/preview.*, Storybook scripts and dependencies inpackage.json, framework or builder, one representative story path, and whether local Storybook already fails. - Choose one primary diagnosis from
reference/diagnosis-taxonomy.md. Usereference/workflow-playbook.mdwhen the branch is unclear. Prioritize local Storybook failures before Chromatic follow-on symptoms, framework or builder mismatches before addon speculation, and story discovery issues before version cleanup. - Separate local Storybook failure from Chromatic follow-through. If Storybook fails locally, fix that surface first. If Storybook runs locally but Chromatic cannot verify it, inspect build scripts, output expectations, and config shape next.
- Inspect the repo before asking for more evidence. Use
reference/command-catalog.mdto check.storybook/main.*,.storybook/preview.*, the Storybook section ofpackage.json, and one representative story path. Do not invent scripts or migration paths. - If one artifact is still missing, request exactly one next item using
reference/evidence-ladder.md. - Return the diagnosis card from
reference/output-contract.md. If confidence is low, name the most likely diagnosis, explain the gap, and ask for the single artifact that resolves it.
Boundaries
- Ask for one artifact at a time.
- Prefer the narrowest config repair over broad rewrites.
- Do not assume React, Vite, Webpack, or a Storybook major version without evidence.
- Do not invent script names or mix Vite and Webpack guidance unless the evidence proves a migration boundary.
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-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.
6chromatic-workflow-debug
Diagnose Chromatic workflow issues involving git history, baselines, pull request event shape, merge queues, merge-base failures, replacement builds, and patch builds. Use when builds compare against the wrong baseline, an ancestor build is not found, pull request comparisons look wrong, or CI git context does not match Chromatic's expectations.
5