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.
Best use case
android-ui-compose is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using android-ui-compose should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/android-ui-compose/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How android-ui-compose Compares
| Feature / Agent | android-ui-compose | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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.Related Skills
compose-ui-control
Control a running Compose Desktop application via HTTP. Use when you need to interact with UI elements, click buttons, enter text, wait for elements to appear, or capture screenshots in a Compose Desktop app that has compose-ui-test-server enabled.
android_ui_verification
Automated end-to-end UI testing and verification on an Android Emulator using ADB.
android-ux-flows
This skill is used to design Android user flows and screen structures that match the existing app patterns and keep forms, lists and navigation clear.
android-ui-design-guide
Apply Android/Jetpack Compose design principles following Material Design 3 when building any Android UI component. Only execute this when the current project is an Android project and involves UI-related work. Use this skill for Compose layouts, Material components, or Android app development. Ensures Material You compliance with Dynamic Color, expressive theming, 4dp grid spacing, Roboto typography with Type Scale, and native Android patterns. Prevents common anti-patterns like hardcoded colors, Dark Mode neglect, and touch target violations.
android-jetpack-compose-expert
Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.
xml-to-compose
Convert Android XML layouts to Jetpack Compose. Use when asked to migrate XML layouts, convert views to composables, or help with Compose migration. Handles layouts, widgets, attributes, styles, and resource references.
workflow-composer
Chain multiple skills together into automated workflows with conditional logic and parallel execution
implementing-android-code
This skill should be used when implementing Android code in Bitwarden. Covers critical patterns, gotchas, and anti-patterns unique to this codebase. Triggered by "How do I implement a ViewModel?", "Create a new screen", "Add navigation", "Write a repository", "BaseViewModel pattern", "State-Action-Event", "type-safe navigation", "@Serializable route", "SavedStateHandle persistence", "process death recovery", "handleAction", "sendAction", "Hilt module", "Repository pattern", "implementing a screen", "adding a data source", "handling navigation", "encrypted storage", "security patterns", "Clock injection", "DataState", or any questions about implementing features, screens, ViewModels, data sources, or navigation in the Bitwarden Android app.
composer-dependency-management
Rules pertaining to Composer dependency management, promoting best practices for declaring and updating dependencies.
android-agent-skills
Production-ready Agent Skills framework for Android Kotlin development. Provides Clean Architecture patterns, Jetpack Compose best practices, validation DSL, MVI state management, error handling, and AI-powered code generation. Use when building Android apps with quality standards, generating ViewModels, Repositories, UseCases, Compose screens, or writing pure Kotlin Agent Skills.
android-workflow-beta
Generate GitHub Actions workflow for beta testing track deployment
android-screenshot-automation
Setup automated screenshot capture for Play Store using Fastlane Screengrab