visualizing-recomposition-cascades

Visualize Jetpack Compose recomposition cascades and live heatmaps inside the IDE.

1|Updated Jul 6, 2026
One-click install
npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill visualizing-recomposition-cascades-citytexi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visualizing-recomposition-cascades
Source: https://github.com/citytexi/team-yg-pesonal-agent/tree/main/.claude/skills/visualizing-recomposition-cascades
Command: npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill visualizing-recomposition-cascades-citytexi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When a Jetpack Compose UI recomposes too often, developers struggle to answer two questions: which composables get dragged in when a root composable changes, and which composables actually recompose at runtime during a scroll or animation. This Skill drives the active investigation features of the compose-stability-analyzer IntelliJ/Android Studio plugin to answer both. ## Core Features & Use Cases - Static Cascade Visualizer: Right-click inside any @Composable and run Analyze Recomposition Cascade to walk the static call graph (depth-capped at 10, cycle-safe) and see the blast radius of a state change, with per-node stability badges. - Live Recomposition Heatmap: Toggle the heatmap to stream D/Recomposition logcat events from a connected device via adb logcat -s Recomposition:D -T 1 and render recomposition counts as color-coded block inlays above each instrumented composable. - Three-Tab Tool Window: Use the Explorer tab to survey a module, the Cascade tab for static analysis, and the Heatmap tab for runtime confirmation. - Use Case: Before refactoring a shared composable like PriceTicker, run the cascade to find 12 downstream nodes, annotate the top suspects with @TraceRecomposition, toggle the heatmap during a scroll, and discover only 2 nodes are actually hot — then fix just those two. ## Quick Start Right-click inside a @Composable function, choose Analyze Recomposition Cascade to see its blast radius, then annotate targets with @TraceRecomposition and toggle the Recomposition Heatmap to confirm live recomposition counts from your device.

Frequently Asked Questions about visualizing-recomposition-cascades

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

FAQPage Schema
How do I see which composables recompose when a state changes in Jetpack Compose?▼

Place the caret inside the root @Composable, right-click, and run Analyze Recomposition Cascade. The Cascade tab renders the static call-graph tree with stability badges, capped at depth 10 with cycle detection, so you can see the potential blast radius.

How do I measure actual recomposition counts on a real device?▼

Annotate target composables with @TraceRecomposition, run the app on an ADB-connected device, then toggle the Recomposition Heatmap. The plugin subscribes via adb logcat -s Recomposition:D -T 1 and renders counts as block inlays above each instrumented composable.

Why does the recomposition heatmap show no inlays?▼

The heatmap is fed by logcat lines emitted by the @TraceRecomposition runtime, so without at least one instrumented composable nothing renders. Add the annotation, ensure ComposeStabilityAnalyzer.setEnabled(true) is called in a debug build, rebuild, and toggle the heatmap again.

Can I run the recomposition heatmap during Macrobenchmark tests?▼

No. The heatmap drives logcat I/O and PSI updates on every recomposition, which skews FrameTimingMetric and other release-grade measurements. Toggle the heatmap off before running Macrobenchmark or Baseline Profile generation.

Does the cascade view guarantee those composables will recompose at runtime?▼

No. The cascade is a static call-graph walk, not a runtime guarantee; whether each node recomposes depends on stability and skipping decisions at runtime. Confirm with the live heatmap before refactoring downstream composables.