Integrate `edge_to_edge_preview_check_lib`

Community

Surface inset overlap issues in previews

Authortimo-drick
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Integrate `edge_to_edge_preview_check_lib`
Download link: https://github.com/timo-drick/compose_edge_to_edge_preview/archive/main.zip#integrate-edge-to-edge-preview-check-lib

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.