storybook-chromatic-builder

Initialize Storybook in the UI package configured for your framework, wire it to consume the tokens package output, and share the app's global CSS rather than duplicating it. On pnpm workspaces, add esbuild to onlyBuiltDependencies so Storybook's first run succeeds.

Generate the Chromatic config and a CI workflow that runs on pull requests and main only. Place the CHROMATIC_PROJECT_TOKEN in a gitignored .env locally and in GitHub Actions secrets for CI, then verify a build goes green.

No — TurboSnap's incremental tracing misses global token changes, since token edits live in a linked workspace package it cannot trace. Default to full snapshots of every story on every run; only reconsider at very large story counts.

No, Code Connect requires a Figma Organization or Enterprise plan. If the plan does not support it, the setup skips it gracefully and the component spec in the repo still records the Figma-to-code mapping.

Controls break when the render function ignores its args, such as hardcoding props instead of spreading them. Use render: (args) => <Component {...args} /> and map boolean helper args to ReactElement slot props that object controls cannot drive.

Chromatic bills per snapshot, roughly stories times modes times builds. The free plan pauses testing around 5,000 snapshots per month, and paid plans have no hard cap, so set usage alerts and scope CI triggers before the first large token PR.