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

Integrate `edge_to_edge_preview_lib`

Integrate edge-to-edge WindowInsets simulation into Jetpack Compose previews.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inaccurate Android Studio preview results by integrating edge-to-edge WindowInsets simulation into your existing Jetpack Compose project.

Core Features & Use Cases

  • Adds the correct preview dependency: Integrates the Maven artifact into Android-only modules or the commonMain source set for Kotlin Multiplatform projects.
  • Wraps previews with EdgeToEdgeTemplate: Enables realistic status bar, navigation bar, and camera cutout rendering (plus optional caption bar).
  • Creates a focused preview matrix: Lets you quickly validate common inset configurations using gesture/three-button navigation, cutout variants, and hidden/visible inset modes to catch overlap issues early.

Quick Start

Use this Skill to integrate de.drick.compose:edge-to-edge-preview and wrap your preview composables with EdgeToEdgeTemplate so your IDE previews render realistic edge-to-edge insets.

Frequently Asked Questions about Integrate `edge_to_edge_preview_lib`

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

FAQPage Schema
How do I simulate edge-to-edge WindowInsets in Jetpack Compose previews?▼

You can simulate edge-to-edge WindowInsets in Compose previews by wrapping your preview composables with EdgeToEdgeTemplate to render realistic status bars, navigation bars, and camera cutouts.

Why does my Compose preview not show the status bar and navigation bar?▼

Your Compose preview does not show the status bar and navigation bar because native preview tooling lacks native edge-to-edge simulation, requiring you to wrap preview content with EdgeToEdgeTemplate to force inset rendering.

Can I use edge-to-edge preview integration with Kotlin Multiplatform projects?▼

Yes, edge-to-edge preview integration works with Kotlin Multiplatform projects by adding the edge-to-edge-preview dependency to the commonMain source set and ensuring Compose preview tooling dependencies are present per source set.

How do I add the edge-to-edge preview dependency to an Android-only Compose module?▼

To add edge-to-edge preview support to an Android-only Compose module, integrate the de.drick.compose:edge-to-edge-preview Maven artifact into the module and wrap your previews with EdgeToEdgeTemplate.

What inset configurations can I validate using edge-to-edge preview tooling?▼

Edge-to-edge preview tooling lets you validate configurations including status bar, navigation bar, camera cutout, and an optional caption bar across gesture and three-button navigation modes to catch overlap issues early.

Related Skills

Explore More Software Engineering Skills→
timo-dricktimo-drick
60

Integrate `edge_to_edge_preview_check_lib`

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

Community
Intermediate
Impertio-StudioImpertio-Studio

shadcn-syntax-sidebar

Build shadcn ui sidebar navigation shells with correct composition and cookie persistence.

Official
Intermediate
uyelikaniluyelikanil

edge-to-edge

Migrate Android Jetpack Compose apps to edge-to-edge layouts with WindowInsets.

Community
Advanced
chidekinachidekina
2

generate-tests

Generate Jest or Vitest tests for JavaScript and TypeScript projects.

Community
Intermediate