skills.rest
premex-ab
premex-abOFFICIAL
Explore all skills by this author →
GitHub

styles

Migrate Jetpack Compose components to theme-driven Style definitions.

1|Updated Mar 17, 2026
Search Tags:#theming#jetpack compose#ui migration#styles api#modifier.styleable#state-based styling#experimental api
One-click install
npx skills add https://github.com/premex-ab/claude-marketplace --skill styles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styles
Source: https://github.com/premex-ab/claude-marketplace/tree/main/plugins/android-styles/skills/styles
Command: npx skills add https://github.com/premex-ab/claude-marketplace --skill styles

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Adopting Jetpack Compose Styles reduces repeated styling and enables consistent, theme-driven UI—but migration is non-trivial and requires careful dependency, compiler, and code refactoring.

Core Features & Use Cases

  • Dependency and API enablement: Guides you through required Compose versions and the exact Styles API import (androidx.compose.foundation.style.Style), including experimental API opt-in.
  • Theme-first migration: Shows how to structure component styles (via a ComponentStyles.kt file) and connect them to custom themes for design-token-driven styling.
  • Component refactor workflow: Provides an end-to-end approach to replace hard-coded styling parameters with a style: Style parameter and apply Modifier.styleable() with state tracking using StyleState for interaction states.
  • Validation strategy: Recommends build checks plus screenshot-based visual parity validation (where possible) to prevent regressions.

Quick Start

Use the styles skill to migrate a custom design system component in your Jetpack Compose project to use the Styles API and stateful Modifier.styleable() styling.

Frequently Asked Questions about styles

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

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

To enable the Jetpack Compose Styles API, you must update dependencies to compatible Compose foundation versions, require `compileSdk` >= 37, and enable the exact experimental API opt-in compiler flag.

What's the best way to structure theme-driven styling in Jetpack Compose?▼

The best way to structure theme-driven styling in Jetpack Compose is by creating a `ComponentStyles.kt` file to define styles and connect them to custom themes for design-token-driven styling across your UI.

How do I handle interaction states with Modifier.styleable in Compose?▼

You handle interaction states with `Modifier.styleable()` by using `StyleState` to track state changes, replacing hard-coded styling parameters with state-based styling driven by the `Style` definition.

Do I need a specific compileSdk version to use the Compose Styles API?▼

Yes, using the Compose Styles API requires a `compileSdk` version of at least 37, along with compatible Compose foundation style versions and the experimental opt-in flag to ensure correctness.

How do I validate visual parity when replacing hard-coded styling with Compose Styles?▼

You validate visual parity when replacing hard-coded styling with Compose Styles by performing build checks and using screenshot-based visual validation to prevent UI regressions during component migration.

Related Skills

Explore More Software Engineering Skills→
uyelikaniluyelikanil

styles

Integrate the Jetpack Compose Styles API into Android projects.

Community
Advanced
SethGammonSethGammon
820

live-preview

Automate visual verification of UI components during build and deployment.

Community
Intermediate
inehemiasminehemiasm

styles

Migrate Android UI components to reusable Jetpack Compose Styles configurations.

Community
Advanced
androidandroid
6.6k

styles

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

Official
Intermediate