Baselines

What are baselines?

A baseline is an approved reference screenshot for a specific component at a specific viewport. When a new screenshot is captured, it's compared against the baseline to detect visual changes.

Lifecycle

New Screenshot → Compare Against Baseline → Diff Found?
                                              ↓ Yes
                                          Review Diff
                                              ↓
                                    Approve (Update Baseline)
                                        or
                                    Reject (Flag Regression)

States

Branch scoping

Baselines are scoped to branches:

• Each branch has its own set of baselines
• Feature branches start with baselines inherited from the base branch
• When a feature branch is merged, its baselines can be promoted

# Approve baselines on current branch
npx ui-inspect approve --project proj_id

# Promote baselines from feature branch to main
npx ui-inspect approve --project proj_id --all

Approval workflows

Auto-approve new components

For the first screenshot of a component (no existing baseline):

npx ui-inspect build --project proj_id --auto-approve

Manual review

For existing components with visual changes:

1. Review the diff in the dashboard
2. Approve if the change is intentional
3. Reject if it's a regression

Batch operations

# Approve all pending baselines
npx ui-inspect approve --project proj_id --all

# Approve a specific component
npx ui-inspect approve --project proj_id --component "homepage"

Best practices

• Review before approving — Don't blindly auto-approve everything
• Use meaningful component names — Makes it easy to identify what changed
• Promote baselines after merge — Keep main branch baselines up to date
• Prune stale baselines — Remove baselines for deleted components