skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

styles

Migrate Jetpack Compose components to the experimental Styles API with unified theming.

Updated Mar 12, 2026
Search Tags:#theming#design system#migration#android#jetpack compose#styles api#modifier.styleable
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill styles-ravitejakarra24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styles
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/pi/.pi/agent/skills/styles
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill styles-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Migrating custom Android design system components to the Jetpack Compose Styles API involves dependency upgrades, experimental compiler opt-ins, theme restructuring, and per-component refactoring that is easy to get wrong without a guided workflow. ## Core Features & Use Cases - Guided Migration Workflow: Step-by-step process covering dependency upgrades, compiler opt-in flags, ComponentStyles setup, and per-component conversion to Modifier.styleable. - State-Based Styling: Instructions for wiring MutableStyleState with interaction sources to handle pressed, hovered, focused, and disabled states, plus built-in animate blocks. - Theme Integration: Patterns for exposing component styles through a custom theme with StyleScope extensions that read CompositionLocal design tokens. - Use Case: You maintain a custom Compose design system with hardcoded styling parameters on components like CustomButton. Use this Skill to remove those parameters, centralize defaults in a ComponentStyles file, and validate visual parity with screenshot tests. ## Quick Start Migrate my CustomButton composable to use the Jetpack Compose Styles API with a style parameter 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 a custom Compose component to the Styles API?▼

Remove individual styling parameters like backgroundColor and shape, add a style parameter defaulting to Style, create a MutableStyleState from the interaction source, apply Modifier.styleable on the root element, and move hardcoded defaults into a ComponentStyles file.

What are the requirements for using the Jetpack Compose Styles API?▼

The project needs compileSdk 37 or higher, androidx.compose.foundation version 1.12.0-alpha01 or higher (or Compose BOM 2026.04.01+), and a compiler opt-in flag for ExperimentalFoundationStyleApi in build.gradle.kts.

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, and projects using MaterialTheme from Material 2 should migrate to Material 3 first.

How do I handle pressed and hovered states with Compose Styles?▼

Connect a MutableInteractionSource to a MutableStyleState, pass it to Modifier.styleable, then use state blocks like pressed, hovered, and focused inside the Style definition. Wrap properties in animate blocks for automatic transitions.

Related Skills

Explore More Software Engineering Skills→
fornewidfornewid
5

https://developer.android.com/agents/skills/jetpack-compose/theming/styles/skill

Migrate Jetpack Compose custom component styling to the experimental Styles API.

Community
Advanced
shirulotshirulot

migrate-xml-views-to-jetpack-compose

Convert Android XML layout files to Jetpack Compose components.

Community
Advanced
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
androidandroid
6.6k

styles

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

Official
Intermediate