skills/ chromaui/chromatic-skills

chromatic-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.

0
Installs
—
Rating
—
Success rate
10
Files scanned
Scan passeddevops
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

10 files scannedscanner v1.2.0Oct 11, 2026

Content sha256 e5d63165d0fad70f… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

SKILL.md

exact scanned copy

Chromatic CI Setup

Set up Chromatic visual testing automation in CI/CD pipelines.

This skill is the single source of truth for:

  • detecting which CI provider the project uses
  • fetching the current Chromatic docs for that provider
  • generating CI configuration files for Chromatic
  • setting up the project token secret

Quick start

  1. Read reference/ci-detection.md to identify the CI provider from existing config files.
  2. If no CI config is found, ask the user which CI provider they use.
  3. Read reference/package-manager.md and detect the package manager from lockfiles.
  4. Look up the provider's docs URL in reference/docs-map.md and fetch it with WebFetch.
  5. For non-GitHub-Actions providers: check package.json for a chromatic devDependency and script — add them if missing. Skip this step for GitHub Actions.
  6. Generate or update the CI configuration using the fetched docs and the detected package manager.
  7. Render the setup checklist using reference/output-contract.md.

Required workflow

1) Detect CI provider

Check for existing CI config files using reference/ci-detection.md.

If no CI files exist or detection is ambiguous, ask: "Which CI provider are you using? (GitHub Actions, GitLab, Bitbucket Pipelines, CircleCI, Jenkins, Azure Pipelines, or other)"

Never assume GitHub Actions unless evidence supports it.

2) Detect package manager

Use reference/package-manager.md to identify the package manager from lockfiles. Use its install command and run command throughout the generated config. If an existing CI config is already present, match whatever install command it already uses.

3) Read existing CI config

If a CI config file already exists, read it before generating any changes. Understand the existing job structure, Node.js setup steps, and caching approach — match the project's existing patterns when adding Chromatic.

4) Fetch the provider docs

Look up the docs URL in reference/docs-map.md and fetch it with WebFetch. Use the fetched content as the authoritative source for configuration examples and requirements.

If the fetch fails, fall back to the CI overview doc: https://www.chromatic.com/docs/llms/ci.txt

5) Verify package.json (skip for GitHub Actions)

GitHub Actions: The chromaui/action runs Chromatic internally — do not add a chromatic script or devDependency to package.json.

All other providers: Check package.json for a chromatic devDependency and script. If missing, add both:

"devDependencies": {
  "chromatic": "^12.0.0"
},
"scripts": {
  "chromatic": "chromatic --exit-zero-on-changes"
}

6) Output setup checklist

Always return the setup checklist from reference/output-contract.md, then show complete generated file content for copy-paste.

Boundaries

  • Do not commit or push files — only generate and show the configuration.
  • Do not expose the project token value — always reference it as a secret/environment variable.
  • Keep configurations minimal — do not add TurboSnap, monorepo flags, or Playwright/Cypress unless the user asks.

References

  • reference/ci-detection.md
  • reference/package-manager.md
  • reference/docs-map.md
  • reference/output-contract.md

Files

10
12.0 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from chromaui/chromatic-skills8

chromatic-monorepo-config

Recommend Chromatic best practices for Nx and Turborepo monorepos, including one-project versus multi-project topology, workingDir, buildCommand or outputDir, storybookBaseDir, storybookConfigDir, onlyChanged, externals, untraced, shared lockfile behavior, and TurboSnap-safe CI patterns. Use when a

Scan passed 0
chromatic-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, config

Scan passed 0
chromatic-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, sto

Scan passed 0
chromatic-troubleshoot-diff

Diagnose unexpected Chromatic visual diffs, snapshot inconsistencies, font and resource loading drift, animation timing issues, viewport or globals mismatches, sticky or fixed positioning quirks, and nondeterministic story output. Use when snapshots change unexpectedly or the same code produces inco

Scan passed 0
chromatic-turbosnap-audit

Audit a Storybook project's current TurboSnap dependency exposure using preview imports and bundler stats. Rank dependency footprints, identify configuration modules, and probe which inputs cause configuration bails. Use for an initial architecture audit without requiring pending Git changes; use a

Needs review 0
chromatic-turbosnap-check

Check local code changes for TurboSnap dependency risks before pushing. Build fresh Storybook stats, trace the selected Git changes, and review new preview imports or configuration modules. Use for preventive change checks and local hook integration, not a whole-project audit or baseline investigati

Needs review 0
chromatic-turbosnap-compare

Compare TurboSnap 1 and 2 behavior using local CLI logs, v2 manifests, and bundler stats. Use for migration discrepancies, unexpected preview/configuration hash changes, or files that changed on disk but were absent from the Git changed-file list.

Scan passed 0
chromatic-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.

Scan passed 0

Related devops skillsscan passed

enterprise-agent-ops

Operational controls for long-lived or cloud-hosted agent systems — runtime lifecycle (start, pause, stop, restart), observability (logs, metrics, traces), least-privilege safety scopes and kill switches, and rollout/rollback change management with audit logs and success/cost metrics. Use when runni

Scan passed 0
land-and-deploy

Land and deploy workflow. (gstack)

Scan passed 0
nextjs-on-cloudflare

Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skil

Scan passed 0
adapter-aws-lambda

Deploy tRPC on AWS Lambda with awsLambdaRequestHandler() from @trpc/server/adapters/aws-lambda for API Gateway v1 (REST, APIGatewayProxyEvent) and v2 (HTTP, APIGatewayProxyEventV2), and Lambda Function URLs. Enable response streaming with awsLambdaStreamingRequestHandler() wrapped in awslambda.strea

Scan passed 0
observability-and-instrumentation

Instruments code so production behavior is visible and diagnosable. Use when adding logging, metrics, tracing, or alerting. Use when shipping any feature that runs in production and you need evidence it works. Use when production issues are reported but you can't tell what happened from the availabl

Scan passed 0
firebase-app-hosting-basics

Deploys and manages full-stack web applications (Next.js, Angular) with Server-Side Rendering (SSR) using Firebase App Hosting. Use when deploying Next.js/Angular apps, configuring apphosting.yaml or firebase.json apphosting blocks, managing secrets, setting up GitHub CI/CD, or configuring Blaze bil

Scan passed 0