hmos-multidevice-avoid-areas

Implements declarative safe-area and system UI avoidance strategies for HarmonyOS apps.

Updated Jul 6, 2026
One-click install
npx skills add https://github.com/shirulot/codex-skill --skill hmos-multidevice-avoid-areas-shirulot
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hmos-multidevice-avoid-areas
Source: https://github.com/shirulot/codex-skill/tree/main/hmos-multidevice-avoid-areas
Command: npx skills add https://github.com/shirulot/codex-skill --skill hmos-multidevice-avoid-areas-shirulot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill resolves complex UI layout issues in HarmonyOS applications caused by system-level obstructions like status bars, navigation indicators, camera cutouts, and soft keyboards, ensuring a seamless user experience across diverse device form factors.

Core Features & Use Cases

  • Dynamic Avoidance: Automatically detects and adapts to system UI changes, such as folding/unfolding or orientation shifts.
  • Immersive Layouts: Provides strategies for extending backgrounds into system areas while keeping interactive content safe.
  • Use Case: Use this Skill when your app's input fields are hidden by the soft keyboard or when your immersive full-screen design is being clipped by a device's camera cutout.

Quick Start

Use the hmos-multidevice-avoid-areas skill to implement a dynamic padding strategy that prevents the bottom navigation bar from obscuring the primary action buttons in my current layout.

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 handle HarmonyOS safe area adaptation for notches and system bars?

HarmonyOS safe area adaptation is handled by applying declarative strategies for safe area expansion and system bar avoidance. This ensures interactive content remains unobstructed by status bars, navigation indicators, and camera cutouts across diverse device form factors.

What is the best way to prevent the soft keyboard from hiding input fields in HarmonyOS?

Preventing the soft keyboard from hiding input fields requires implementing soft keyboard handling strategies within your HarmonyOS layout. This dynamically adjusts the UI to keep text fields visible and interactive when the keyboard appears.

Does HarmonyOS layout adaptation support multi-device scenarios like foldables and tablets?

HarmonyOS layout adaptation fully supports multi-device scenarios including phones, tablets, and foldables. It dynamically detects system UI changes triggered by folding, unfolding, or orientation shifts to update the layout automatically.

How do I create an immersive full-screen layout in HarmonyOS without clipping content?

Creating an immersive full-screen layout in HarmonyOS involves extending backgrounds into system areas while applying avoidance strategies. This keeps interactive content safe from system-level obstructions like navigation indicators and cutouts.

Why does my HarmonyOS bottom navigation bar obscure primary action buttons during orientation changes?

Your bottom navigation bar obscures buttons because the layout lacks dynamic avoidance strategies for window size or orientation changes. Implementing a dynamic padding strategy prevents system UI overlays from overlapping interactive elements.