Enforce stateless design and state hoisting in Jetpack Compose UIs.
npx skills add https://github.com/thinhtt264/Snaplet-App --skill compose-ui
Please help me install this Agent Skill. Skill: compose-ui Source: https://github.com/thinhtt264/Snaplet-App/tree/main/.cursor/skills/compose-ui Command: npx skills add https://github.com/thinhtt264/Snaplet-App --skill compose-ui
Jetpack Compose is powerful but can become hard to maintain without proper patterns. This Skill provides best practices for stateless UI through state hoisting, proper modifier usage, performance optimizations, and consistent theming to create scalable, testable Composables.
Use cases include creating reusable UI components, refactoring screens to improve testability, and implementing design system components across features.
High-intent search queries and answers about installing and using this skill.
State hoisting in Jetpack Compose pushes state up to callers and passes data down via parameters. This stateless design pattern creates scalable, testable Composables by separating state management from UI rendering logic.
Optimize Jetpack Compose performance by using remember to store values, derivedStateOf to limit recompositions, and stable lambdas. These techniques prevent redundant UI redraws and improve rendering efficiency across app features.
Apply MaterialTheme.colorScheme and typography guidelines to ensure consistent theming across shared UI components. Organize reusable Composables by following Material design standards and adding private previews for public interfaces.
Proper Modifier usage in Jetpack Compose requires accepting a modifier: Modifier = Modifier parameter and applying it to the root layout. This pattern ensures Composables remain flexible and reusable across different parent layouts.
Use derivedStateOf in Jetpack Compose when a calculated value depends on other states but changes less frequently than its dependencies. This prevents unnecessary recompositions by only triggering updates when the derived result actually changes.
Refactoring Jetpack Compose screens to stateless design improves testability by pushing state up to callers. This separation allows UI components to be tested independently through parameterized value and onValueChange callbacks.
patlar104Implement Material Design 3 theming and components in Jetpack Compose.
obraEnforce test-first development using the red-green-refactor cycle.
ROYCE-8425Manage structured concurrency with Kotlin coroutines and Flow reactive streams.
maxrave-devConvert Android XML layouts and View widgets into Jetpack Compose code.
