skills.rest
citytexi
citytexiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ordering-modifier-chains

Diagnoses and fixes Jetpack Compose Modifier ordering bugs affecting paint, click, clip, and layout behavior.

1|Updated Jul 6, 2026
Search Tags:#android#kotlin#jetpack-compose#ui-debugging#modifier-order#clickable#graphicslayer
One-click install
npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill ordering-modifier-chains-citytexi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ordering-modifier-chains
Source: https://github.com/citytexi/team-yg-pesonal-agent/tree/main/.claude/skills/ordering-modifier-chains
Command: npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill ordering-modifier-chains-citytexi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jetpack Compose Modifier order silently changes UI behavior: backgrounds paint in the wrong region, click areas leak past visible bounds, 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 Diagnosis: Maps symptoms (wrong paint region, wrong click area, wrong clip, wrong measurement, wrong graphicsLayer scope) to the specific reorder that fixes them. - Canonical Patterns: Covers padding vs background, clickable placement for 48dp touch targets, clip before background, graphicsLayer scope, and size vs padding semantics with wrong/right Kotlin examples. - Hoisting Guidance: Explains why remember { Modifier.… } is rarely a real performance win because Compose interns structurally-equal chains, and requires a FrameTimingMetric benchmark before hoisting. - Use Case: A reviewer sees Modifier.padding(16.dp).clickable { } in a diff and uses this Skill to explain why taps in the padding fire the ripple, then reorders the chain to match the design intent. ## Quick Start Ask the AI to review this Compose Modifier chain and explain why the background paints outside the rounded corners, then fix the order.

Frequently Asked Questions about ordering-modifier-chains

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

FAQPage Schema
Does Modifier order matter in Jetpack Compose?▼

Yes, Modifier order matters because each modifier wraps everything below it in the chain. Modifier.padding(8.dp).background(Red) paints red only inside the padded region, while background then padding fills the full bounds before insetting content.

Why does my Compose click area extend past the visible button?▼

The clickable hit area is the bounds at its position in the chain, so padding placed above clickable is included in the tap region. Move clickable below padding for visual-area-only clicks, or keep it above deliberately for a 48dp accessibility touch target.

How do I clip a Compose background to rounded corners?▼

Place clip before background so the clip wraps the paint, or use Modifier.background(color, shape) which handles clipping and filling in one node. Putting background before clip leaves the painted rectangle unclipped with square corners.

Should I cache a Modifier chain with remember for performance?▼

Usually no, because Compose already interns structurally-equal Modifier chains, so hoisting saves at most one allocation per recomposition. Only add remember after a FrameTimingMetric macrobenchmark on a release build shows a measurable regression.

Why does graphicsLayer alpha not fade my Compose background?▼

graphicsLayer wraps only the modifiers below it, so a background placed above it stays fully opaque. Move graphicsLayer to the top of the chain when the alpha or transform should apply to the entire visual unit including the background.

Related Skills

Explore More Software Engineering Skills→
emdash-cmsemdash-cms
12.1k

verify

Determines whether diagnosed code behavior is a bug or intended design.

Official
Intermediate
trae-communitytrae-community
3

Finishing a Development Branch

Verify test results and execute git merge, pull request, or branch deletion operations.

Official
Intermediate
chrisbaneschrisbanes
908

compose-recomposition-performance

Diagnose Jetpack Compose recomposition performance issues across parameter stability, deferred reads, and cross-phase back-writing.

Community
Advanced
santimattiussantimattius
1

compose-modifier-system

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

Community
Advanced