Percy

Update the global primary color variable in the CSS file.

Commit change to the repository.

Percy triggers builds for all linked applications in the monorepo.

Reviewers check the 'Visual Diff' dashboard for unintended color shifts or layout breaks.

Approve the change once validated across all viewports.

Update the dependency in package.json.

Run local Percy snapshot build.

Compare the 'before' (baseline) and 'after' snapshots in the cloud.

Identify and fix specific class name changes that caused misalignment.

Re-run build to confirm fixes.

Configure Percy to render snapshots at 320px, 768px, and 1280px.

Trigger a test run.

Review snapshots specifically for the 320px breakpoint.

Ensure no elements are overflowing the viewport width.

Enable Safari rendering in Percy settings.

Run a standard CI pipeline build.

Filter diffs by 'Browser: Safari'.

Identify Flexbox rendering differences specific to WebKit.

Apply CSS fixes and verify.

Set the application locale to 'de' in the test script environment.

Capture snapshots of all key user flows.

Examine UI for text-wrapping issues or truncated labels.

Adjust container widths to accommodate multi-language text.

Refactor HTML code for better SEO/Accessibility.

Run Percy build.

The diff should show 'No changes' if the visual output is identical.

Proceed with merge with high confidence.

Schedule a nightly Percy build via GitHub Actions.

Percy compares the current state of production against the previous night's baseline.

Alert the team via Slack if visual shifts are detected due to dynamic data changes.