skills.rest
decoutkhanqindev
decoutkhanqindevCOMMUNITY
Explore all skills by this author →
GitHub

migrating-to-modifier-node

Migrates Jetpack Compose modifiers from Modifier.composed to persistent Modifier.Node implementations.

Updated May 31, 2026
Search Tags:#performance#migration#android#jetpack-compose#recomposition#modifier-node#custom-modifier
One-click install
npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill migrating-to-modifier-node-decoutkhanqindev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrating-to-modifier-node
Source: https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat/tree/main/.claude/skills/migrating-to-modifier-node
Command: npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill migrating-to-modifier-node-decoutkhanqindev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Legacy Modifier.composed factories allocate a fresh composable scope on every recomposition, cannot be skipped, and force parent composables to recompose on every frame. This Skill guides authoring new custom modifiers as Modifier.Node and migrating existing composed factories to the persistent-node model with ModifierNodeElement diffing. ## Core Features & Use Cases - Migration workflow: Identifies every Modifier.composed factory in a module and converts it into the three-piece pattern of public extension, data class ModifierNodeElement, and Modifier.Node subclass. - Specialized node interfaces: Maps legacy behavior to DrawModifierNode, LayoutModifierNode, SemanticsModifierNode, PointerInputModifierNode, CompositionLocalConsumerModifierNode, LayoutAwareModifierNode, and DelegatingNode compositions. - Lifecycle and invalidation rules: Covers onAttach, onDetach, onReset, the built-in coroutineScope, and manual invalidation via invalidateDraw, invalidateMeasurement, and invalidatePlacement. - Use Case: A code review flags a Modifier.composed factory wrapping drawBehind and LaunchedEffect. Use this Skill to rewrite it as a data class Element plus a DrawModifierNode that launches its animation in the node's coroutineScope, eliminating per-frame parent recompositions. ## Quick Start Ask the assistant to migrate the Modifier.composed factories in your Compose module to Modifier.Node and verify none remain.

Frequently Asked Questions about migrating-to-modifier-node

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

FAQPage Schema
How do I migrate Modifier.composed to Modifier.Node in Jetpack Compose?▼

Create three pieces: a public extension function returning this then Element, a data class ModifierNodeElement implementing create and update, and a Modifier.Node subclass implementing the specialized interfaces your behavior needs. Move side effects into onAttach and onDetach.

Why must ModifierNodeElement be a data class?▼

Compose uses the Element's equals and hashCode to decide whether to call update on the existing node. A plain class falls back to referential equality, so update is never called and the node silently keeps stale parameters.

Which Modifier.Node interface replaces drawBehind?▼

DrawModifierNode replaces drawBehind and drawWithCache for custom modifiers. Implement ContentDrawScope.draw, call drawContent for the wrapped content, and place additional draw calls before or after it.

Can a Modifier.Node launch coroutines for animations?▼

Yes, every Modifier.Node exposes a built-in coroutineScope tied to its attach and detach lifecycle. Launch animations from onAttach using that scope; never create your own CoroutineScope, which would leak past onDetach.

When should I not migrate a modifier to Modifier.Node?▼

Skip migration when the modifier is a one-line composable wrapper, when built-in modifier composition already suffices, or when the real issue is a wrong-phase state read rather than the composed factory itself.

Related Skills

Explore More Software Engineering Skills→
citytexicitytexi
1

migrating-to-modifier-node

Migrates Jetpack Compose modifiers from Modifier.composed to persistent Modifier.Node implementations.

Community
Advanced
citytexicitytexi
1

tracing-recompositions-at-runtime

Instruments Jetpack Compose composables with @TraceRecomposition to log per-recomposition diffs in release builds.

Community
Intermediate
santimattiussantimattius
1

compose-modifier-system

Enforce correct modifier state read phases and invalidation in Jetpack Compose.

Community
Advanced
chrisbaneschrisbanes
908

compose-state-hoisting

Decide where Jetpack Compose UI state and logic should reside.

Community
Intermediate