skills.rest
kabindra-shrestha
kabindra-shresthaCOMMUNITY
Explore all skills by this author →
GitHub

styles

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

3|Updated Aug 4, 2024
Search Tags:#theming#design system#migration#android#jetpack compose#styles api#modifier.styleable
One-click install
npx skills add https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform --skill styles-kabindra-shrestha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styles
Source: https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform/tree/main/.agents/skills/jetpack-compose/theming/styles
Command: npx skills add https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform --skill styles-kabindra-shrestha

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 into reusable, themeable 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 holder exposed through a custom theme, with StyleScope extensions for accessing design tokens. - Step-by-step component migration: Removes styling parameters, adds a Style parameter, wires MutableStyleState for interaction states, applies Modifier.styleable, and validates with screenshot tests. - Use Case: Migrate a CustomButton with hardcoded backgroundColor, shape, and textStyle parameters into a styleable component whose defaults live in a theme-level buttonStyle with disabled-state handling. ## Quick Start Migrate my CustomButton composable to use the Jetpack Compose Styles API with a theme-level style definition.

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 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 defaults into a Style in ComponentStyles.kt.

What Compose version is required for the Styles API?▼

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

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.

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; Material support is planned for future releases.

How do I animate style changes on interaction states?▼

Wrap properties inside a state block like pressed or hovered with the animate { } API, which handles transitions automatically. You can pass an animationSpec such as spring to control duration and curve.

What are the limitations of the Compose Styles API?▼

Styles are experimental and limited to visual configuration like backgrounds, padding, and borders. They cannot handle click logic, gestures, or accessibility semantics, and resolving a Style is more expensive than applying a single modifier.

Related Skills

Explore More Software Engineering Skills→
Zeyad-37Zeyad-37

android-compose-theming

Migrate Android custom components to the Jetpack Compose Styles API with theme-level styling.

Community
Advanced
fornewidfornewid
5

Migrate XML Views to Jetpack Compose

Migrate XML Android Views to Jetpack Compose with screenshot validation.

Community
Intermediate
kabirnayeem99kabirnayeem99
28

styles

Integrate Jetpack Compose Styles API for theme-aware component styling.

Community
Intermediate
uyelikaniluyelikanil

styles

Integrate the Jetpack Compose Styles API into Android projects.

Community
Advanced