Migrate Jetpack Compose components to the Styles API with theme-level style definitions.
npx skills add https://github.com/IsKenKenYa/skills --skill styles-iskenkenya
Please help me install this Agent Skill. Skill: styles Source: https://github.com/IsKenKenYa/skills/tree/main/skills/android/jetpack-compose/theming/styles Command: npx skills add https://github.com/IsKenKenYa/skills --skill styles-iskenkenya
style: Style = Style parameter, wire MutableStyleState for interaction states, and apply Modifier.styleable. - Theme Integration: Establishes a ComponentStyles holder exposed through a custom theme, with StyleScope extensions for accessing design tokens. - Use Case: You maintain a custom design system like Jetsnack and want to replace per-component backgroundColor, shape, and textStyle parameters with unified Style definitions that support pressed, hovered, and disabled states with built-in animations. ## Quick Start Migrate my CustomButton composable to use the Jetpack Compose Styles API and move its hardcoded styling into a shared ComponentStyles file.High-intent search queries and answers about installing and using this skill.
Remove styling parameters like backgroundColor and shape from the signature, add a style parameter defaulting to Style, create a MutableStyleState from the interaction source, apply Modifier.styleable on the root element, and move default values into a Style definition in ComponentStyles.kt.
Modifier.styleable applies a Style to layout composables that lack a built-in style parameter. It accepts a StyleState for state-based styling and one or more Style objects, applying visual properties like background, padding, and shape to the container.
The project needs compileSdk 37 or higher and androidx.compose.foundation:foundation 1.12.0-alpha01 or higher, or Compose BOM 2026.04.01+. You must also opt in via the compiler flag -opt-in=androidx.compose.foundation.style.ExperimentalFoundationStyleApi.
Use Styles for theme-wide visual properties, overriding component defaults, and high-performance animations that skip the composition phase. Use Modifiers for behaviors like click handling, gestures, one-off layouts, and additive properties.
No, this skill only supports custom UI components and custom themes. Material Design component Styles are not supported yet, and the API is experimental and likely to change in future releases.
Wrap property changes inside a state block like pressed or hovered with the animate function. The animate API accepts an optional animationSpec such as spring to control duration and curve, handling transitions automatically.
Bumh3rrImplements Material 3 theming conventions for Jetpack Compose with ColorScheme, Typography, and Shapes.
soygabimorenoMigrate Android XML layout Views into Jetpack Compose composables with screenshot validation.
ClankerGuruBuild Compose UI toolkits using Foundation primitives without Material dependencies.
androidMigrate custom Jetpack Compose components and theming to the Experimental Styles API.