Ordering Modifier Chains — Why padding(8.dp).background(Red) ≠ background(Red).padding(8.dp)

Modifier order matters because each modifier wraps the next as a function. Modifier.padding(8.dp).background(Red) shrinks constraints first, so the background paints INSIDE the padded region — the surrounding 8 dp margin has no red. Conversely, Modifier.background(Red).padding(8.dp) paints red across the parent's full bounds before insetting the content. Wrong order is the most common Compose UI bug after missing keys. This skill teaches Claude how to read a chain top-to-bottom and reorder it correctly.

When to use this skill