jetpack-compose-screens

Applies Jetpack Compose conventions for building stateless Android screens with Material 3.

Updated May 9, 2026
One-click install
npx skills add https://github.com/Bumh3rr/solvyx-app --skill jetpack-compose-screens-bumh3rr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jetpack-compose-screens
Source: https://github.com/Bumh3rr/solvyx-app/tree/main/.opencode/skill/jetpack-compose-screens
Command: npx skills add https://github.com/Bumh3rr/solvyx-app --skill jetpack-compose-screens-bumh3rr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent Jetpack Compose screens requires remembering many project conventions around state handling, layouts, animations, and performance. This Skill encodes the Solvyx project conventions so every new or modified screen follows the same patterns without re-deriving them. ## Core Features & Use Cases - Screen Templates: Provides a canonical screen structure with Scaffold, ViewModel state collection via collectAsStateWithLifecycle, and Loading/Loaded/Error state handling. - Layout & State Patterns: Covers Box, Column, LazyColumn, LazyVerticalGrid, remember, rememberSaveable, derivedStateOf, LaunchedEffect, and DisposableEffect usage. - Performance & Anti-Patterns: Enforces keys in lazy lists, derivedStateOf for filtered lists, immutable parameters, and lists common mistakes like hardcoded strings, hardcoded colors, and Material 2 imports. - Use Case: When asked to create a new settings screen, the Skill produces a stateless Composable with previews, Material 3 theming, string resources, and proper ViewModel wiring. ## Quick Start Create a new Jetpack Compose screen for the profile feature following the project conventions in this skill.

Frequently Asked Questions about jetpack-compose-screens

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

FAQPage Schema
How do I structure a Jetpack Compose screen with a ViewModel?▼

Use a stateless root Composable that collects state with collectAsStateWithLifecycle from a hiltViewModel, then render Loading, Loaded, or Error content inside a Scaffold. Pass callbacks down and keep logic in the ViewModel.

How to optimize LazyColumn performance in Jetpack Compose?▼

Always provide a stable key in items(), such as key = { it.id }, so Compose can skip unnecessary recompositions. Combine this with derivedStateOf for filtered lists and remember for expensive computations.

Should I use collectAsState or collectAsStateWithLifecycle in Compose?▼

Use collectAsStateWithLifecycle. It stops collection when the lifecycle is inactive, avoiding wasted work and potential leaks, whereas collectAsState keeps collecting regardless of lifecycle state.

Can I hardcode strings and colors in Jetpack Compose UI?▼

No. Strings must come from strings.xml via stringResource for internationalization, and colors must come from MaterialTheme.colorScheme so dark mode and theming work correctly.

Why does my Compose list recompose on every state change?▼

Missing keys in LazyColumn items or unstable parameter types prevent Compose from skipping recompositions. Add stable keys and use ImmutableList from kotlinx.collections.immutable for list parameters.