ordering-modifier-chains

What problem does it solve? Jetpack Compose Modifier order changes what your UI actually does — backgrounds paint in the wrong region, click areas leak past visible buttons, clips fail to round corners, and graphicsLayer alpha applies to the wrong subtree. This Skill teaches how to read a Modifier chain top-to-bottom and reorder it correctly. ## Core Features & Use Cases - Chain Reading Model: Explains the wrap-the-next-modifier mental model so each modifier's effect on everything below it is predictable. - Canonical Reorder Patterns: Covers padding vs background, clickable placement for touch targets, clip before background, graphicsLayer scope, and size vs padding semantics. - Anti-Pattern Guardrails: Prevents hoisting Modifier chains via remember without FrameTimingMetric evidence, and blocks Modifier.composed workarounds. - Use Case: A developer reports that a button's ripple fires in the surrounding padding. The Skill identifies that clickable sits below padding in the chain and reorders it so the hit area matches the design intent. ## Quick Start Ask the assistant to review your Compose Modifier chain and explain why the background, click area, or clip is behaving incorrectly, then apply the correct ordering.