Agent skill

Compose UI Testing Patterns

by chrisbanes in chrisbanes/skills

A skill your agent uses when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus…

Apache-2.0Auto-check passedMobile

Install Compose UI Testing Patterns

skills CLI
$ npx skills add chrisbanes/skills --skill compose-ui-testing-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install chrisbanes/skills compose-ui-testing-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/chrisbanes/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/compose-ui-testing-patterns .claude/skills/compose-ui-testing-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
compose-ui-testing-patterns
GitHub stars
1.1k
Token cost
~1.8k tokens
SKILL.md length
806 words
Files
2 (incl. references)
Skills in repo
19
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus…

  • Works in 5 steps: State the behavior and test concern the… → Inspect the existing test against that… → Keep focused edits within the requested… → …
  • Reviewing Jetpack Compose UI tests
  • SKILL.md covers Core principle, Procedure, Test target choice and Prefer plain UI tests, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Compose UI Testing Patterns is an agent skill from chrisbanes/skills. Use when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus assertions, interaction state (hover/pressed/focused), or tests for plain state-driven UI composables.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/interaction-state.md`).

It sits in Mobile, covering Test strategy and Android development. It works with Jetpack Compose. The repository describes itself as: Skills for Kotlin, Jetpack Compose, and Android development. The licence is Apache-2.0.

When your agent uses it

  • Reviewing Jetpack Compose UI tests
  • Screenshot tests
  • Baseline-recording evidence
  • Semantics assertions

Example prompts

  • “/compose-ui-testing-patterns”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. State the behavior and test concern the task asks you to prove.
  2. Inspect the existing test against that concern and choose the smallest
  3. Keep focused edits within the requested test concern. Do not move test-only
  4. Drive controlled state or input, synchronize through Compose when needed,
  5. Finish with no edit when the existing test already uses the narrowest valid

What it can do on your machine

Read from SKILL.md and the folder at commit f872f97. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are kotlin).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Compose UI Testing Patterns loads about 1.8k tokens when it runs, and up to ~2.1k if it reads all its reference files. Until then it costs about 77 tokens; SKILL.md has 806 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from chrisbanes/skills at commit f872f97, republished under its Apache-2.0 licence (© chrisbanes). 806 words, ~1,781 tokens.

Download SKILL.mdSave it as .claude/skills/compose-ui-testing-patterns/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
compose-ui-testing-patterns
description
Use when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus assertions, interaction state (hover/pressed/focused), or tests for plain state-driven UI composables.

Compose: UI testing patterns

Core principle

Test the smallest UI contract that proves the behavior. Prefer plain state-driven UI tests with callbacks. Add integration only when lifecycle, navigation, DI, or platform behavior is the thing under test.

Procedure

  1. State the behavior and test concern the task asks you to prove.
  2. Inspect the existing test against that concern and choose the smallest sufficient seam from the table below.
  3. Keep focused edits within the requested test concern. Do not move test-only helpers into production or broaden production APIs unless that production boundary is itself under test.
  4. Drive controlled state or input, synchronize through Compose when needed, and assert an observable semantic, visual, or callback result.
  5. Finish with no edit when the existing test already uses the narrowest valid seam and proves the requested behavior.

Test target choice

What you need to proveTest shape
Text, button, loading/error branch, conditional contentPlain UI Compose test
Callback wiring from click/inputPlain UI Compose test
Focus navigation or keyboard behaviorCompose test with key input
Visual layout, clipping, elevation, typography, image compositionScreenshot test
State holder updates UI correctlyState holder/unit test plus one wiring smoke test
Hover, pressed, focused, dragged interaction statePlain UI test with MutableInteractionSource
Navigation, lifecycle, DI integrationIntegration test

Prefer plain UI tests

If the screen has a state holder/UI split, test the plain UI composable:

kotlin
composeTestRule.setContent {
    ProfileScreen(
        state = ProfileUiState(name = "Ada", canSave = true),
        onNameChange = {},
        onSaveClick = { saved = true },
        onBackClick = {},
    )
}

composeTestRule.onNodeWithText("Ada").assertIsDisplayed()
composeTestRule.onNodeWithText("Save").performClick()

assertThat(saved).isTrue()

This avoids constructing ViewModels, components, repositories, navigation, and dependency graphs for layout behavior.

Semantics first

Assert semantics when behavior is semantic:

  • Text exists: onNodeWithText.
  • Button is enabled/disabled: assertIsEnabled, assertIsNotEnabled.
  • Content is selected/focused/toggled: use semantics assertions.
  • Content is absent: assertDoesNotExist.

Use test tags for nodes that have no stable user-visible text or where multiple nodes share text. Do not use tags as the first choice for all assertions; user-visible semantics are usually stronger.

Callback testing

Use simple counters or captured values:

kotlin
var selectedId: String? = null

composeTestRule.setContent {
    ItemList(
        items = listOf(ItemUi("movie-1", "Movie")),
        onItemClick = { selectedId = it },
    )
}

composeTestRule.onNodeWithText("Movie").performClick()

assertThat(selectedId).isEqualTo("movie-1")

For plain captured callback values, a direct assertion after the action is usually enough. Use runOnIdle when the assertion needs Compose to finish applying snapshot state, recomposition, or queued UI work before reading the result.

Keep UI tests deterministic

For layout, branch, and callback behavior, render controlled state with setContent instead of constructing the production app graph. Production DI, repositories, lifecycle observers, and background effects add asynchronous work that is irrelevant to a plain UI contract and can make the test flaky.

Do not use Thread.sleep to wait for Compose. Drive the UI to a known state, then use semantic assertions and Compose synchronization (waitForIdle, runOnIdle, or a bounded waitUntil for a real asynchronous condition). Reserve full-app integration for behavior that actually depends on navigation, lifecycle, DI, or platform wiring.

Interaction state with MutableInteractionSource

When interaction state is the concern, read the interaction-state procedure completely before writing or reviewing the test. It requires direct, injected interaction state rather than fragile pointer simulation.

Show full SKILL.md (333 more words)Show less

Keyboard and focus

For keyboard, TV, and desktop UI, drive navigation with the same input model users use (keys/D-pad), not clicks alone. Assert focused semantics, not colors or scale; reserve screenshots for visual focus treatment. If the inspected composable exposes no input surface that can change the state, name the missing host or parent interaction seam before proposing a key-driven test; do not assume a selector or control exists in the supplied UI.

Details—focus graph, FocusRequester, restoration, key handlers, and test patterns: compose-focus-navigation.

Screenshot tests

Use screenshots for visual contracts that semantics cannot prove:

  • Layout spacing/alignment.
  • Themed colors, typography, elevation, shadows.
  • Image composition, gradients, overlays.
  • Focus highlight appearance.
  • Loading skeletons or dense visual states.

Keep screenshot state deterministic:

  • Use fixed state data.
  • Freeze clocks or animation progress when possible.
  • Replace network/image loading with fake or preview handlers.
  • Avoid asserting dynamic text such as current time unless controlled.
When screenshot defaults change
  • Keep an intentionally changed named preset or default in the test and update its baseline. Do not substitute a raw value to retain the old image; preserve assertions and tolerances unless independently justified.
  • Keep an explicit fixed value when that fixed resolution or geometry is the contract.
  • Verify recording separately from comparison: inspect the expected artifact paths and intentional baseline diff. Read the exact output path from the test, confirm that artifact exists, and name that literal path in the verification evidence. When a verification log reports a pass, state what passed and then check recording independently; a passing comparison does not prove that recording wrote the artifact. If the artifact or baseline diff is unavailable, report that gap rather than claiming recording succeeded. Keep tool-specific commands in the repository runbook.

Fake images and platform services

When image content is irrelevant, fake the loader and assert the requested model if that is the behavior. The exact hook depends on your image library; a project helper might look like this:

kotlin
val requestedModels = mutableListOf<Any?>()

// Example helper, not a Compose API.
setContentWithFakeImageLoader { request ->
    requestedModels += request.data
    errorPainter()
}

When image appearance matters, provide a deterministic local painter/bitmap instead of network data.

© chrisbanes, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in skills/compose-ui-testing-patterns of chrisbanes/skills.

  • SKILL.md
  • references/interaction-state.md

Open the folder on GitHubat commit f872f97

Compare with similar skills

Compose UI Testing Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Compose UI Testing Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Compose UI Testing Patterns this skillchrisbanes/skills1.1k—~1.8kAutomated safety check: PassApache-2.0
Kotlin Testingaffaan-m/ECC275k4 repos~5.2kAutomated safety check: PassMIT
Compose Multiplatform Patternsmonta-app/ocpp-emulator1805 repos~2kAutomated safety check: PassApache-2.0
Stylesarindamxd/camerax-android1324 repos~2.3kAutomated safety check: PassApache-2.0
Compose UIMoustachauve/WLED-Android1693 repos~676Automated safety check: PassApache-2.0
Edge To Edgearindamxd/camerax-android1325 repos~3.6kAutomated safety check: PassApache-2.0

Similar skills

  • Kotlin Testing

    affaan-m/ECC

    Kotlin testing patterns with Kotest, MockK, coroutine testing, property-based testing, and Kover coverage.

    275k GitHub starsUsed in 4 repos~5.2k tokens
    MobileAuto-check passed
  • Compose Multiplatform Patterns

    monta-app/ocpp-emulator

    Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.

    180 GitHub starsUsed in 5 repos~2k tokens
    MobileAuto-check passed
  • Styles

    arindamxd/camerax-android

    A skill your agent uses to integrate the Jetpack Compose Styles API into an Android project.

    132 GitHub starsUsed in 4 repos~2.3k tokens
    MobileAuto-check passed
  • Compose UI

    Moustachauve/WLED-Android

    Best practices for building UI with Jetpack Compose, focusing on state hoisting, detailed performance optimizations, and theming.

    169 GitHub starsUsed in 3 repos~676 tokens
    MobileAuto-check passed
  • Edge To Edge

    arindamxd/camerax-android

    A skill your agent uses to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues.

    132 GitHub starsUsed in 5 repos~3.6k tokens
    MobileAuto-check passed
  • Improve Code Coverage

    alexvanyo/composelife

    Helps increment code coverage in this Kotlin Multiplatform project.

    267 GitHub stars~1.1k tokensUpdated today
    MobileAuto-check passed

More from chrisbanes/skills

All 19 skills in this repo
  • Gradle Run

    chrisbanes/skills

    A skill your agent uses when planning to execute Gradle through gradle, ./gradlew, or a custom gradlew wrapper script, or diagnosing a Gradle build, compact workflow ledger, repeated failure…

    1.1k GitHub stars~1.2k tokensUpdated 3 days ago
    Auto-check passed
  • Compose Animations

    chrisbanes/skills

    A skill your agent uses when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating one property toward a target, color or size transitions, multiple properties from one…

    1.1k GitHub stars~1.1k tokensUpdated 3 days ago
    Auto-check passed
  • Release Kotlin Library

    chrisbanes/skills

    A skill your agent uses when preparing, publishing, or checking readiness for a Kotlin library release, including verifying its gradle-maven-publish-plugin prerequisite, reconciling changelogs and…

    1.1k GitHub stars~1.9k tokensUpdated 3 days ago
    Auto-check: notes
  • Run GitHub Project

    chrisbanes/skills

    A skill your agent uses when asked to set up, review, or operate a repository's GitHub Project workflow, including ready claims, role-labelled human work, unknown remote mutation outcomes, Todo…

    1.1k GitHub stars~1.5k tokensUpdated 3 days ago
    Auto-check passed
  • Compose Component Design

    chrisbanes/skills

    A skill your agent uses when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content…

    1.1k GitHub starsUsed in 1 repo~718 tokens
    Auto-check passed
  • Compose Focus Navigation

    chrisbanes/skills

    A skill your agent uses when writing or reviewing Jetpack Compose UI for TV, keyboard, desktop, accessibility focus, D-pad navigation, FocusRequester, focusProperties, key events, or initial focus…

    1.1k GitHub stars~994 tokensUpdated 3 days ago
    Auto-check passed

Works with

Questions about Compose UI Testing Patterns

What does Compose UI Testing Patterns do?

A skill your agent uses when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus…. Compose UI Testing Patterns is an agent skill from chrisbanes/skills. Use when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus assertions, interaction state (hover/pressed/focused), or tests for plain state-driven UI composables.

When should I use Compose UI Testing Patterns?

Compose UI Testing Patterns fits situations like: reviewing Jetpack Compose UI tests; screenshot tests; baseline-recording evidence; semantics assertions.

How do I install Compose UI Testing Patterns in Claude Code?

Run `npx skills add chrisbanes/skills --skill compose-ui-testing-patterns -a claude-code`. Or copy the skill folder (skills/compose-ui-testing-patterns in chrisbanes/skills) into .claude/skills/compose-ui-testing-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Compose UI Testing Patterns in Codex?

Run `npx skills add chrisbanes/skills --skill compose-ui-testing-patterns -a codex`. Or copy the skill folder (skills/compose-ui-testing-patterns in chrisbanes/skills) into .agents/skills/compose-ui-testing-patterns in your project. Codex loads it when a task matches its description.

Can I use Compose UI Testing Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add chrisbanes/skills --skill compose-ui-testing-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/compose-ui-testing-patterns, .gemini/skills/compose-ui-testing-patterns, .github/skills/compose-ui-testing-patterns and .opencode/skills/compose-ui-testing-patterns in your project.

What does Compose UI Testing Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Compose UI Testing Patterns is instructions for the agent only.

Does Compose UI Testing Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Compose UI Testing Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Compose UI Testing Patterns use?

Compose UI Testing Patterns is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Compose UI Testing Patterns use?

About 1.8k tokens (SKILL.md is roughly 7.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 354 tokens, read only when the agent opens those files.

What are the alternatives to Compose UI Testing Patterns?

Skills that share tags, products or a category with Compose UI Testing Patterns: Kotlin Testing (affaan-m/ECC, 275k stars), Compose Multiplatform Patterns (monta-app/ocpp-emulator, 180 stars), Styles (arindamxd/camerax-android, 132 stars) and Compose UI (Moustachauve/WLED-Android, 169 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Compose UI Testing Patterns?

chrisbanes (a GitHub user) maintains it in chrisbanes/skills, which has 1,092 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 4, 2026.

Source: chrisbanes/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.