# Android UI Compose

> This skill is used to implement Android UI in Jetpack Compose based on an existing UX flow, focusing on clear hierarchy, list vs form separation and discoverable navigation.

- Skill: `diegosouzapw/android-ui-compose` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/android-ui-compose`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/android-ui-compose/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/android-ui-compose

---


# Android UI Compose Implementation Skill

## Purpose
Translate UX designs into concrete Jetpack Compose layouts that feel clean and consistent. Keep lists as lists, forms as forms, and navigation discoverable.

## When to Use
Use this skill when a UX flow and section structure already exist and the UI needs to be implemented or refined in Kotlin with Compose.

## Outputs
- Composable functions for screens and components
- Layout that reflects hierarchy and sections
- Item rows or cards for existing entities
- Forms for creation or editing in a controlled place
- Empty states and hints

## Procedure
1. Take the UX specification and identify:
   - The main screen composable.
   - Reusable item composables (for example ListCard, TaskRow).
   - Places where dialogs, sheets or snackbars are required.
2. Implement a clear structure:
   - Top level scaffold with a top bar and optional bottom bar if used elsewhere.
   - A “create new” section that is visually separate from the list of existing items.
   - A LazyColumn or relevant container for lists of items.
3. For existing items:
   - Represent them as rows or cards, not full edit forms.
   - Include:
     - Primary text (for example list name or task title).
     - Optional secondary text (for example due date, list summary).
     - Tappable checkbox or icon where appropriate.
     - A clear tap target to open details or edit.
4. For editing:
   - Use either:
     - An inline expanded row for the item that is currently being edited, or
     - A dialog or bottom sheet with labelled fields.
   - Allow editing one item at a time to avoid visual overload.
5. Implement empty states and hints:
   - Use simple text and spacing to explain what to do.
   - Keep add buttons and initial actions visible in empty states.
6. Align with existing styling:
   - Use Material components already present in the project.
   - Reuse padding, shapes and typography from existing screens.
   - Keep component names consistent with the codebase.

## Guardrails
- Do not embed full edit forms inside every list row by default.
- Do not hide navigation in subtle click targets; ensure rows are clearly interactive.
- Do not introduce new design systems, libraries or icon packs.
- Do not alter ViewModel contracts or data models; treat state as given.