Compose preview review

Compose Preview — Review

Workflows for reviewing pull requests that touch Compose UI, authoring agent-opened PRs that include preview screenshots, and wiring CI to post before/after diffs automatically.

This skill assumes the compose-preview skill is installed — it owns the renderer, CLI, and Gradle plugin. Check first with compose-preview --version; if it's missing, ask the user to run the bootstrap installer (which covers both skills):

curl -fsSL https://raw.githubusercontent.com/yschimke/compose-ai-tools/main/scripts/install.sh \
  | bash

Source

This skill is maintained at github.com/yschimke/skills under skills/compose-preview-review/. To check for updates, compare the installed copy against main (e.g. git ls-remote https://github.com/yschimke/skills HEAD). The CLI, renderer, and GitHub Actions referenced below ship from github.com/yschimke/compose-ai-tools.

When to use this skill

Pick the workflow that matches the task:

Task	Read
Review a PR locally that touches UI	references/agent-pr.md § Reviewing a PR
Review or author from a CI agent session (@claude mention / claude.yml on an Actions runner)	references/ci-agent-sessions.md
Author an agent-opened PR that touches UI	references/agent-pr.md § Authoring an Agent PR
Triage a flaky or unstable preview (time, randomness, animation, network images)	references/stability.md
Wire compose-preview/main baselines + PR-comment CI for a project (or migrate from the legacy four-action setup)	references/ci-previews.md
Render previews on base and head and diff them	references/agent-pr.md § Render base and head locally

Quick reference: review a UI PR locally

1. Check what preview CI the project already has, first. Scan .github/workflows/ for compose-preview.yml (the apply action), legacy preview actions, and design-parity/design-artifacts pipelines — see references/ci-agent-sessions.md § Discover the repo's preview CI. If a sticky <!-- preview-diff --> comment is already on the PR, read it and cite it instead of re-rendering. See references/agent-pr.md § Optional: integrate with apply CI in comment mode.

2. Render base and head. Use a worktree so the working copy stays put:

   BASE=$(gh pr view <N> --json baseRefName -q .baseRefName)
   git worktree add ../_pr_base "origin/$BASE"
   (cd ../_pr_base && compose-preview show --json) > base.json
   compose-preview show --json > head.json
   git worktree remove ../_pr_base
   

3. Diff by id + sha256. Bucket into changed / new / removed.

4. Read the PNGs for changed and new entries — that's the visual context the human reviewer will lack.

5. Post a text-only review comment summarising deltas. Image upload only with explicit consent — see references/agent-pr.md § Uploading images.

Reference docs

Path	When to read
references/agent-pr.md	Full PR review + agent PR authoring guidance: comment structure, image hosting choices, things to flag, integration with the unified apply CI action when present.
references/ci-agent-sessions.md	Running this skill inside a mention-triggered CI agent session (claude.yml): Gradle-only rendering, commit-SHA-pinned image embedding, discovering and reusing the repo's existing preview-diff CI.
references/stability.md	Flaky / unstable previews: detection (render twice, CI symptoms), common causes (clock, randomness, animations, network images, locale), fixes, and how to review a suspect diff.
references/agent-audits.md	Agent audit recipes and data-product documentation clusters: accessibility, localisation, Wear clipping, resources, theme, traces, and failure triage.
references/ci-previews.md	compose-preview/main baselines branch + PR-comment GitHub Actions: unified apply workflow YAML, action inputs, branch durability, and migration from the legacy preview-baselines / preview-comment / a11y-report / notification-previews actions.
references/mcp-review.md	Driving a PR review through the MCP server (two-workspace base+head flow, push notifications, edit-on-top iteration).

Related

• compose-preview skill — running the renderer itself: CLI, Gradle plugin, @Preview design patterns, capture modes (animations, scrolling), accessibility checks.