How to Add a Visual Review and Approval Gate in CI

Cloud visual tools post a PR status check, so marking that check as required blocks merges until a reviewer accepts the diffs in the tool UI.

Let the visual tool report a commit status, then add that check to the branch protection required checks so unaccepted diffs block the merge.

Steps

• Enable the tool integration so it posts a PR status.
• Open branch protection settings for the default branch.
• Add the visual check to required status checks.
• Reviewers accept or reject diffs in the tool UI.

Workflow

jobs:
  visual-review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - run: npm ci
      - run: npx chromatic --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }} --exit-zero-on-changes

Gotchas

• --exit-zero-on-changes keeps the build green so the required status check, not the CLI exit code, gates the merge.
• The status context name must match exactly in branch protection or the gate does nothing.

Related guides