skills.rest
timo-drick
timo-drickCOMMUNITY
Explore all skills by this author →
GitHub

Integrate `edge_to_edge_preview_check_lib`

Integrate edge-to-edge preview checks into Jetpack Compose previews.

60|2|Updated Jul 14, 2024
Search Tags:#android#jetpack compose#edge-to-edge#window insets#preview testing#semantic matchers#dependency integration
One-click install
npx skills add https://github.com/timo-drick/compose_edge_to_edge_preview --skill integrate-edge-to-edge-preview-check-lib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Integrate `edge_to_edge_preview_check_lib`
Source: https://github.com/timo-drick/compose_edge_to_edge_preview/tree/main/ai_skills/integrate-edge-to-edge-preview-check-lib
Command: npx skills add https://github.com/timo-drick/compose_edge_to_edge_preview --skill integrate-edge-to-edge-preview-check-lib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you catch Jetpack Compose layout problems where your content overlaps system window insets (like the status bar, navigation bar, or cutouts) before shipping.

Core Features & Use Cases

  • Adds overlap diagnostics to previews: Integrates TestWindowInsets { ... } so the preview highlights problematic intersections between UI nodes and specific WindowInsets.
  • Matcher-driven checks: Uses semantics matchers (for example hasClickAction() or SemanticsMatcher.keyIsDefined(...)) to target the UI elements that matter.
  • Deterministic edge-to-edge rendering: Combines checks with EdgeToEdgeTemplate to make inset behavior more stable across preview configurations.
  • Use cases: Validate text readability within safe drawing areas and ensure tappable targets remain reachable/not clipped in Android Studio previews, screenshot generation, and preview-based QA workflows.

Quick Start

Ask the AI to integrate the edge_to_edge_preview_check_lib dependency and update at least one Compose @Preview to wrap your UI with TestWindowInsets and at least one checkOverlap(...) for both safe-area text and tappable elements.

Frequently Asked Questions about Integrate `edge_to_edge_preview_check_lib`

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

FAQPage Schema
How do I check for system bar overlaps in Jetpack Compose previews?▼

You can check for system bar overlaps in Jetpack Compose previews by wrapping your content with `TestWindowInsets` and configuring matcher-based `checkOverlap(...)` calls to highlight problematic UI intersections.

How do I detect if my Compose UI is clipped by window insets in Android Studio?▼

Detect clipped Compose UI in Android Studio by adding the `edge_to_edge_preview_check_lib` dependency and wrapping your `@Preview` content with `TestWindowInsets` to surface visible inset overlap diagnostics.

Does edge-to-edge preview checking work with Kotlin Multiplatform Compose projects?▼

Yes, edge-to-edge preview checking works with Kotlin Multiplatform Compose projects if your preview composables are rendered via an Android target and require semantic-node overlap validation.

How do I use semantic matchers to validate tappable targets are not covered by system insets?▼

Use semantic matchers like `hasClickAction()` within your `checkOverlap(...)` configuration to validate that tappable targets remain reachable and are not covered by system window insets in your previews.

What is the best way to make edge-to-edge inset behavior deterministic across Compose preview configurations?▼

Combine `TestWindowInsets` checks with `EdgeToEdgeTemplate` to make edge-to-edge inset behavior deterministic and stable across different Compose preview configurations and screenshot generation workflows.

Why does my Compose preview text overlap the status bar navigation area?▼

Your Compose preview text overlaps the status bar navigation area because window insets are not being validated; wrapping content with `TestWindowInsets` and applying `checkOverlap(...)` exposes these safe drawing area violations.

Related Skills

Explore More Software Engineering Skills→
charleshall888charleshall888
1

edge-to-edge

Migrates Jetpack Compose apps to edge-to-edge layouts with insets handling.

Community
Advanced
jwm-axonijwm-axoni
3

qa-tester

Enforce evidence-based QA with PASS/FAIL reporting during BUILD and EXECUTE stages.

Community
Advanced
PL-Coding-GmbHPL-Coding-GmbH
6

android-preview-figma-verify

Compare Android Compose previews with Figma frames for design consistency.

Official
Advanced
thinhtt264thinhtt264

xml-to-compose-migration

Convert Android XML layouts to Jetpack Compose composables.

Community
Intermediate