chromatic-workflow-debug
Workflow Debug
Public-safe skill for debugging how Chromatic maps CI, git history, and prior builds into comparisons and baselines.
This package is the single source of truth for:
- workflow diagnosis codes
- the evidence ladder
- the command catalog
- the diagnosis card output contract
- documentation topic mapping
- copy-paste intake prompts
- public-safe examples and evaluations
Quick start
- Read
reference/workflow-playbook.mdand identify the current workflow phase. - Read
reference/diagnosis-taxonomy.mdand choose the strongest diagnosis code the evidence supports. - Read
reference/evidence-ladder.mdand decide whether you can answer now or need one more artifact. - Use
reference/command-catalog.mdonly when the current evidence is insufficient. - Render the result with
reference/output-contract.md. - If the user wants follow-up reading, use the topic map in
reference/docs-map.md.
Required workflow
1) Start with current evidence
Prefer evidence already provided:
- the exact Chromatic command or GitHub Action step
- the relevant warning or error text
- CI event type and branch information
- git checkout settings such as shallow history or detached HEAD
- build URL and the expected comparison target
- any manual overrides like
branchName,repositorySlug,patchBuild, orignoreLastBuildOnBranch
Do not ask for a broad dump if the current evidence already points to one branch of the decision tree.
2) Classify before proposing changes
Choose one primary workflow diagnosis code from reference/diagnosis-taxonomy.md.
If multiple signals exist, prioritize:
- incorrect or missing git history over downstream symptoms
- wrong CI branch or PR event shape over later baseline confusion
- merge-base or patch-build failures over generic comparison complaints
- replacement-build and rebase behavior over speculative Storybook causes
3) Ask for the smallest next artifact
Ask for exactly one next artifact or one targeted command result.
Typical next artifacts:
- the exact
actions/checkoutstep or equivalent CI checkout snippet - the exact Chromatic invocation line or action inputs
git branch --show-currentgit rev-parse HEADgit log --oneline --decorate -n 10git merge-base <head> <base>- the specific Chromatic warning mentioning baselines, merge base, or no ancestor build
Do not jump straight to Storybook flags or TurboSnap suppression flags unless the workflow evidence already cleared the git branch.
4) Stay truthful about the current run
If the current run cannot compute the intended comparison safely, say so plainly.
Examples:
- a shallow checkout means the current run cannot reason about baselines correctly
- a
pull_requestmerge commit can point Chromatic at the wrong SHA or branch unless the action passes the correct values - a rebased branch may need
ignoreLastBuildOnBranchor a fresh baseline path - a missing merge base means a patch build path is needed, not a baseline guess
5) Output a diagnosis card every time
Always return the diagnosis card from reference/output-contract.md.
If confidence is still low:
- name the most likely diagnosis
- say why confidence is limited
- request one exact next artifact or command
- avoid speculative repo surgery
Boundaries
- Keep the skill public-safe and customer-safe.
- Ask for one artifact at a time.
- Do not rely on live external documentation inside the installed skill.
- Do not recommend unrelated monorepo flags as a first response to git or baseline problems.
- Do not assume the customer is using GitHub Actions unless the evidence says so, but prefer GitHub Actions examples when you need a concrete pattern.
References and examples
reference/workflow-playbook.mdreference/diagnosis-taxonomy.mdreference/evidence-ladder.mdreference/command-catalog.mdreference/output-contract.mdreference/docs-map.mdtemplate.mdexamples/pr-merge-commit.mdexamples/rebase-replacement-build.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