Compose preview review

Skill yschimke/skills/skills/compose-preview-review

Helping the Agents Compose the Things

Install

npx -y skills add yschimke/skills --skill compose-preview-review

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Review pull requests that change Compose UI by rendering @Preview composables on base and head and diffing them. Use when reviewing a UI PR locally or from a CI agent session (@claude mention), authoring an agent-opened PR that touches UI, triaging flaky or unstable previews (time/random/animation), or wiring compose-preview/main baselines and PR-comment GitHub Actions for a project. Pairs with the compose-preview skill.

SKILL.md

5.6 KB, as published. Nobody here has run it

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

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  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.

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

Diff by id + sha256. Bucket into changed / new / removed.
Read the PNGs for changed and new entries — that's the visual context the human reviewer will lack.
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).

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