skills.rest
ekawijayasusilo
ekawijayasusiloCOMMUNITY
Explore all skills by this author →
GitHub

styles

Migrate Jetpack Compose components to themeable Styles using the Experimental Foundation Styles API.

Updated May 22, 2026
Search Tags:#theming#jetpack compose#styles api#modifier.styleable#state styling#compose migration#experimental ui
One-click install
npx skills add https://github.com/ekawijayasusilo/kmp_template --skill styles-ekawijayasusilo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styles
Source: https://github.com/ekawijayasusilo/kmp_template/tree/main/.claude/skills/styles
Command: npx skills add https://github.com/ekawijayasusilo/kmp_template --skill styles-ekawijayasusilo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of inconsistent, hard-to-maintain UI styling in Jetpack Compose by replacing scattered modifier-based styling with centralized Styles that support theming and stateful visuals.

Core Features & Use Cases

  • Dependency and API setup: Upgrade Compose and enable the required experimental Style API.
  • Theme-driven component styling: Define reusable Style instances (ComponentStyles) and expose them from your theme.
  • Component migration workflow: Convert custom components to accept Style, replace hardcoded parameters with style attributes, and apply Modifier.styleable for styleable components with interaction states.

Quick Start

Use the styles skill to migrate a custom component by creating a ComponentStyles.kt file, moving hardcoded visual values into Style blocks, adding a style: Style = Style parameter, and wiring interaction-based state styling through MutableStyleState and Modifier.styleable.

Frequently Asked Questions about styles

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

FAQPage Schema
How do I migrate Jetpack Compose components to use the Styles API?▼

Migrating Jetpack Compose components to the Styles API involves creating a ComponentStyles.kt file, moving hardcoded visual values into Style blocks, adding a style: Style parameter, and wiring interaction states through Modifier.styleable.

What is the best way to centralize Jetpack Compose theming and state styling?▼

Centralizing Jetpack Compose theming uses the Experimental Foundation Styles API to replace scattered modifier parameters with reusable Style instances exposed from your theme.

Does the Compose Styles API require opt-in for experimental features?▼

Yes, using the Compose Styles API requires opting in to ExperimentalFoundationStyleApi and upgrading your Compose dependencies to access androidx.compose.foundation.style.Style.

How do I handle pressed, hovered, and focused interaction states in Compose styling?▼

Handling pressed, hovered, and focused interaction states in Compose styling uses MutableStyleState combined with Modifier.styleable to apply stateful visual changes to styleable components.

When should I replace ad-hoc modifier parameters with ComponentStyles in Android?▼

Replacing ad-hoc modifier parameters with ComponentStyles is needed when your Android project requires consistent theming and reusable component style definitions across a custom design system.

Related Skills

Explore More Software Engineering Skills→
premex-abpremex-ab
1

styles

Migrate Jetpack Compose components to theme-driven Style definitions.

Official
Intermediate
androidandroid
6.6k

styles

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

Official
Intermediate
mymx2mymx2
4

styles

Integrate the Jetpack Compose Styles API into Android projects.

Community
Advanced
aaronjullger-lgtmaaronjullger-lgtm

ui-primitive-consolidation

Consolidate scattered UI patterns into reusable primitives across PANaCEa.

Community
Advanced