skills.rest
kariemSeiam
kariemSeiamCOMMUNITY
Explore all skills by this author →
GitHub

styles

Migrate Jetpack Compose components to the experimental Styles API with theme-level style definitions.

1|Updated Jun 9, 2026
Search Tags:#theming#design system#migration#android#jetpack compose#styles api#modifier.styleable
One-click install
npx skills add https://github.com/kariemSeiam/android-claw --skill styles-kariemseiam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styles
Source: https://github.com/kariemSeiam/android-claw/tree/main/skills/installed/theming-styles
Command: npx skills add https://github.com/kariemSeiam/android-claw --skill styles-kariemseiam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Hardcoded styling parameters scattered across custom Compose components make design systems hard to maintain and theme consistently. This Skill guides the migration of custom components to the Jetpack Compose Styles API, centralizing visual definitions in theme-level Style objects. ## Core Features & Use Cases - Dependency and Compiler Setup: Upgrades to Compose foundation 1.12.0-alpha01 or BOM 2026.04.01 and configures the ExperimentalFoundationStyleApi opt-in compiler flag. - ComponentStyles Architecture: Creates a centralized ComponentStyles.kt file exposing Style objects through the custom theme with StyleScope extension accessors for design tokens. - Component Migration Workflow: Replaces hardcoded styling parameters with a style parameter, wires MutableStyleState to interaction sources, applies Modifier.styleable, and validates results with screenshot tests. - Use Case: A team maintaining a custom design system like Jetsnack migrates CustomButton to accept a Style parameter, moves background, shape, and padding defaults into ComponentStyles, and verifies visual parity against baseline screenshots. ## Quick Start Migrate my CustomButton composable to use the Compose Styles API with a centralized ComponentStyles file.

Frequently Asked Questions about styles

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

FAQPage Schema
How do I migrate a custom Compose component to the Styles API?▼

Remove individual styling parameters like backgroundColor and shape, add a style: Style = Style parameter, create a MutableStyleState from the interaction source, apply Modifier.styleable on the root element, and move hardcoded defaults into a Style in ComponentStyles.kt.

What is Modifier.styleable in Jetpack Compose?▼

Modifier.styleable applies a Style to layout composables that lack a built-in style parameter. It accepts a StyleState for interaction-driven styling and one or more Style objects, with later properties overriding earlier ones.

What Compose version is required for the Styles API?▼

The Styles API requires compileSdk 37 or higher and androidx.compose.foundation:foundation 1.12.0-alpha01 or higher, or Compose BOM 2026.04.01 or higher. You must also opt in to ExperimentalFoundationStyleApi via compiler freeCompilerArgs.

Does the Styles API support Material Design components?▼

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.

When should I use Styles versus Modifiers in Compose?▼

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.

How do I animate style changes on interaction states?▼

Wrap properties inside a state block like pressed or hovered with the animate function, optionally passing an animationSpec such as spring. The Styles API handles the transition automatically without animate*AsState boilerplate.

Related Skills

Explore More Software Engineering Skills→
iFor-LuxiFor-Lux

m3-expressive

Implement Material 3 Expressive UI patterns in Android Jetpack Compose.

Community
Advanced
Zeyad-37Zeyad-37

android-xml-to-compose

Migrates Android XML View layouts to Jetpack Compose through a structured ten-step workflow.

Community
Advanced
leogallegoleogallego
1

styles

Adopt the Jetpack Compose Styles API for centralized, themeable component appearances.

Community
Advanced
androidandroid
6.6k

styles

Migrate custom Jetpack Compose components and theming to the Experimental Styles API.

Official
Intermediate