{"id":"69e0cb4b-bdfb-497e-be27-44918e0e1121","shortId":"9mKwaB","kind":"skill","title":"compose-preview-review","tagline":"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.","description":"# Compose Preview — Review\n\nWorkflows for reviewing pull requests that touch Compose UI, authoring\nagent-opened PRs that include preview screenshots, and wiring CI to post\nbefore/after diffs automatically.\n\nThis skill assumes the **compose-preview** skill is installed — it owns\nthe renderer, CLI, and Gradle plugin. Check first with\n`compose-preview --version`; if it's missing, ask the user to run the\nbootstrap installer (which covers both skills):\n\n```sh\ncurl -fsSL https://raw.githubusercontent.com/yschimke/compose-ai-tools/main/scripts/install.sh \\\n  | bash\n```\n\n## Source\n\nThis skill is maintained at\n[github.com/yschimke/compose-ai-tools](https://github.com/yschimke/compose-ai-tools)\nunder `skills/compose-preview-review/`. To check for updates, compare the\ninstalled copy against `main` (e.g. `git ls-remote\nhttps://github.com/yschimke/compose-ai-tools HEAD`).\n\n## When to use this skill\n\nPick the workflow that matches the task:\n\n| Task | Read |\n|---|---|\n| Review a PR locally that touches UI | [design/AGENT_PR.md § Reviewing a PR](./design/AGENT_PR.md#reviewing-a-pr-agent-workflow) |\n| 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) |\n| Wire `compose-preview/main` baselines + PR-comment CI for a project | [design/CI_PREVIEWS.md](./design/CI_PREVIEWS.md) |\n| 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) |\n\n## Quick reference: review a UI PR locally\n\n1. **Check whether the project has CI preview comments first.** If a\n   sticky `<!-- preview-diff -->` comment is already on the PR, read it\n   and cite it instead of re-rendering. See\n   [design/AGENT_PR.md § Optional: integrate with preview-comment CI](./design/AGENT_PR.md#6-optional-integrate-with-preview-comment-ci-rare).\n\n2. **Render base and head.** Use a worktree so the working copy stays put:\n\n   ```bash\n   BASE=$(gh pr view <N> --json baseRefName -q .baseRefName)\n   git worktree add ../_pr_base \"origin/$BASE\"\n   (cd ../_pr_base && compose-preview show --json) > base.json\n   compose-preview show --json > head.json\n   git worktree remove ../_pr_base\n   ```\n\n3. **Diff** by `id` + `sha256`. Bucket into changed / new / removed.\n\n4. **Read** the PNGs for changed and new entries — that's the visual\n   context the human reviewer will lack.\n\n5. **Post a text-only review comment** summarising deltas. Image upload\n   only with explicit consent — see\n   [design/AGENT_PR.md § Uploading images](./design/AGENT_PR.md#3-uploading-images-only-with-explicit-consent).\n\n## Reference docs\n\n| Path | When to read |\n|---|---|\n| [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. |\n| [design/AGENT_AUDITS.md](./design/AGENT_AUDITS.md) | Agent audit recipes and data-product documentation clusters: accessibility, localisation, Wear clipping, resources, theme, traces, and failure triage. |\n| [design/CI_PREVIEWS.md](./design/CI_PREVIEWS.md) | `compose-preview/main` baselines branch + PR-comment GitHub Actions: workflow YAML, action inputs, branch durability. |\n| [design/MCP_REVIEW.md](./design/MCP_REVIEW.md) | Driving a PR review through the MCP server (two-workspace base+head flow, push notifications, edit-on-top iteration). |\n\n## Related\n\n- [**compose-preview** skill](../compose-preview/SKILL.md) — running the\n  renderer itself: CLI, Gradle plugin, `@Preview` design patterns,\n  capture modes (animations, scrolling), accessibility checks.","tags":["compose","preview","review","tools","yschimke","agent-skills","android","claude-code","claude-skills","compose-multiplatform","compose-preview","gradle-plugin"],"capabilities":["skill","source-yschimke","skill-compose-preview-review","topic-agent-skills","topic-android","topic-claude-code","topic-claude-skills","topic-compose-multiplatform","topic-compose-preview","topic-gradle-plugin","topic-jetpack-compose","topic-kotlin","topic-skill-md","topic-vscode-extension","topic-wear-os"],"categories":["compose-ai-tools"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/yschimke/compose-ai-tools/compose-preview-review","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add yschimke/compose-ai-tools","source_repo":"https://github.com/yschimke/compose-ai-tools","install_from":"skills.sh"}},"qualityScore":"0.488","qualityRationale":"deterministic score 0.49 from registry signals: · indexed on github topic:agent-skills · 76 github stars · SKILL.md body (3,678 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-14T06:57:17.409Z","embedding":null,"createdAt":"2026-04-30T19:05:29.016Z","updatedAt":"2026-05-14T06:57:17.409Z","lastSeenAt":"2026-05-14T06:57:17.409Z","tsv":"'/_pr_base':335,339,355 '/compose-preview/skill.md':513 '/design/agent_audits.md':446 '/design/agent_pr.md':187,208,246,299,405,421 '/design/ci_previews.md':230,467 '/design/mcp_review.md':486 '/main':44,220,471 '/yschimke/compose-ai-tools':160 '/yschimke/compose-ai-tools/main/scripts/install.sh':130 '/yschimke/compose-ai-tools](https://github.com/yschimke/compose-ai-tools)':140 '1':247,261 '2':309 '3':356,406 '4':366 '5':385 '6':300 'access':456,528 'action':51,478,481 'add':334 'agent':33,69,192,197,206,212,425,447 'agent-open':32,68,196 'alreadi':276 'anim':526 'ask':113 'assum':86 'audit':448 'author':30,67,194,204,210,427 'authoring-an-agent-pr-body-structur':209 'automat':83 'base':17,234,242,250,311,324,337,498 'base.json':345 'baselin':45,221,472 'baserefnam':329,331 'bash':131,323 'before/after':81 'bodi':214 'bootstrap':119 'branch':473,483 'bucket':361 'captur':524 'cd':338 'chang':9,363,371 'check':102,144,262,529 'choic':433 'ci':78,225,267,298,307,442 'cite':283 'cli':98,518 'clip':459 'cluster':455 'comment':49,224,269,274,297,306,392,429,441,476 'compar':147 'compos':2,10,15,42,55,65,89,106,218,341,347,469,510 'compose-preview':41,88,105,217,340,346,468,509 'compose-preview-review':1 'consent':400,413 'context':379 'copi':150,320 'cover':122 'curl':126 'data':452 'data-product':451 'delta':394 'design':522 'design/agent_audits.md':445 'design/agent_pr.md':183,203,240,291,402,420 'design/ci_previews.md':229,466 'design/mcp_review.md':485 'dif':21 'diff':82,238,357 'doc':415 'document':454 'drive':487 'durabl':484 'e.g':153 'edit':504 'edit-on-top':503 'entri':374 'explicit':399,412 'failur':464 'first':103,270 'flag':436 'flow':500 'fssl':127 'full':422 'gh':325 'git':154,332,352 'github':50,477 'github.com':139,159 'github.com/yschimke/compose-ai-tools':158 'github.com/yschimke/compose-ai-tools](https://github.com/yschimke/compose-ai-tools)':138 'gradl':100,519 'guidanc':428 'head':19,161,236,244,252,313,499 'head.json':351 'host':432 'human':381 'id':359 'imag':395,404,409,431 'includ':73 'input':482 'instal':93,120,149 'instead':285 'integr':293,303,437 'iter':507 'json':328,344,350 'lack':384 'local':29,179,245,253,260 'localis':457 'ls':156 'ls-remot':155 'main':152 'maintain':136 'match':171 'mcp':493 'miss':112 'mode':525 'new':364,373 'notif':502 'open':34,70,198 'option':292,302 'optional-integrate-with-preview-comment-ci-rar':301 'origin':336 'own':95 'path':416 'pattern':523 'pick':167 'plugin':101,520 'pngs':369 'post':80,386 'pr':28,35,48,178,186,191,199,207,213,223,259,279,326,423,426,475,489 'pr-comment':47,222,474 'present':444 'preview':3,14,43,56,74,90,107,219,232,268,296,305,342,348,440,470,511,521 'preview-com':295,439 'product':453 'project':54,228,265 'prs':71 'pull':6,61 'push':501 'put':322 'q':330 'quick':254 'rare':308 'raw.githubusercontent.com':129 'raw.githubusercontent.com/yschimke/compose-ai-tools/main/scripts/install.sh':128 're':288 're-rend':287 'read':175,280,367,419 'recip':449 'refer':255,414 'relat':508 'remot':157 'remov':354,365 'render':13,97,231,241,249,289,310,516 'render-base-and-head-loc':248 'request':7,62 'resourc':460 'review':4,5,25,57,60,176,184,189,256,382,391,424,490 'reviewing-a-pr-agent-workflow':188 'run':117,514 'screenshot':75 'scroll':527 'see':290,401 'server':494 'sh':125 'sha256':360 'show':343,349 'skill':85,91,124,134,166,512 'skill-compose-preview-review' 'skills/compose-preview-review':142 'sourc':132 'source-yschimke' 'stay':321 'sticki':273 'structur':215,430 'summaris':393 'task':173,174 'text':389 'text-on':388 'theme':461 'thing':434 'top':506 'topic-agent-skills' 'topic-android' 'topic-claude-code' 'topic-claude-skills' 'topic-compose-multiplatform' 'topic-compose-preview' 'topic-gradle-plugin' 'topic-jetpack-compose' 'topic-kotlin' 'topic-skill-md' 'topic-vscode-extension' 'topic-wear-os' 'touch':37,64,181,201 'trace':462 'triag':465 'two':496 'two-workspac':495 'ui':11,27,38,66,182,202,258 'updat':146 'upload':396,403,408 'uploading-images-only-with-explicit-cons':407 'use':23,164,314 'user':115 'version':108 'view':327 'visual':378 'wear':458 'whether':263 'wire':40,77,216 'work':319 'workflow':58,169,193,479 'workspac':497 'worktre':316,333,353 'yaml':480","prices":[{"id":"b37249ee-ad87-4593-9b58-6b77e3906215","listingId":"69e0cb4b-bdfb-497e-be27-44918e0e1121","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"yschimke","category":"compose-ai-tools","install_from":"skills.sh"},"createdAt":"2026-04-30T19:05:29.016Z"}],"sources":[{"listingId":"69e0cb4b-bdfb-497e-be27-44918e0e1121","source":"github","sourceId":"yschimke/compose-ai-tools/compose-preview-review","sourceUrl":"https://github.com/yschimke/compose-ai-tools/tree/main/skills/compose-preview-review","isPrimary":false,"firstSeenAt":"2026-04-30T19:05:29.016Z","lastSeenAt":"2026-05-14T06:57:17.409Z"}],"details":{"listingId":"69e0cb4b-bdfb-497e-be27-44918e0e1121","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"yschimke","slug":"compose-preview-review","github":{"repo":"yschimke/compose-ai-tools","stars":76,"topics":["agent-skills","android","claude-code","claude-skills","compose-multiplatform","compose-preview","gradle-plugin","jetpack-compose","kotlin","skill-md","vscode-extension","wear-os"],"license":"apache-2.0","html_url":"https://github.com/yschimke/compose-ai-tools","pushed_at":"2026-05-14T06:56:29Z","description":"Helping the Agents Compose the Things","skill_md_sha":"68a72a74bc4136ceb8b2fb16fe68cca5d2034fb6","skill_md_path":"skills/compose-preview-review/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/yschimke/compose-ai-tools/tree/main/skills/compose-preview-review"},"layout":"multi","source":"github","category":"compose-ai-tools","frontmatter":{"name":"compose-preview-review","description":"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."},"skills_sh_url":"https://skills.sh/yschimke/compose-ai-tools/compose-preview-review"},"updatedAt":"2026-05-14T06:57:17.409Z"}}