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/compose-ai-tools under skills/compose-preview-review/. To check for updates, compare the installed copy against main (e.g. git ls-remote https://github.com/yschimke/compose-ai-tools HEAD).

When to use this skill

Pick the workflow that matches the task:

Task	Read
Review a PR locally that touches UI	design/AGENT_PR.md § Reviewing a PR
Author an agent-opened PR that touches UI	design/AGENT_PR.md § Authoring an Agent PR
Wire compose-preview/main baselines + PR-comment CI for a project	design/CI_PREVIEWS.md
Render previews on base and head and diff them	design/AGENT_PR.md § Render base and head locally

Quick reference: review a UI PR locally

1. Check whether the project has CI preview comments first. If a sticky <!-- preview-diff --> comment is already on the PR, read it and cite it instead of re-rendering. See design/AGENT_PR.md § Optional: integrate with preview-comment CI.

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 design/AGENT_PR.md § Uploading images.

Reference docs

Path	When to read
design/AGENT_PR.md	Full PR review + agent PR authoring guidance: comment structure, image hosting choices, things to flag, integration with preview-comment CI when present.
design/AGENT_AUDITS.md	Agent audit recipes and data-product documentation clusters: accessibility, localisation, Wear clipping, resources, theme, traces, and failure triage.
design/CI_PREVIEWS.md	compose-preview/main baselines branch + PR-comment GitHub Actions: workflow YAML, action inputs, branch durability.
design/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.