skills.rest
Zeyad-37
Zeyad-37COMMUNITY
Explore all skills by this author →
GitHub

android-compose-theming

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

Updated Apr 21, 2026
Search Tags:#theming#design system#migration#android#jetpack compose#styles api#modifier.styleable
One-click install
npx skills add https://github.com/Zeyad-37/tech-agency --skill android-compose-theming-zeyad-37
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-compose-theming
Source: https://github.com/Zeyad-37/tech-agency/tree/main/.claude/skills/android-compose-theming
Command: npx skills add https://github.com/Zeyad-37/tech-agency --skill android-compose-theming-zeyad-37

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 Android components to the experimental 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 ComponentStyles.kt file exposing Style definitions through a custom theme with StyleScope extension accessors for colors, typography, and shapes. - Step-by-step component migration: Removes hardcoded 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 Compose Styles API with a theme-level style definition.

Frequently Asked Questions about android-compose-theming

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 definition in ComponentStyles.kt.

What is Modifier.styleable in Jetpack Compose?▼

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

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 Compose Styles API support Material Design components?▼

No, this skill only supports custom UI components and custom themes. Material Design component Styles are not supported, and projects using Material 2 should migrate to Material 3 first.

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.

Related Skills

Explore More Software Engineering Skills→
AI-Foundry-CoreAI-Foundry-Core
4

mobile-android-design

Implement Material Design 3 Android interfaces with Jetpack Compose.

Official
Advanced
soygabimorenosoygabimoreno

migrate-xml-views-to-jetpack-compose

Migrate Android XML layout Views into Jetpack Compose composables with screenshot validation.

Community
Intermediate
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
androidandroid
6.6k

styles

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

Official
Intermediate