styles
Styles guides you through adopting Jetpack Compose's Styles API for custom UI components and themes. Follow step-by-step workflows to upgrade dependencies, establish ComponentStyles, and migrate components using Modifier.styleable to replace hard-coded styling parameters with unified style attributes.
Styles helps you migrate custom Jetpack Compose components to the Styles API for unified theming.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-14
Styles helps you migrate custom Jetpack Compose components to the Styles API for unified theming. Styles guides you through adopting Jetpack Compose's Styles API for custom UI components and themes. Follow step-by-step workflows to upgrade dependencies, establish ComponentStyles, and migrate components using Modifier.styleable to replace hard-coded styling parameters with unified style attributes.
Use it when
- Styles provides a structured approach to managing component styling in Jetpack Compose.
- Styles offers step-by-step workflows for migration.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
android/skills/styles · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to use Compose Styles in Android?
Styles helps you adopt Jetpack Compose's Styles API for custom UI components and themes. Start by upgrading your dependencies, then establish ComponentStyles to define reusable styling attributes. Use Modifier.styleable on your components to replace hard-coded parameters with unified style attributes, enabling consistent theming across your design system.
What is the main purpose of Styles in Jetpack Compose?
Styles provides a structured approach to managing component styling in Jetpack Compose. It guides you through migrating custom Android Compose components to use the Styles API, allowing you to replace hardcoded styling parameters with unified Style attributes. This ensures consistency and maintainability across your entire UI component library.
How do I migrate to Jetpack Compose Styles?
Styles offers step-by-step workflows for migration. First, set up and configure the Styles API in your existing project by updating dependencies. Then systematically migrate your custom components using Modifier.styleable, replacing hardcoded parameters with style definitions. Styles supports state-based styling for interaction states, enabling dynamic theming based on component state.
Can Styles integrate custom theme tokens with Compose?
Yes, Styles enables integration of custom theme tokens with Compose Styles for design system consistency. By establishing ComponentStyles and using Modifier.styleable, you can centralize theme token definitions and apply them uniformly across components, ensuring your design system remains cohesive throughout your application.
What does Modifier.styleable do in Styles?
Styles uses Modifier.styleable to connect your Compose components to the Styles API framework. This modifier allows components to accept style attributes instead of hardcoded parameters, enabling unified styling management. It's the core mechanism for replacing traditional parameter-based styling with declarative style definitions.
How does Styles handle state-based styling in Compose?
Styles supports implementing state-based styling and interaction states through its Styles API integration. You can define styles that respond to component states, allowing your UI to adapt styling based on user interactions and component conditions. This approach maintains clean separation between styling logic and component behavior.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Limitations
- Warn the user that this skill is EXPERIMENTAL and requires updating to alpha version of Compose and opting in to the Experimental APIs.
- This skill only supports custom UI components and custom themes.
- This skill does not support Material Design component Styles.
Prerequisites
1. Upgrade dependencies
- The project must use
compileSdkversion 37 or higher. - The project must use
androidx.compose.foundation:foundationversion1.12.0-alpha01or higher. - Alternatively, the project must use
(truncated - see the full file via the links below)
File tree — 6 files
jetpack-compose/theming/styles/SKILL.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/designsystems/custom.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/fundamentals.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/state-animations.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/styles-vs-modifiers.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/theming.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Migrate custom Android Compose components to use the Styles API”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill guides you through converting Android XML layouts to idiomatic Jetpack Compose code. It provides layout mapping tables for common containers and widgets, attribute translation, and patterns for state migration from LiveData to Compose state. Use it for full rewrites or incremental adoption via ComposeView interop.
Master Android development using Kotlin and Jetpack Compose for declarative UI building. Learn clean architecture patterns, dependency injection with Hilt, Room database integration, and Retrofit API calls across phones, tablets, TV, Wear OS, and Android Auto.
Compose Expert is a specialized assistant for developers building UIs with Compose and Compose Multiplatform. It covers state management, animations, layouts, navigation, paging, theming, and design-to-code workflows across Android, iOS, Desktop, and Web platforms. The skill activates on Compose API mentions, design system questions, and GitHub PR reviews.
Compose Expert guides you through creating reusable visual components that work across Android and Desktop platforms. Learn when to share composables in commonMain versus keeping them platform-specific, master state patterns like remember and derivedStateOf, and apply Material3 theming consistently. The skill covers component structure, state hoisting, recomposition optimization, and custom icon creation.
Build custom message bubble rendering in CometChat Android V6 Compose by implementing BubbleFactory to handle specific message types, override individual slots (avatar, header, content, footer), and apply immutable style classes. Register factories on CometChatMessageList and return null from slot methods to fall back to defaults, or replace entire bubbles by overriding getBubbleView().
Reference guide for Material Design 3 compliance on Android, covering dynamic color theming, semantic color roles, navigation patterns for different screen sizes, and Material You implementation. Includes rules and code examples for Compose and XML layouts.
More skills Android Design (NOASSERTION) · compose-multiplatform-patterns (MIT) · display-glasses-with-jetpack-compose-glimmer (Apache-2.0) · migrate-xml-views-to-jetpack-compose (Apache-2.0) · android-compose-foundations (MIT) · android-coil-compose (MIT) · compose-slot-api-pattern (Apache-2.0)