workleap-chromatic-best-practices_skill

This skill audits and updates repositories to enforce Workleap Chromatic best practices, optimizing snapshot costs and CI efficiency.

TypeScript

5

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill workleap/wl-web-configs --skill workleap-chromatic-best-practices

SKILL.md10.7 KB

Overview

This skill audits and updates repositories to follow Workleap's Chromatic best practices, focusing on snapshot cost control and CI optimization. It identifies patterns that disable TurboSnap, corrects Storybook preview imports, and enforces CI configurations that minimize unnecessary snapshots. The skill can also implement optional cost-saving tweaks after confirming trade-offs with the team.

How this skill works

The skill scans the repo for Chromatic configuration files, Storybook preview files, package.json scripts, and GitHub Actions workflows. It detects barrel imports, local Chromatic scripts, missing TurboSnap flags, shallow checkout settings, multi-browser flags, and large preview dependencies. For each issue it reports findings, recommends concrete fixes, and can apply safe automated edits (with user approval).

When to use it

When auditing a repository for Chromatic best practices compliance
When implementing Chromatic cost optimizations in a project
When fixing patterns that disable TurboSnap in code
When setting up chromatic.config.json with the untraced option
When updating CI workflows to run Chromatic only on labeled PRs
When refactoring Storybook preview imports to avoid barrels

Best practices

Enforce CI-only Chromatic runs; remove local chromatic scripts to avoid accidental snapshots
Use label-based PR triggers (label: run chromatic) and early-exit checks in workflows
Set Chromatic action flags: onlyChanged: true, exitOnceUploaded: true, autoAcceptChanges: main
Use actions/checkout@v6 with fetch-depth: 0 and set CHROMATIC_SHA/BRANCH/SLUG env vars for TurboSnap
Avoid multi-browser snapshot flags; use Chrome only unless multi-browser is required
Refactor barrel imports in .storybook/preview.* to direct imports and split large dependency files

Example use cases

Audit a Turborepo project to ensure per-package chromatic.config.json and TurboSnap compatibility
Refactor .storybook/preview.tsx to replace index/barrel imports with direct module paths
Update GitHub Actions workflow to require the run chromatic label and add onlyChanged: true
Remove chromatic scripts from package.json and add documentation to run Chromatic via CI only
Scan preview import graph for large localization or route files and recommend modularization

FAQ

Adding untraced (e.g., package.json) tells Chromatic to ignore changes in those files for TurboSnap. It reduces snapshot counts but may miss visual regressions caused by dependency updates; confirm the trade-off with the team.

Why must fetch-depth be 0 in checkout?

TurboSnap needs a full Git history to compute changed files. fetch-depth: 0 provides the required refs so onlyChanged: true can detect affected stories and avoid full builds.