Ordering Modifier Chains

by skydoves

Ordering Modifier Chains is a Frontend skill for Claude Code, published by skydoves in compose-performance-skills.

492 stars17 forkson skydoves/compose-performance-skillsAdded 2026/08/26+1% in starsRepository updated 2026/06/16

View source on GitHub Download repo ZIP

agent-skillsandroidclaudeclaude-codecomposecompose-performancejetpack-composekotlinllm-toolsrecompositionskydoves

Install in seconds

Install Ordering Modifier Chains

Copy Ordering Modifier Chains into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/skydoves/compose-performance-skills/tree/main/modifiers/ordering-modifier-chains ~/.claude/skills/ordering-modifier-chains

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/skydoves/compose-performance-skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: modifiers/ordering-modifier-chains/SKILL.md in skydoves/compose-performance-skills
Installs to: ~/.claude/skills/ordering-modifier-chains
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Ordering Modifier Chains does

Ordering Modifier Chains helps diagnose Jetpack Compose bugs caused by modifier order, such as wrong background paint, hit areas, clipping, or measurement. It also explains when not to hoist a Modifier chain with remember for performance.

Ordering Modifier Chains is cataloged under Frontend on DirSkills. Ordering Modifier Chains comes from a repository tagged agent-skills, android, claude, claude-code and compose.

Documentation

README

Excerpt

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

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Ordering Modifier Chains

What else does skydoves publish alongside Ordering Modifier Chains?
Ordering Modifier Chains is one of 25 skills that DirSkills catalogs from skydoves/compose-performance-skills, the repository it ships in. Its siblings there include Auditing Compose Performance, Avoiding Subcomposition Pitfalls and Choosing DerivedStateOf. Each one is a separate skill with its own page in this directory, installs the same way Ordering Modifier Chains does, and is maintained by skydoves in that same repository. The rest of the collection is listed on the skydoves/compose-performance-skills page.
How does Ordering Modifier Chains compare to other Frontend skills?
Ordering Modifier Chains ranks #517 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Ordering Modifier Chains against them. Open each page to compare what they document and how they install.