skills.rest
skydoves
skydovesCOMMUNITY
Explore all skills by this author →
Website𝕏@github_skydovesGitHub

capturing-preview-screenshots-in-ci

Capture Jetpack Compose @Preview functions as device-rendered screenshots for an HTML catalog.

303|10|Updated May 15, 2026
Search Tags:#github pages#jetpack compose#ui preview#hotswan#android ci#screenshot catalog#adb screencap
One-click install
npx skills add https://github.com/skydoves/android-testing-skills --skill capturing-preview-screenshots-in-ci
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capturing-preview-screenshots-in-ci
Source: https://github.com/skydoves/android-testing-skills/tree/main/compose/preview/capturing-preview-screenshots-in-ci
Command: npx skills add https://github.com/skydoves/android-testing-skills --skill capturing-preview-screenshots-in-ci

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of turning local Jetpack Compose @Preview work into a shared, browsable visual artifact that teams can review and validate consistently from CI.

Core Features & Use Cases

  • Device-rendered preview capture: Renders every @Preview on a real Android device/emulator using Compose HotSwan so screenshots reflect device fonts, real image loading, GPU rendering, and system chrome.
  • Automated “capture all” workflow: Uses the HotSwan Gradle task captureAllPreviews to scan source files, launch previews via HotSwanPreviewActivity, and collect PNGs into a catalog.
  • Deterministic CI catalogs: Supports demo mode and per-preview render-delay tuning with @PreviewScreenshot to avoid half-painted captures for animated or data-loading previews.
  • Team-friendly HTML delivery: Produces an index.html catalog suitable for deployment (e.g., GitHub Pages) so designers/QA/PMs can browse changes per commit.
  • Tool comparison guidance: Helps decide when to use HotSwan device screenshots versus host-JVM tools like Paparazzi and Roborazzi (for pixel-diff vs device fidelity).

Quick Start

Ask your AI coding agent to configure HotSwan for your app module and run captureAllPreviews in CI so every @Preview becomes a PNG and a deployable HTML catalog on each commit.

Frequently Asked Questions about capturing-preview-screenshots-in-ci

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture Jetpack Compose previews as screenshots in Android CI?▼

To capture Jetpack Compose previews in Android CI, use the Compose HotSwan Gradle compiler plugin and the captureAllPreviews task to render @Preview functions on an emulator and collect PNG screenshots into an HTML catalog.

How does rendering Compose previews on a real device compare to host-JVM screenshot tools?▼

Rendering Compose previews on a real device captures device fonts, GPU rendering, and system chrome for higher fidelity, whereas host-JVM tools like Paparazzi and Roborazzi are better suited for fast pixel-diff testing without device orchestration.

How do I prevent half-painted screenshots when capturing animated Compose previews in CI?▼

To prevent half-painted screenshots of animated or data-loading Compose previews in CI, apply demo mode and configure per-preview render delays using the @PreviewScreenshot annotation for deterministic capture timing.

Can I deploy captured Compose preview screenshots to GitHub Pages?▼

Yes, you can deploy captured Compose preview screenshots to GitHub Pages by generating the index.html catalog from the collected PNGs in the .hotswan/preview-captures/ directory during your CI workflow.

Do I need an emulator to run the captureAllPreviews Gradle task?▼

Yes, running the captureAllPreviews Gradle task requires a connected Android emulator or device because HotSwanPreviewActivity orchestrates the rendering of @Preview functions using actual device-level GPU and font rendering.

What is a CI screenshot catalog for Jetpack Compose used for?▼

A CI screenshot catalog for Jetpack Compose is an HTML index of device-rendered @Preview PNGs generated per commit, enabling designers, QA, and PMs to visually browse and review UI changes consistently.

Related Skills

Explore More Software Engineering Skills→
tranceetrancee

capturing-preview-screenshots-in-ci

Render Jetpack Compose @Preview functions on Android devices and generate HTML catalogs.

Community
Advanced
nsheapsnsheaps
3

opengraph-image

Generate 1200x630 Open Graph images for Nuxt pages via html2png.dev.

Community
Intermediate
skydovesskydoves
303

capturing-screenshots-and-screenrecord

Capture Android screenshots and screen recordings via adb for test failures.

Community
Intermediate
santimattiussantimattius
1

compose-previews-tooling

Guide Jetpack Compose preview and performance tooling setup for accurate profiling.

Community
Intermediate