android-compose-ui

Generates Jetpack Compose screens with Material 3 theming, previews, and Robolectric tests.

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/nolte/claude-android-engineering --skill android-compose-ui-nolte
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: android-compose-ui
Source: https://github.com/nolte/claude-android-engineering/tree/main/skills/android-compose-ui
Command: npx skills add https://github.com/nolte/claude-android-engineering --skill android-compose-ui-nolte

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve? Building Android screens that are theme-correct, adaptive, localized, accessible, and testable requires applying dozens of UX rules consistently; this Skill authors new Jetpack Compose screens and components with those rules applied at authoring time rather than retrofitted later. ## Core Features & Use Cases - Route/content screen generation: Produces a stateful route composable plus a stateless content composable per screen, with a sealed UI state, Navigation 3 keys, and event lambdas instead of a passed NavController. - UX rules baked in: Applies Material 3 theming, window-size-class adaptivity (list-detail, supporting-pane, feed), Material Symbols via a checked-in icon registry, externalized strings with German translations, 48dp/200%-font-scale accessibility, input validation with staged error timing, and perceived-performance hooks (200 ms loading rule, ReportDrawnWhen). - Tests and previews alongside: Emits @PreviewScreenSizes, @PreviewFontScale, and per-locale previews plus a Robolectric-hosted Compose test covering state rendering, interactions, state restoration, configuration variants, and input validation. - Use Case: Ask for a new settings screen with a form; the Skill proposes the screen contract, generates the composables, strings, previews, and Compose test through per-screen approval gates, and finishes with a green ./gradlew build. ## Quick Start Ask the assistant to build a new Compose screen, for example to scaffold a settings screen with a list-detail layout, previews, and a Compose test.

Frequently Asked Questions about android-compose-ui

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

FAQPage Schema
How do I scaffold a new Jetpack Compose screen with tests?โ–ผ

Invoke the skill with the screen you want; it confirms a screen contract (name, navigation key, UI state shape, layout family), then generates a stateful route composable, a stateless content composable, previews, externalized strings, and a Robolectric Compose test, ending with ./gradlew build.

What is the difference between android-compose-ui and android-ux-reviewer?โ–ผ

android-compose-ui authors new UI with UX patterns applied up front, while android-ux-reviewer is a read-only agent that audits existing screens and reports findings. Use the skill to build, and hand review requests to the agent; the skill then applies the agent's findings.

Does it support Navigation 3 and adaptive layouts?โ–ผ

Yes. Screens use @Serializable NavKey destinations with NavDisplay and entryProvider, never a passed NavController. Layouts branch on window size class with NavigableListDetailPaneScaffold for list-detail, supporting-pane, or feed patterns, and selection survives configuration changes.

Can it generate forms with validation in Compose?โ–ผ

Yes. Forms use state-based TextFieldState with per-field touched flags, errors shown only after first field exit and cleared on the fixing keystroke, semantics error exposure, a live region for form status, IME insets, and a single in-flight submission contract with input preserved on failure.

When should I not use this skill?โ–ผ

Do not use it to implement a full feature across UI, ViewModel, repository, and backend (use android-feature-implement), to audit existing UI (use android-ux-reviewer), or to complete localization of existing screens (use android-localization-apply). It also requires an existing Gradle app module.