ui-layer

Applies Google's UI layer architecture guidelines to Android ViewModel and Compose state management.

3|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/tajemniktv/TajsOS --skill ui-layer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-layer
Source: https://github.com/tajemniktv/TajsOS/tree/main/.agent/skills/ui-layer
Command: npx skills add https://github.com/tajemniktv/TajsOS --skill ui-layer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the common problem of inconsistent, fragile Android UI code that leads to state loss during configuration changes, untraceable bugs from tight coupling, and untestable UI logic, by providing Google's official, production-proven UI layer architecture guidelines tailored for TajsOS Android development.

Core Features & Use Cases

  • Unidirectional Data Flow (UDF) Enforcement: Guarantees state flows down from ViewModel to UI and events flow up from UI to ViewModel to eliminate state inconsistencies and lost user interactions.
  • ViewModel & State Holder Best Practices: Guidance on proper ViewModel scoping, lifecycle safety, and separation of business and UI logic to avoid memory leaks, tight coupling, and untestable components.
  • Lifecycle-Aware State Collection: Rules for using collectAsStateWithLifecycle in Compose and repeatOnLifecycle in Views to prevent unnecessary work and memory leaks when the UI is backgrounded.
  • Use Case: When building a task capture screen in TajsOS, use this Skill to ensure the screen's UI state persists when the user rotates their device, one-time snackbar messages are never lost, and reusable UI components like task chips don't depend on the screen-level ViewModel.

Quick Start

Use the ui-layer skill to audit your Compose screen's ViewModel and state collection logic to ensure it follows Google's recommended Android UI layer patterns.

Frequently Asked Questions about ui-layer

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

FAQPage Schema
How do I prevent Android ViewModel state loss during configuration changes in Jetpack Compose?

To prevent Android ViewModel state loss during configuration changes, enforce Unidirectional Data Flow by separating state holders and using lifecycle-aware state collection like collectAsStateWithLifecycle in Compose to maintain state persistence and eliminate untraceable bugs from tight coupling.

What is the best way to implement Unidirectional Data Flow in Android Jetpack Compose?

The best way to implement Unidirectional Data Flow in Android Jetpack Compose is to ensure state flows down from the ViewModel to the UI while events flow up from the UI to the ViewModel. This pattern eliminates state inconsistencies and guarantees user interactions are never lost.

How do I use repeatOnLifecycle for lifecycle-aware state collection in Android Views?

To use repeatOnLifecycle for lifecycle-aware state collection in Android Views, execute your state collection flow inside the repeatOnLifecycle block. This pauses and resumes collection based on the lifecycle state, preventing unnecessary background work and memory leaks when the UI is backgrounded.

Does this Android UI layer architecture guidance work with both Jetpack Compose and View-based UIs?

Yes, this Android UI layer architecture guidance works with both Jetpack Compose and View-based UIs. It provides specific rules for lifecycle-aware state collection using collectAsStateWithLifecycle for Compose and repeatOnLifecycle for View-based implementations to prevent leaks.

Why should reusable Jetpack Compose components not depend on screen-level ViewModels?

Reusable Jetpack Compose components should not depend on screen-level ViewModels because it creates tight coupling and makes components untestable. Proper state holder separation ensures reusable UI components like task chips remain independent of screen-level business logic.