compose-slot-api-pattern
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.
Compose: slot API pattern teaches you to replace primitive content parameters with composable lambda slots for truly reusable components.
AI-generated summary based on this skill's SKILL.md
Install
vitorpamplona/amethyst/compose-slot-api-pattern · repository language: Kotlin
git clone https://github.com/vitorpamplona/amethyst
cp -r amethyst/.claude/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
What is the compose slot API pattern?
The compose-slot-api-pattern skill teaches 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.
How do I make composable components flexible with slot APIs?
The compose-slot-api-pattern shows how to use `@Composable` lambda slots for flexible component content. Instead of adding boolean flags or string parameters, you delegate content areas to the caller. This lets you design reusable components that accept composable functions as parameters, giving callers full control over what renders in each slot while you manage the layout structure.
What are @Composable lambda parameters and when should I use them?
compose-slot-api-pattern covers `@Composable` lambda parameters as a core technique for content delegation. These are function parameters of type `@Composable () -> Unit` that let callers pass composable content directly into your component. Use them when you want to avoid primitive parameters like booleans or strings, and instead let callers define what renders in specific layout areas.
How do I avoid primitive parameters and anti-patterns in Compose?
The compose-slot-api-pattern skill reviews component signatures to identify and fix anti-patterns like boolean flags or string parameters. Instead, use `@Composable` lambda slots to let callers provide content. This approach scales better than adding more parameters, keeps your component signature clean, and follows Material 3 patterns like `ListItem` and `TopAppBar`.
What are scope receivers and nullable slots in Compose components?
compose-slot-api-pattern explains scope receivers and nullable slots for optional composable content areas. Scope receivers (like `RowScope`) expose layout features to slot content, letting callers use modifiers specific to that layout. Nullable slots let you provide optional content areas with sensible defaults, often co-located in a `Defaults` object for consistency.
How do I refactor Compose components using the slot pattern?
The compose-slot-api-pattern teaches refactoring by replacing primitive parameters with `@Composable` lambda slots, applying scope receivers to expose layout context, and grouping defaults in a `Defaults` object. This pattern improves component reusability and scalability, following Material 3 design principles used in `ListItem` and other flexible layout components.
SKILL.md
rendered from the published skill — quoted content, verbatim
Compose: slot API pattern
Core principle
A reusable Compose component's job is to lay things out, not to enumerate what it lays out. The moment you write title: String, subtitle: String?, leadingIcon: ImageVector?, trailingIcon: ImageVector?, trailingText: String?, showSwitch: Boolean, switchValue: Boolean, onSwitchChange: (Boolean) -> Unit?, badge: String?, …, the component has stopped describing a layout and started enumerating call sites — and the next call site will need a parameter the component doesn't have.
The fix is to delegate content to the caller via @Composable lambda parameters. The component contributes structure (where the leading bit, headline, supporting bit, trailing bit go). The caller contributes everything that goes in those slots.
Material 3's ListItem is the canonical example: every visual piece is a slot (headlineContent,
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
.claude/skills/compose-slot-api-pattern/SKILL.md