compose-slot-api-pattern
This skill covers the slot API pattern for building reusable Jetpack Compose components. Learn to replace primitive content parameters and boolean flags with composable slots, use scope receivers to expose layout capabilities, and organize defaults in companion objects. The pattern keeps call sites clean while preserving full flexibility for unusual cases.
Compose: slot API pattern teaches you to design reusable Jetpack Compose components by replacing primitive parameters with composable slots.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-21
Compose: slot API pattern teaches you to design reusable Jetpack Compose components by replacing primitive parameters with composable slots. This skill covers the slot API pattern for building reusable Jetpack Compose components. Learn to replace primitive content parameters and boolean flags with composable slots, use scope receivers to expose layout capabilities, and organize defaults in companion objects. The pattern keeps call sites clean while preserving full flexibility for unusual cases.
Use it when
- The compose-slot-api-pattern recommends replacing primitive params with composable slots when you need to support rich.
- compose-slot-api-pattern covers optional slots by making them nullable or providing sensible defaults in a companion XxxDefaults object.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
chrisbanes/skills/compose-slot-api-pattern · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you design composable with slots in Jetpack Compose?
compose-slot-api-pattern teaches you to replace primitive content parameters with composable slots, which are lambda parameters that accept @Composable functions. Instead of passing strings or booleans, you pass composable blocks that render custom content. This keeps your component flexible while maintaining a clean API. Use scope receivers to expose layout capabilities to slot implementations, and organize default content in companion objects using the XxxDefaults pattern for consistency.
When should you replace primitive parameters with slots in Compose?
The compose-slot-api-pattern recommends replacing primitive params with composable slots when you need to support rich, custom content beyond simple text or flags. If a parameter controls what appears on screen—like a title, icon, or supporting content—make it a slot. This approach scales better than adding boolean flags for each variation. Slots let consumers compose arbitrary UI while keeping your component's core layout logic intact and reusable.
What are best practices for optional slots and scope receivers?
compose-slot-api-pattern covers optional slots by making them nullable or providing sensible defaults in a companion XxxDefaults object. Scope receivers let you expose layout information (like constraints or measurements) to slot implementations without polluting the global scope. Keep optional slots truly optional—don't force consumers to provide content they don't need. Use scope receivers sparingly to avoid overwhelming the lambda signature and maintain readability of slot implementations.
How does the XxxDefaults pattern work for composable default content?
compose-slot-api-pattern explains the XxxDefaults pattern as a companion object that holds default implementations for all slots in a component. Instead of embedding defaults in function signatures, centralize them in XxxDefaults so consumers can easily override or compose with existing defaults. This keeps your composable function signature clean and makes it obvious what customization points exist. The pattern is especially useful for complex components with many optional slots.
What naming conventions should you follow for composable slots?
compose-slot-api-pattern emphasizes clear, descriptive slot names that reflect their purpose and position in the layout. Use patterns like headlineContent, supportingContent, or trailingIcon to make intent obvious. Avoid generic names like content or children when multiple slots exist. Consistent naming across your component library helps developers quickly understand what each slot does and where it appears, reducing API friction and improving the reusability of your Compose components.
What anti-patterns should you avoid in composable API design?
compose-slot-api-pattern identifies red flags like overloading a single slot with too many responsibilities, using boolean flags instead of slots, or exposing internal layout details through scope receivers unnecessarily. Avoid slots that are rarely customized—keep your API focused on genuine extension points. Don't mix primitive parameters and slots haphazardly; choose one pattern per concern. Watch for slots that force consumers into complex lambda nesting or require deep knowledge of your component's internals.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Compose: slot API pattern
Core principle
A reusable Compose component describes layout structure. Callers provide variable visual content through slots.
API review procedure
- Confirm the component is reusable. For a true single-use composable, do not add slot ceremony.
- Mark which regions vary by caller: headline, supporting text, leading visual, trailing visual, actions, body.
- Replace caller-controlled primitive content and shape flags with slots.
- Add receiver scopes only when the slot is emitted inside a layout whose scope APIs callers should use.
- Make absent optional regions nullable (
null), so the component can omit their containers and spacing. - Put repeated default content or tokens in
XxxDefaults. - Pair this with the
modifierrules incompose-modifier-and-layout-style.
1. Replace primitive content with @Composable slots
Where the component asks for caller-controlled content, prefer a
(truncated - see the full file via the links below)
File tree — 1 file
skills/compose-slot-api-pattern/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn how to design reusable Compose components using slot APIs”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill shows how to build flexible, reusable Compose components by delegating content to callers through `@Composable` lambda slots instead of accumulating primitive parameters. You'll learn to structure components around layout responsibility, use scope receivers to expose layout features, and co-locate sensible defaults in a `Defaults` object—the pattern Material 3's `ListItem` exemplifies.
This skill covers the core patterns for writing composables that respect the parent's layout choices. You'll learn to declare a modifier parameter with a default value, apply it to the root layout first, avoid hardcoding positioning decisions, and construct modifier chains as fluent expressions rather than step-by-step reassignments.
Learn to craft responsive Android interfaces using Jetpack Compose and Material Design 3 (Material You). This skill covers adaptive layouts for phones, tablets, and foldables, dynamic color theming, and accessibility best practices.
Master image loading in Jetpack Compose using Coil's AsyncImage component, painter variants, and subcomposition APIs. This skill covers sizing strategies, placeholder and error state handling, accessibility semantics, and list performance optimization to build stable, responsive image surfaces.
Styles guides you through adopting Jetpack Compose's Styles API for custom UI components and themes. Follow step-by-step workflows to upgrade dependencies, establish ComponentStyles, and migrate components using Modifier.styleable to replace hard-coded styling parameters with unified style attributes.
This skill teaches you to develop Android XR augmented experiences for display glasses using Jetpack Compose Glimmer, Google's UI toolkit designed for transparent, additive displays. You'll master Glimmer design principles, theming with GlimmerTheme, and component implementation while adhering to glasses-specific constraints like minimum text legibility and black backgrounds. Use it to create lightweight, real-world-aware apps that project from a host device to connected eyewear.