skills.rest
soygabimoreno
soygabimorenoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

compose-ui

Define Jetpack Compose UI conventions for ViewModel state and MVI actions.

Updated Aug 23, 2026
Search Tags:#accessibility#jetpack compose#mvi#previews#ui state#lazy list keys#textfield actions
One-click install
npx skills add https://github.com/soygabimoreno/Los-ANDROIDES --skill compose-ui-soygabimoreno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-ui
Source: https://github.com/soygabimoreno/Los-ANDROIDES/tree/main/.agents/skills/compose-ui
Command: npx skills add https://github.com/soygabimoreno/Los-ANDROIDES --skill compose-ui-soygabimoreno

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Los ANDROIDES developers need consistent, maintainable Jetpack Compose UI patterns that keep Compose code “dumb,” improve lifecycle-aware state handling, and reduce UI regressions across the app.

Core Features & Use Cases

  • ViewModel-owned state: Ensures UI collects state with lifecycle awareness and avoids app state via remember or rememberSaveable.
  • Performance-friendly lazy lists: Encourages adding stable keys to LazyColumn/Lazy* items when a unique identifier exists.
  • Design-system consistency: Routes theme usage through GabiMorenoTheme and promotes reusable UI into shared modules.
  • Reliable previews: Requires realistic @Preview coverage using PreviewParameterProvider for multiple states.
  • Accessibility-by-default: Mandates contentDescription for interactive/informational visuals and supports semantics for custom accessibility behavior.
  • MVI-aligned TextField wiring: Routes every TextField keystroke through Actions so the ViewModel updates state.

Quick Start

Apply the compose-ui conventions to your screen by collecting ViewModel state via collectAsStateWithLifecycle, rendering it in Compose without business logic, and dispatching user input through Actions.

Frequently Asked Questions about compose-ui

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

FAQPage Schema
How do I standardize Jetpack Compose screens to keep UI components dumb?▼

Standardize Jetpack Compose screens by building dumb composables that strictly render ViewModel state and dispatch MVI actions, ensuring UI code contains no business logic. This enforces maintainable Compose architecture patterns across the application.

What is the best way to collect UI state in Jetpack Compose with lifecycle awareness?▼

Collect UI state in Jetpack Compose with lifecycle awareness by using collectAsStateWithLifecycle. This prevents app state from being stored via remember or rememberSaveable, ensuring the ViewModel owns the state and updates Compose safely.

Why do my Jetpack Compose lazy lists scroll poorly or lose item position?▼

Jetpack Compose lazy lists scroll poorly when items lack stable keys. Add stable keys to LazyColumn or LazyRow items using a unique identifier to help the framework track components efficiently and prevent UI regressions during recomposition.

How do I wire Jetpack Compose TextField input to an MVI ViewModel?▼

Wire Jetpack Compose TextField input to an MVI ViewModel by routing every keystroke through Actions. This action-driven text input approach ensures the ViewModel processes the interaction and updates the UI state accordingly.

How do I create reliable Jetpack Compose previews for multiple UI states?▼

Create reliable Jetpack Compose previews using PreviewParameterProvider to generate realistic @Preview coverage. This allows you to visualize multiple UI states without running the app, ensuring consistent design-system theme usage.

How do I add accessibility semantics to interactive Jetpack Compose visuals?▼

Add accessibility to Jetpack Compose interactive and informational visuals by mandating contentDescription. You can also apply semantics to custom components to support proper accessibility behavior for users needing assistive technologies.

Related Skills

Explore More Software Engineering Skills→
santimattiussantimattius
1

compose-architecture

Audit Jetpack Compose screens for MVVM/MVI architecture and performance issues.

Community
Advanced
AkaraChenAkaraChen
270

extract

Extract reusable UI patterns, components, and design tokens from design systems.

Community
Advanced
333-333-333333-333-333

flutter-widget-testing

Automate Flutter widget rendering, interaction, and accessibility validation tests.

Community
Intermediate
skydovesskydoves
472

optimizing-lazy-layouts

Optimize Jetpack Compose Lazy layouts with stable keys and contentType.

Community
Intermediate