workleap/wl-web-configs
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.
