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

developing-with-compose-previews

Refactor Jetpack Compose previews to remove ViewModel and environment-bound dependencies.

303|10|Updated May 15, 2026
Search Tags:#ui testing#jetpack compose#state hoisting#compose preview#preview driven development#PreviewParameter#LocalInspectionMode
One-click install
npx skills add https://github.com/skydoves/android-testing-skills --skill developing-with-compose-previews
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: developing-with-compose-previews
Source: https://github.com/skydoves/android-testing-skills/tree/main/compose/preview/developing-with-compose-previews
Command: npx skills add https://github.com/skydoves/android-testing-skills --skill developing-with-compose-previews

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill fixes preview-driven development pain in Jetpack Compose by ensuring previews render consistently instead of failing, showing the wrong UI, or rotting as code evolves.

Core Features & Use Cases

  • Hoist state and keep previewable composables stateless: avoid requiring a ViewModel, repository, NavController, or Context inside previewable composables so Studio can render them immediately.
  • Cover real UI states with @PreviewParameter: generate loading, empty, error, content, and overflow cases from a PreviewParameterProvider to prevent missed edge cases.
  • Stabilize rendering across configurations: use multi-configuration previews (uiMode, fontScale, device specs, locale/RTL) to catch layout and localization issues early.
  • Quarantine environment-bound dependencies: use LocalInspectionMode for preview-only fallbacks (e.g., image loading placeholders) while keeping the rest of the UI previewable.

Quick Start

Ask your AI assistant to refactor your screen-level @Preview into previewable leaf composables that take plain parameters, then add a PreviewParameterProvider that outputs loading, content, empty, error, and overflow sample data for one consolidated preview entry point.

Frequently Asked Questions about developing-with-compose-previews

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

FAQPage Schema
Why does my Jetpack Compose @Preview fail to render in Android Studio?▼

Jetpack Compose @Preview fails to render when composables directly depend on ViewModel, NavController, or dependency injection. You can fix this by hoisting state and keeping previewable composables stateless so Studio can render them immediately.

How do I use @PreviewParameter to test loading and error states in Compose?▼

Use @PreviewParameter with a custom PreviewParameterProvider to inject loading, empty, error, content, and overflow sample data. This generates multiple UI states from a single consolidated preview entry point to prevent missed edge cases.

What is LocalInspectionMode used for in Jetpack Compose previews?▼

LocalInspectionMode is used to quarantine environment-bound dependencies during preview rendering. It provides preview-only fallbacks like image loading placeholders while keeping the rest of the UI previewable without runtime dependencies.

How do I test RTL and dark mode configurations in Compose previews?▼

You can test RTL and dark mode configurations by applying multi-configuration previews using uiMode, fontScale, device specs, and locale parameters. This stabilizes rendering across configurations to catch layout and localization issues early.

What is the best way to structure Jetpack Compose UI for reliable previews?▼

The best way to structure Compose UI for reliable previews is to refactor screen-level composables into stateless leaf composables that take plain parameters. This avoids requiring repositories or Context inside previewable components.

Related Skills

Explore More Software Engineering Skills→
jhparktimejhparktime
1

compose-ui

Enforce state hoisting, modifiers, and theming in Jetpack Compose UI.

Community
Advanced
nsuberinsuberi

harden

Identify and address edge cases, internationalization, text overflow, and error handling in frontend interfaces.

Community
Advanced
jiaiyanjiaiyan
21

el-image

Render images with lazy loading, placeholders, error handling, and previews in galleries.

Community
Intermediate
ShravanSunderShravanSunder

peekaboo

Automate visual UI testing for macOS applications using the Peekaboo CLI.

Community
Intermediate