compose-modifier-system

What problem does it solve?

This Skill helps you stop Compose modifier code from triggering expensive recompositions by reading state in the wrong phase, and it shows how to build custom modifiers that invalidate only what’s necessary.

Core Features & Use Cases

• Defer state reads to Layout/Drawing: Use lambda overloads like Modifier.offset { ... } and Modifier.graphicsLayer { ... } so frequently changing values don’t force Composition restarts.
• Use production-ready custom modifiers: Replace deprecated Modifier.composed with ModifierNodeElement + Modifier.Node, using correct equality semantics and fine-grained invalidation.
• Pick the right drawing tier: Choose drawBehind, drawWithContent, or drawWithCache based on whether drawing is simple, ordering-sensitive, or requires cached expensive objects.
• Avoid common layout/draw pitfalls: Prevent measuring children twice in custom layout and ensure pixel-vs-dp correctness in drawing.

Quick Start

Use this skill to revise a custom modifier so that scroll/animation state is read in the Layout or Drawing phase, and to ensure the modifier node invalidates only placement or drawing when its inputs change.