hmos-multidevice-avoid-areas

Guide HarmonyOS UI layouts to avoid system bars, cutouts, and keyboard overlap.

31|6|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/openharmonyinsight/openharmony-skills --skill hmos-multidevice-avoid-areas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hmos-multidevice-avoid-areas
Source: https://github.com/openharmonyinsight/openharmony-skills/tree/main/skills/harmonyos-ai-agent-skill/references/hmos-multidevice-avoid-areas
Command: npx skills add https://github.com/openharmonyinsight/openharmony-skills --skill hmos-multidevice-avoid-areas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents HarmonyOS UI elements from being covered or made unclickable by status bars, navigation indicators, cutouts (notches), and soft keyboards on different device types and window states.

Core Features & Use Cases

  • Declarative avoid-area adaptation: Select the correct adaptation path for safe area extension, immersive full-screen layout, cutout handling, and keyboard overlap behavior.
  • Dynamic system-area indexing: Use a scene-driven approach that focuses on identifying avoid-area types first, then applying layout constraints and update logic.
  • Verification-ready output: Produces structured outputs for REQ/DEV/FIX/VAL including device constraints, implementation touchpoints, and an evidence-based verification matrix.

Use cases include immersive detail pages, chat/comment screens with keyboard interactions, and device-variant layouts that must handle cutouts and system UI changes without hardcoded pixel sizes.

Quick Start

Ask an AI to apply hmos-multidevice-avoid-areas to your HarmonyOS page so it dynamically detects avoid areas, updates layout when the keyboard opens or the window changes, and outputs a verification matrix for screenshots and evidence.

Frequently Asked Questions about hmos-multidevice-avoid-areas

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

FAQPage Schema
How do I prevent the HarmonyOS soft keyboard from overlapping input fields?

To prevent the HarmonyOS soft keyboard from overlapping input fields, apply dynamic system-area indexing to detect avoid areas and update layout constraints when the keyboard opens. This ensures input-heavy screens dynamically adjust without hardcoded pixel sizes.

What is the best way to handle cutout and notch areas in a HarmonyOS immersive full-screen layout?

Handling cutout and notch areas in a HarmonyOS immersive full-screen layout requires declarative scene selection to identify avoid-area types, then applying dynamic layout constraints. This ensures fixed components remain unobstructed across device variants.

How to make UI avoid status bar and navigation indicators across multiple HarmonyOS devices?

To make UI avoid the status bar and navigation indicators across multiple HarmonyOS devices, retrieve avoid-area changes dynamically and split explicit content from the background. This approach adapts robustly to window state changes.

Does HarmonyOS UI layout support dynamic safe area expansion for different window states?

Yes, HarmonyOS UI layout supports dynamic safe area expansion by listening for avoid-area changes during window state transitions. This mechanism dynamically updates constraints to keep content visible and interactive.

Why does my HarmonyOS UI get covered by system bars during window state changes?

Your HarmonyOS UI gets covered by system bars during window state changes because static layouts fail to account for dynamic avoid areas. Listening to avoid-area updates and applying dynamic constraints resolves this overlap.

Do I need hardcoded pixel sizes to handle avoid areas on HarmonyOS cutout-sensitive components?

No, you do not need hardcoded pixel sizes to handle avoid areas on HarmonyOS cutout-sensitive components. A scene-driven approach dynamically retrieves system-area constraints and outputs a verification matrix for robust validation.