How do I install the Compose Preview Review skill?

Run npx skillmds@latest add aibot88/compose-preview-review in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Compose Preview Review safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: WARNING. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Compose Preview Review?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Compose Preview Review free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Compose Preview Review?

aibot88 (@aibot88) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Compose Preview Review by aibot88 — Agent Skill

Name: Compose Preview Review
Rating: 4.2 (5 reviews)
Author: aibot88

Compose Preview Review

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, authoring an agent-opened PR that touches UI, or wiring compose-preview/main baselines and PR-comment GitHub Actions for a project. Pairs with the compose-preview skill.

aibot88 Updated Sep 9, 2026 3 repo stars

File contents

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. The bootstrap installer covers both:

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

Check whether the project has CI preview comments first. If a sticky  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.

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 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/CI_PREVIEWS.md	`compose-preview/main` baselines branch + PR-comment GitHub Actions: workflow YAML, action inputs, branch durability.

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

---name: compose-preview-reviewdescription: 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, authoring an agent-opened PR that touches UI, or wiring compose-preview/main baselines and PR-comment GitHub Actions for a project. Pairs with the compose-preview skill.--- # 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. The bootstrap installer covers both: ```sh 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](https://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](./design/AGENT_PR.md#reviewing-a-pr-agent-workflow) | | Author an agent-opened PR that touches UI | [design/AGENT_PR.md § Authoring an Agent PR](./design/AGENT_PR.md#authoring-an-agent-pr-body-structure) | | Wire `compose-preview/main` baselines + PR-comment CI for a project | [design/CI_PREVIEWS.md](./design/CI_PREVIEWS.md) | | Render previews on base and head and diff them | [design/AGENT_PR.md § Render base and head locally](./design/AGENT_PR.md#1-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 `` 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](./design/AGENT_PR.md#6-optional-integrate-with-preview-comment-ci-rare). 2. **Render base and head.** Use a worktree so the working copy stays put: ```bash 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](./design/AGENT_PR.md#3-uploading-images-only-with-explicit-consent). ## Reference docs | Path | When to read | |---|---| | [design/AGENT_PR.md](./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/CI_PREVIEWS.md](./design/CI_PREVIEWS.md) | `compose-preview/main` baselines branch + PR-comment GitHub Actions: workflow YAML, action inputs, branch durability. | ## Related - [**compose-preview** skill](../compose-preview/SKILL.md) — running the renderer itself: CLI, Gradle plugin, `@Preview` design patterns, capture modes (animations, scrolling), accessibility checks.

Frequently asked questions