compose-slot-api-pattern

Convert primitive parameters into composable slots for reusable Jetpack Compose components.

908|42|Updated May 12, 2026
One-click install
npx skills add https://github.com/chrisbanes/skills --skill compose-slot-api-pattern-chrisbanes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-slot-api-pattern
Source: https://github.com/chrisbanes/skills/tree/main/skills/compose-slot-api-pattern
Command: npx skills add https://github.com/chrisbanes/skills --skill compose-slot-api-pattern-chrisbanes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reusable Jetpack Compose components often hard-code content shapes; this skill helps convert primitive parameters and boolean flags into composable slots, enabling flexible caller-driven layouts.

Core Features & Use Cases

  • Slot-based content: replace primitive fields with @Composable slots to support diverse layouts.
  • Nullable optional slots: use (@Composable () -> Unit)? = null to avoid unnecessary layout space.
  • Scoped slots: apply receiver scope to allow layout-aware slot content.
  • Centralized defaults: colocate common visuals in a XxxDefaults object for consistency.

Quick Start

Create a reusable Compose component by replacing primitive parameters with slot-based content and optional trailing content.

Frequently Asked Questions about compose-slot-api-pattern

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

FAQPage Schema
How do I design reusable Jetpack Compose components with slot APIs?

Replace primitive content parameters and boolean shape flags with @Composable slots to create reusable Jetpack Compose components. This enables flexible, caller-driven layouts instead of hard-coded content shapes across varying visual regions.

What is a nullable slot in Compose and when should I use it?

A nullable slot in Compose uses the type (@Composable () -> Unit)? = null for optional content. You should use it to provide optional trailing content while avoiding unnecessary layout space when the caller does not supply the slot.

How do I apply receiver scope to a Compose slot API?

Apply a receiver scope to a Compose slot API to allow layout-aware slot content. This pattern enables the passed composable content to access specific layout scopes, providing contextual awareness within the reusable component's structure.

How do I manage default values for optional Compose slots?

Manage default values for optional Compose slots by colocating common visuals in a centralized XxxDefaults object. This ensures consistent component styling across multiple call sites while keeping the primary slot parameters clean.

When should I replace boolean flags with slots in Kotlin UI design?

Replace boolean flags with slots in Kotlin UI design when a component has multiple optional content regions across multiple call sites. Converting boolean shape flags into composable slots enables flexible caller-driven layouts instead of rigid visual variations.