developing-with-compose-previews

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.