skills.rest
soygabimoreno
soygabimorenoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

compose-modifier-and-layout-style

Guide Compose layout code to apply root modifiers and hoist conditional containers.

Updated Aug 23, 2026
Search Tags:#code review#kotlin#jetpack compose#conditional rendering#modifier#layout APIs
One-click install
npx skills add https://github.com/soygabimoreno/Los-ANDROIDES --skill compose-modifier-and-layout-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-modifier-and-layout-style
Source: https://github.com/soygabimoreno/Los-ANDROIDES/tree/main/.agents/skills/compose-modifier-and-layout-style
Command: npx skills add https://github.com/soygabimoreno/Los-ANDROIDES --skill compose-modifier-and-layout-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents Compose layout components from locking in placement, sizing, and padding decisions, which makes reuse, composition, and layout changes painful during development and code review.

Core Features & Use Cases

  • Declare and apply a modifier on the root so callers control placement and constraints rather than the composable hardcoding layout behavior.
  • Build modifier chains cleanly as one fluent expression (avoid var reassignments) and format long chains for readability.
  • Hoist “only-if” layouts by moving a lone if outside the container when the layout exists solely to hold conditional content.

Quick Start

When writing or reviewing a layout composable, ensure it has a modifier: Modifier = Modifier parameter, apply that modifier to the root first, avoid hardcoded sizing like .fillMaxWidth() on the root, and don’t wrap a container around a single conditional—hoist the if instead.

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 structure Jetpack Compose modifier parameters for reusable layout components?▼

To structure Jetpack Compose modifier parameters, declare a `modifier: Modifier = Modifier` parameter and apply it to the root composable first. This lets callers control placement and sizing instead of the component hardcoding layout behavior.

Why should I avoid hardcoded sizing like fillMaxWidth on the root of a Composable function?▼

Avoid hardcoded sizing like fillMaxWidth on the root because it locks in layout decisions, making Jetpack Compose components painful to reuse. Apply the caller's modifier to the root instead to ensure flexible composition and layout changes.

What is the best way to build a long modifier chain in Jetpack Compose?▼

The best way to build a long modifier chain is as one fluent expression. Avoid stepwise `var` reassignments when chaining modifiers in Jetpack Compose to keep layout code clean, readable, and caller-friendly.

When should I hoist an if statement outside a Compose layout container?▼

Hoist an `if` statement outside a Compose layout container when the container exists solely to hold conditional content. Move the lone `if` outside instead of wrapping a Box or Column around a single conditional element.

Does this approach apply to all Jetpack Compose layout components?▼

Yes, this approach applies to writing and reviewing @Composable layout functions that emit UI containers. It specifically targets Box, Column, Row, Lazy* components, and material layout components accepting modifier arguments.

Related Skills

Explore More Software Engineering Skills→
leogallegoleogallego
1

compose-modifier-and-layout-style

Enforce Jetpack Compose modifier parameters and root-level application in composables.

Community
Intermediate
chrisbaneschrisbanes
908

compose-modifier-and-layout-style

Enforce public modifier parameters on Jetpack Compose composables and apply them to root layouts.

Community
Advanced
costularcostular
13

compose-modifier-and-layout-style

Analyzes Jetpack Compose layouts for modifier and structure issues.

Community
Intermediate
decoutkhanqindevdecoutkhanqindev
8

ordering-modifier-chains

Diagnose and resolve Jetpack Compose Modifier ordering bugs affecting paint regions, click areas, clipping, and graphicsLayer scope.

Community
Intermediate