compose-previews-tooling

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

1|1|Updated May 23, 2026
One-click install
npx skills add https://github.com/santimattius/performance-compose-skills --skill compose-previews-tooling
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-previews-tooling
Source: https://github.com/santimattius/performance-compose-skills/tree/main/skills/compose-previews-tooling
Command: npx skills add https://github.com/santimattius/performance-compose-skills --skill compose-previews-tooling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Compose teams often misuse previews and related tooling as a proxy for real performance, which leads to misleading conclusions and wasted optimization effort.

Core Features & Use Cases

  • Preview workflows that stay consistent: Use module-wide theming via @PreviewWrapper to prevent preview/theme drift while iterating on UI.
  • Data-driven preview coverage: Use @PreviewParameter to generate meaningful state variants without manual duplication, while avoiding preview explosion.
  • Performance tooling with correct profiling discipline: Apply Compose Compiler Reports, Layout Inspector, Composition Tracing, and Macrobenchmark with a strict release/benchmark-only rule so measurements reflect optimized behavior.
  • Screenshot testing strategy: Choose between Paparazzi and Roborazzi (and note alpha screenshot APIs) based on whether you need a real Android runtime or CI-friendly rendering.

Quick Start

Ask the skill how to configure release profiling and select the right preview/screenshot/tooling approach for your current Compose component work.

Frequently Asked Questions about compose-previews-tooling

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

FAQPage Schema
How do I set up Jetpack Compose previews without causing theme drift?

To prevent Compose preview theme drift, use a @PreviewWrapper to apply module-wide theming consistently across UI iterations. This ensures previews remain visually accurate without duplicating theme definitions in every individual preview function.

How do I generate multiple Compose preview states without manual duplication?

Use @PreviewParameter to generate meaningful state variants for your Compose previews without manual duplication. This injects data-driven states into your UI components, expanding preview coverage efficiently while avoiding preview explosion.

What is the best way to profile Compose performance without misleading results?

The best way to profile Compose performance is using Macrobenchmark with a strict release-only rule. Relying on Compose previews or Layout Inspector for performance conclusions leads to misleading results, so route profiling effort to the correct pipeline phase.

Paparazzi vs Roborazzi: which should I choose for Compose screenshot testing?

Choose Paparazzi for Compose screenshot testing when you need a real Android runtime, and choose Roborazzi for CI-friendly rendering. Your selection depends on whether your tests require actual Android runtime execution or fast continuous integration rendering.

Can I use Compose previews and tooling for Compose Multiplatform workflows?

Yes, you can use Compose previews and tooling for Compose Multiplatform workflows by applying correct platform and tool selection using CMP applicability rules. This ensures your preview setup and profiling tools function correctly across different platform targets.

When should I use Composition Tracing and Compose Compiler Reports?

Use Compose Compiler Reports and Composition Tracing when you need to interpret layout results and defer state reads. These tools provide decision trees for routing profiling effort correctly, preventing incorrect performance conclusions during UI optimization.