skills.rest
trancee
tranceeCOMMUNITY
Explore all skills by this author →
GitHub

capturing-preview-screenshots-in-ci

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

Updated Jul 20, 2026
Search Tags:#jetpack-compose#ui-testing#github-actions#screenshot-testing#hotswan#preview-catalog
One-click install
npx skills add https://github.com/trancee/MeshLink-template --skill capturing-preview-screenshots-in-ci-trancee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capturing-preview-screenshots-in-ci
Source: https://github.com/trancee/MeshLink-template/tree/main/.agents/skills/android-testing-skills/compose/preview/capturing-preview-screenshots-in-ci
Command: npx skills add https://github.com/trancee/MeshLink-template --skill capturing-preview-screenshots-in-ci-trancee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the lack of visual fidelity in host-JVM screenshot testing by rendering Jetpack Compose previews on real Android devices or emulators, ensuring that fonts, image loading, and system chrome are captured exactly as they appear to the user.

Core Features & Use Cases

  • Device-Rendered Catalog: Generates a searchable HTML catalog of all @Preview components using real Android ART.
  • CI Integration: Automates the capture process on GitHub Actions using emulators or Gradle Managed Devices.
  • Use Case: Use this to provide designers and QA with a browsable, up-to-date URL of every UI component in the app on every commit to the main branch.

Quick Start

Run the captureAllPreviews gradle task on a connected emulator to generate the full screenshot catalog in the project root.

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 @Preview screenshots in GitHub Actions CI?▼

You can capture Jetpack Compose @Preview screenshots in CI by running the captureAllPreviews gradle task on an emulator, utilizing the HotSwan Gradle compiler plugin to automate rendering on real Android devices or emulators.

Why do my host-JVM Jetpack Compose screenshot tests lack visual fidelity?▼

Host-JVM Jetpack Compose screenshot tests lack visual fidelity because they do not render on real Android ART, missing exact fonts, image loading, and system chrome that device-rendered capture provides.

Do I need an active Android emulator to render Jetpack Compose UI previews?▼

Yes, rendering Jetpack Compose UI previews requires an active Android device or emulator environment to execute the rendering process and capture high-fidelity visual documentation of your components.

Can I generate a browsable component catalog for my Jetpack Compose design system?▼

You can generate a searchable HTML catalog of all Jetpack Compose @Preview components rendered on real Android ART, providing a browsable URL of your design system for designers and QA on every commit.

What is the best way to automate visual documentation for Jetpack Compose components?▼

The best way to automate visual documentation for Jetpack Compose components is to use the HotSwan Gradle plugin to render @Preview functions on real devices in CI, generating a device-rendered catalog automatically.

Related Skills

Explore More Software Engineering Skills→
skydovesskydoves
303

capturing-preview-screenshots-in-ci

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

Community
Advanced
AnandaAnugrahHandyantoAnandaAnugrahHandyanto

popular-web-designs

Aggregate 54 real-world design systems into HTML/CSS templates with token guidance.

Community
Intermediate
tranceetrancee

running-tests-on-gradle-managed-devices

Automate instrumented Android test provisioning and execution on Gradle Managed Devices.

Community
Advanced
Yemomo511Yemomo511
2

expo-ui-jetpack-compose

Integrate native Android Jetpack Compose views into Expo applications.

Community
Basic