Capturing Preview Screenshots In CI — A Device-Rendered Catalog On Every Commit

A @Preview lives in one engineer's IDE, behind a recompile, on a renderer (layoutlib) that is not the device. This skill turns it into a shared artifact: render every @Preview on a real device/emulator (real ART, real fonts, real image loading, system bars), collect the PNGs into a searchable HTML catalog, regenerate it from CI on every commit, and serve it from GitHub Pages. The tool is Compose HotSwan's Gradle plugin. For structuring previews so this is worth doing, see ../developing-with-compose-previews/SKILL.md.

When to use this skill

• The user wants ./gradlew captureAllPreviews — render all @Previews and produce an HTML catalog.
• The user wants to screenshot one preview from a shell script over ADB without the IDE.
• The user wants a preview catalog deployed to GitHub Pages so designers/QA/PMs can browse components at a URL.
• A preview that loads a network image or settles an animation is captured half-painted — needs render-delay tuning.
• The user asks "Paparazzi vs Roborazzi vs device screenshots — which, and can I run both?".

When NOT to use this skill

• The user wants pixel-diff golden-image regression gates (store a reference PNG, fail on diff). captureAllPreviews does not diff; that is Paparazzi's/Roborazzi's job. Run both if you need both — see the comparison table below.
• The user wants behavioral assertions on a Compose UI (ComposeTestRule, finders) — use ../../setup/choosing-test-rule-vs-runtest/SKILL.md and the compose/finders/ skills.
• The user is fixing why a preview won't render or keeps going "out of date" — that is preview structure; use ../developing-with-compose-previews/SKILL.md.
• The user wants Compose live hot reload (edit code, see it on a running device) — that is the HotSwan IDE plugin's reload feature, a different surface from screenshot capture.