Workleap Chromatic Best Practices

Guide for auditing and updating repositories to follow Workleap's Chromatic best practices.

Audit Workflow

When asked to audit or update a repository for Chromatic best practices, follow these steps in order.

Step 1: Locate Chromatic Configuration

Search for existing Chromatic setup:

chromatic.config.json
.storybook/preview.ts[x]
.github/workflows/*chromatic*.yml or *storybook*.yml
package.json (scripts section)

If no Chromatic configuration exists, ask the user if they want to set it up.

Step 2: Audit and Fix Each Practice

Run through all 10 checks below. For detailed code examples, detection patterns, and fix actions for each check, consult references/audit-checks.md.

Step 3: Generate Audit Report

After completing all checks, generate a findings table with pass/fail status and actions taken. See references/audit-checks.md for the report template.

Critical Rules

1. Never invent Chromatic options — Only use documented configuration
2. CI-only execution — Never recommend running Chromatic locally
3. Preserve TurboSnap — Every recommendation should maintain TurboSnap effectiveness
4. Cost awareness — Every snapshot counts toward monthly budget

Reference Guide

For detailed documentation beyond the workflow above, consult:

• references/audit-checks.md — Full check procedures with code examples, detection patterns, fix actions, and the audit report template
• references/background.md — TurboSnap preservation rules, snapshot cost multipliers, CI trigger strategy, monorepo-specific checks