skills/ chromaui/chromatic-skills

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

0
Installs
—
Rating
—
Success rate
15
Files scanned
Scan passedknowledge
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

15 files scannedscanner v1.2.0Oct 11, 2026

Content sha256 fffa67c9cf54401f… — 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

Troubleshoot Config

Diagnose Storybook configuration problems that block Chromatic or local Storybook and identify the narrowest fix.

Required workflow

  1. Start with the current evidence: exact error text, .storybook/main.*, .storybook/preview.*, Storybook scripts and dependencies in package.json, framework or builder, one representative story path, and whether local Storybook already fails.
  2. Choose one primary diagnosis from reference/diagnosis-taxonomy.md. Use reference/workflow-playbook.md when 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.
  3. 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.
  4. Inspect the repo before asking for more evidence. Use reference/command-catalog.md to check .storybook/main.*, .storybook/preview.*, the Storybook section of package.json, and one representative story path. Do not invent scripts or migration paths.
  5. If one artifact is still missing, request exactly one next item using reference/evidence-ladder.md.
  6. 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.
  • Avoid asking for the whole repo, full lockfiles, or broad logs when one targeted artifact settles the branch.

References

  • reference/workflow-playbook.md
  • reference/diagnosis-taxonomy.md
  • reference/evidence-ladder.md
  • reference/command-catalog.md
  • reference/output-contract.md
  • template.md
  • evaluations/README.md

Files

15
14.2 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-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.

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-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 knowledge skillsscan passed

continuous-agent-loop

Patterns for continuous autonomous agent loops with quality gates, evals, and recovery controls. Use when running an agent loop that must self-check, gate on evals, and recover from failures.

Scan passed 0