skills.rest
albertmartorell1975
albertmartorell1975COMMUNITY
Explore all skills by this author →
WebsiteGitHub

compose-modifier-and-layout-style

Enforces modifier parameter conventions and layout structure rules in Jetpack Compose code.

Updated May 21, 2025
Search Tags:#code review#layout#android#kotlin#jetpack compose#modifier#ui style
One-click install
npx skills add https://github.com/albertmartorell1975/MeteoMartoCompose --skill compose-modifier-and-layout-style-albertmartorell1975
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-modifier-and-layout-style
Source: https://github.com/albertmartorell1975/MeteoMartoCompose/tree/main/.agents/skills/compose-modifier-and-layout-style
Command: npx skills add https://github.com/albertmartorell1975/MeteoMartoCompose --skill compose-modifier-and-layout-style-albertmartorell1975

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jetpack Compose code often drifts into inconsistent patterns: composables without a modifier parameter, hardcoded root layout decisions like .fillMaxWidth(), stepwise var modifier reassignment, and layout wrappers that exist only to hold a single conditional. This Skill gives reviewers and authors a concrete rule set to keep composable APIs reusable and modifier chains readable. ## Core Features & Use Cases - Modifier parameter conventions: Requires a modifier: Modifier = Modifier parameter applied first to the root layout, with caller-provided modifiers outermost in the chain. - Modifier chain construction: Enforces single fluent chains on val, inline conditional segments via .then(if (c) ... else Modifier), and multiline formatting for chains of three or more calls. - Layout structure rules: Hoists single conditionals out of layout wrappers, with explicit carve-outs for containers carrying visual semantics, and covers measure-phase constraint decoration via Modifier.layout. - Use Case: While reviewing a pull request that adds a HomeScreenHeader composable with a hardcoded .fillMaxWidth() and a Column { if (showHeader) ... } body, apply the rules to move layout decisions to the caller and hoist the conditional. ## Quick Start Review this Jetpack Compose composable and fix its modifier parameter, modifier chain, and conditional layout structure according to the style rules.

Frequently Asked Questions about compose-modifier-and-layout-style

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

FAQPage Schema
How do I add a modifier parameter to a Jetpack Compose composable?▼

Declare `modifier: Modifier = Modifier` after required parameters and before content lambdas, then apply it to the root layout's modifier argument. Place the caller's modifier first in the chain so caller-provided size and padding override the composable's defaults.

How do I build a conditional modifier chain in Compose without var?▼

Splice the condition inline using `.then(if (condition) Modifier.background(Color.Red) else Modifier)` within a single fluent chain. The empty `Modifier` is the identity element for `.then`, so no `var` reassignment is needed.

Should a composable hardcode fillMaxWidth on its root layout?▼

No, hardcoding `.fillMaxWidth()` or padding on the root removes the layout decision from every caller. Keep only modifiers that define the composable's identity, like `.clip(CircleShape)` on an avatar, and let callers add sizing and padding.

When should I not add a modifier parameter to a composable?▼

Skip it for composables that do not emit layout, such as `@ReadOnlyComposable` accessors, `@Preview` functions, and test-only composables whose only caller is `setContent`. These have no caller that needs to position or size them.

When should a conditional stay inside a layout in Compose?▼

Keep the `if` inside when the layout carries visual semantics like modifier, contentAlignment, or arrangement arguments, when siblings exist alongside the conditional, or when both `if` and `else` branches contribute composables to the container.

How do I match a composable's height to a measured sibling in Compose?▼

Capture the size with `onSizeChanged` on the measured row and apply it on siblings inside `Modifier.layout` so only layout invalidates, not composition. Reading captured size state directly in a composable body couples it to recomposition.

Related Skills

Explore More Software Engineering Skills→
Kaito-DogiKaito-Dogi

migrate-xml-views-to-jetpack-compose

Convert XML View hierarchies to Jetpack Compose components for Android.

Community
Advanced
SermilionSermilion
13

bill-kmp-code-review-ui

Review Kotlin Multiplatform Compose UI changes for state hoisting, theming, and accessibility.

Community
Advanced
soygabimorenosoygabimoreno

compose-state-deferred-reads

Defer Compose state reads from composition into layout or draw blocks.

Community
Advanced
oscardlfroscardlfr
1

generate-rules

Generate Detekt custom lint rules from pattern documentation as Kotlin source files.

Community
Advanced