styles

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

6.6k|388|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/android/skills --skill styles-android
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: styles
Source: https://github.com/android/skills/tree/main/jetpack-compose/theming/styles
Command: npx skills add https://github.com/android/skills --skill styles-android

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Jetpack Compose theming often relies on scattered hard-coded styling and modifier-heavy patterns that are hard to unify across components, so it becomes difficult to migrate a design system to a consistent, theme-driven approach.

Core Features & Use Cases

  • Dependency upgrades & experiment enablement: Guides you to meet the required compile/Compose Foundation versions and opt into the experimental Styles APIs.
  • Theme integration with ComponentStyles: Helps you create a central ComponentStyles.kt, expose it through your custom theme, and access theme tokens from StyleScope.
  • Component migration to Styles API: Provides an end-to-end workflow for migrating custom components to accept a style: Style parameter or apply styling via Modifier.styleable(), including state-based interaction styling using StyleState.

Quick Start

Tell your AI to migrate your custom Jetpack Compose button from hard-coded parameters to a shared ComponentStyles.kt Style that supports enabled/pressed/hovered styling.

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 the Styles API?

Migrating Jetpack Compose components to the Styles API involves replacing hard-coded styling by creating a central ComponentStyles module, exposing it through your theme, and updating components to accept a Style parameter or apply Modifier.styleable with StyleState tracking.

What is the best way to unify hard-coded styling in Jetpack Compose theming?

Unifying hard-coded styling in Jetpack Compose theming is achieved by migrating to a theme-driven approach using the experimental Styles API, which replaces scattered modifiers with a central ComponentStyles layer exposed via your custom theme.

How do I handle state-based interaction styling when using Modifier.styleable in Compose?

Handling state-based interaction styling with Modifier.styleable in Compose requires tracking component states like enabled, pressed, or hovered using StyleState to apply the correct style tokens from your ComponentStyles layer.

Do I need experimental opt-in to use the Jetpack Compose Styles API?

Yes, using the Jetpack Compose Styles API requires experimental opt-in and meeting specific compile and Compose Foundation version dependencies to access the experimental Styles APIs for your custom components.

Can I migrate Material Design components using the Compose Styles API?

The Compose Styles API migration workflow skips unsupported Material Design component Styles, targeting custom UI components and custom themes to wire Style tokens into a component-wide theming layer instead.

How does ComponentStyles integrate with a custom Jetpack Compose theme?

ComponentStyles integrates with a custom Jetpack Compose theme by creating a central ComponentStyles.kt file, exposing it through your theme provider, and allowing components to access theme tokens directly from StyleScope.