← ClaudeAtlas

compose-previewlisted

Render Compose @Preview functions to PNG outside Android Studio. Use this to verify UI changes, iterate on designs, and compare before/after states across Android (Jetpack Compose) and Compose Multiplatform Desktop projects.
yschimke/skills · ★ 1 · Code & Development · score 72
Install: claude install-skill yschimke/skills
# Compose Preview Render `@Preview` composables to PNG images without launching Android Studio. Works on both Android (Jetpack Compose via Robolectric) and Compose Multiplatform Desktop (via `ImageComposeScene` + Skia). Maintained at [github.com/yschimke/skills](https://github.com/yschimke/skills) under `skills/compose-preview/`. The CLI, Gradle plugin, and renderer ship from [github.com/yschimke/compose-ai-tools](https://github.com/yschimke/compose-ai-tools); this skill documents how an agent drives them. Run `compose-preview --version` to see the installed CLI bundle, `compose-preview doctor` to compare against the latest release (warns when the local copy trails), and `compose-preview update` to re-run the bootstrap installer. ## What this skill provides - A Gradle plugin (`ee.schimke.composeai.preview`) that discovers `@Preview` annotations from compiled classes and registers rendering tasks. - A `compose-preview` CLI that drives the Gradle build via the Tooling API and surfaces rendered PNG paths. - A VS Code extension with a preview panel, CodeLens and hover actions on `@Preview` functions, and commands for rendering all or a single file. ## Gradle tasks Applied to each module that declares the plugin: | Task | Purpose | |------|---------| | `:<module>:composePreviewDiscover` | Scan compiled classes, emit `build/compose-previews/previews.json`. | | `:<module>:composePreviewRenderAll` | Discover + render every `@Preview` to PNG under `build/compose-previews