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
Install
chrisbanes/skills/compose-slot-api-pattern · repository language: Python
git clone https://github.com/chrisbanes/skills
cp -r skills/skills/compose-slot-api-pattern ~/.claude/skills/compose-slot-api-patternFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/compose-slot-api-pattern/SKILL.md