skills.rest
dimitriRemoiville
dimitriRemoivilleCOMMUNITY
Explore all skills by this author →
GitHub

compose-ui

Guide Jetpack Compose screen development with Route and Screen patterns.

1|Updated Apr 24, 2026
Search Tags:#testing#navigation#android#state-management#jetpack-compose#compose#ui-patterns
One-click install
npx skills add https://github.com/dimitriRemoiville/cc-mobile --skill compose-ui-dimitriremoiville
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-ui
Source: https://github.com/dimitriRemoiville/cc-mobile/tree/main/plugins/cc-mobile-android/skills/compose-ui
Command: npx skills add https://github.com/dimitriRemoiville/cc-mobile --skill compose-ui-dimitriremoiville

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a consistent approach to building Jetpack Compose screens and components across the project, ensuring reusable patterns and adherence to best practices.

Core Features & Use Cases

  • Two-part screen pattern: Route (with ViewModel) and Screen (ui) to promote separation of concerns.
  • UiState and Events: Structured UI state and event handling to drive composables safely.
  • Previews & Theming: Built-in previews and Material 3 theming guidelines for consistent visuals.
  • Accessibility & Testing: Guidelines for accessibility targets and test hooks to verify behavior.

Quick Start

Apply this skill by following the Route and Screen pattern shown to build a new Compose screen with a ViewModel, state management, and navigation.

Frequently Asked Questions about compose-ui

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

FAQPage Schema
What is the best way to structure Jetpack Compose screens for state management?▼

Jetpack Compose screens should use a two-function pattern separating the Route (ViewModel integration) from the Screen (UI). This enforces state hoisting, structured UiState modeling, and safe event handling.

How do I set up Material 3 theming and previews in Jetpack Compose?▼

Material 3 theming and previews are set up by applying built-in theming guidelines to composables. This skill generates structured preview functions to ensure consistent visual rendering across components.

Does this approach work with existing Jetpack Compose navigation routes?▼

Yes, this approach works with existing navigation routes. It guides developers in applying the Route and Screen pattern to new or existing screens, ensuring consistent routing and component architecture.

How do I add test hooks and accessibility targets to Compose components?▼

Test hooks and accessibility targets are added by embedding specific guidelines into composables during creation. This ensures behavior can be verified and components meet accessibility standards.

Why use a two-function screen pattern for Jetpack Compose?▼

A two-function screen pattern separates the Route with ViewModel logic from the Screen UI, promoting separation of concerns. This makes state management safer and components more reusable across the project.

Can I handle UiState and events without state hoisting in Compose?▼

UiState and events require state hoisting to drive composables safely. Structuring UI state separately ensures the composable functions remain stateless and predictable.

Related Skills

Explore More Software Engineering Skills→
DrjackyDrjacky
104

android-kotlin-compose

Scaffold modular Android Kotlin projects with Jetpack Compose and MVVM.

Community
Advanced
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate
po4ykapo4yka
58

android-compose-patterns

Standardize Jetpack Compose UI architecture with Route/Screen separation and StateFlow.

Community
Intermediate
tajemniktvtajemniktv
3

migrate-xml-views-to-jetpack-compose

Convert Android XML View layouts to Jetpack Compose UI.

Community
Advanced