chromatic-monorepo-config
Monorepo Config
Public-safe skill for recommending and auditing Chromatic configurations in Nx and Turborepo monorepos.
This package is the single source of truth for:
- topology recommendations
- the recommendation playbook
- Nx and Turborepo scenario guidance
- config snippet patterns
- safety rules for
untracedandexternals - the recommendation card output contract
- public-safe examples and evaluations
Quick start
- Read
reference/topology-rubric.mdand choose the recommended target topology. - Read
reference/recommendation-playbook.mdand identify the smallest set of repo facts you still need. - Read
reference/safety-rubric.mdbefore recommendinguntracedorexternals. - Use
reference/snippet-catalog.mdto produce exact flags, config snippets, and GitHub Action patterns. - Render the result with
reference/output-contract.md. - If the user wants follow-up reading, use
reference/docs-map.md.
Operating mode
The default mode is hybrid:
- if the repo or config is available, inspect it and turn the response into a concrete audit
- if the repo is not available, still make a clear recommendation based on the topology and workflow facts the user provides
Do not withhold a recommendation just because some details are missing.
Required workflow
1) Identify the current topology
Start with the facts that decide the recommendation fastest:
- one Storybook or multiple Storybooks
- one deployable UI package or many
- one Chromatic project already in use or several
- whether the build runs from repo root or a package directory
- whether Nx or Turborepo is orchestrating the build
2) Make an explicit topology decision
Always answer whether the repo should:
- keep one Chromatic project
- or split into multiple Chromatic projects
Use reference/topology-rubric.md before discussing flags.
3) Map the build entrypoint and working directory
Choose the right execution pattern:
- repo-root run with
workingDir - package-local run
buildCommandplusoutputDirwhen the Storybook build is not exposed as a plain package scriptstorybookBaseDirandstorybookConfigDirwhen the build and trace roots differ from the current working directory
4) Classify TurboSnap risk surfaces
Check for:
- shared root lockfiles
- shared root
package.jsonfiles - root preview or config imports
- cross-package Storybook composition
- changes that should use
externals - changes that might justify
untraced
Use reference/safety-rubric.md before recommending any suppression path.
5) Return a recommendation card
Always include:
- the topology decision
- the concrete config changes
- exact snippet patterns when enough context is available
- rationale and risk notes
- one follow-up question only if a missing repo fact would materially change the recommendation
Boundaries
- Keep the skill public-safe and customer-safe.
- Treat Nx and Turborepo as first-class named scenarios.
- Do not recommend
untracedfor root package or lockfile changes without calling out coverage risk. - Do not assume one Chromatic project is always better than multiple projects.
- Prefer repo-root-relative glob guidance when talking about
externalsoruntraced. - Do not rely on live external documentation inside the installed skill.
References and examples
reference/recommendation-playbook.mdreference/topology-rubric.mdreference/snippet-catalog.mdreference/safety-rubric.mdreference/output-contract.mdreference/docs-map.mdtemplate.mdexamples/nx-single-project.mdexamples/turborepo-multi-project.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