skills.rest
workleap
workleapOFFICIAL
Explore all skills by this author →
WebsiteGitHub

workleap-chromatic-best-practices

Audits and implements Chromatic best practices for CI workflows and configuration.

6|2|Updated Mar 27, 2023
Search Tags:#workflow#audit#chromatic#storybook#turbo#ci#visual-regression
One-click install
npx skills add https://github.com/workleap/wl-web-configs --skill workleap-chromatic-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workleap-chromatic-best-practices
Source: https://github.com/workleap/wl-web-configs/tree/main/agent-skills/workleap-chromatic-best-practices
Command: npx skills add https://github.com/workleap/wl-web-configs --skill workleap-chromatic-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chromatic configurations and inefficient CI workflows can waste time and budget on unnecessary visual tests; this guide provides a structured audit and remediation approach to align with Workleap's Chromatic best practices.

Core Features & Use Cases

  • Audit Chromatic configuration presence (chromatic.config.json), Storybook previews, and CI workflows.
  • Refactor Storybook preview imports to avoid barrel-induced full builds.
  • Ensure CI runs Chromatic only on PRs with a run chromatic label, with proper flags and checkout, and automatically removes the label after completion.
  • Provide recommendations to reduce snapshot counts while preserving TurboSnap accuracy.

Quick Start

Follow this guide to audit a repository for Chromatic best-practices and implement recommended changes.

Frequently Asked Questions about workleap-chromatic-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce Chromatic snapshot costs in my Storybook CI workflow?▼

To reduce Chromatic snapshot costs, audit your Storybook preview imports to prevent barrel-induced full builds and implement label-based execution to run visual regression only on labeled PRs. This preserves TurboSnap accuracy while cutting unnecessary tests.

What is the best way to configure Chromatic CI workflows for per-module triggering?▼

The best way to configure Chromatic CI for per-module triggering involves using a monorepo tool like Turbo, setting fetch-depth 0 for proper checkout, and applying automatic label removal in PR flows to control when visual regression tests execute.

Why does Chromatic run full builds instead of using TurboSnap in my Storybook project?▼

Chromatic runs full builds instead of TurboSnap when Storybook preview imports use barrel files, which bypass dependency tracing. Refactoring preview imports ensures TurboSnap can accurately trace dependencies and skip unchanged stories.

Does this Chromatic audit require a specific CI configuration to function?▼

Yes, this Chromatic audit requires a CI configuration that supports appropriate Chromatic flags, fetch-depth 0 for checkout, concurrency settings, environment variables, and automatic label removal in PR flows to ensure reliable visual regression testing.

How do I enforce frontmatter presence and run Chromatic only on labeled pull requests?▼

To enforce frontmatter presence and run Chromatic only on labeled pull requests, configure your CI workflow to check for a run chromatic label, execute tests with proper flags, and automatically remove the label after completion to save budget.

Related Skills

Explore More Software Engineering Skills→
matt-rileymatt-riley
1

knip

Audit JavaScript and TypeScript codebases for unused dependencies, exports, files, and unresolved imports.

Community
Intermediate
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

visual-regression-test-setup

Set up automated visual regression testing with Percy, Chromatic, Playwright, or BackstopJS.

Official
Intermediate
yonatangrossyonatangross
217

storybook-testing

Test Storybook 9/10 components with Vitest, play() interactions, and Chromatic TurboSnap.

Community
Intermediate
JaiminVadadoriyaJaiminVadadoriya
1

visual-testing

Automate visual regression testing by comparing screenshots against baselines.

Community
Advanced