skills.rest
shirulot
shirulotCOMMUNITY
Explore all skills by this author →
GitHub

hmos-multidevice-screen-window-size

Manage HarmonyOS screen and window size adaptation with breakpoint strategies.

Updated Jul 6, 2026
Search Tags:#window-management#responsive-layout#breakpoint#harmonyos#ui-adaptation#gridrow
One-click install
npx skills add https://github.com/shirulot/codex-skill --skill hmos-multidevice-screen-window-size
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hmos-multidevice-screen-window-size
Source: https://github.com/shirulot/codex-skill/tree/main/hmos-multidevice-screen-window-size
Command: npx skills add https://github.com/shirulot/codex-skill --skill hmos-multidevice-screen-window-size

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the complexity of building consistent, high-quality user interfaces across the diverse HarmonyOS device ecosystem, preventing layout breakage, content clipping, and visual inconsistencies during window resizing or device transitions.

Core Features & Use Cases

  • Breakpoint Strategy: Implements unified breakpoint systems to handle layout transitions across phone, tablet, and foldable devices.
  • Responsive Layouts: Provides best practices for GridRow/GridCol usage, window size observation, and adaptive container selection.
  • Anomaly Resolution: Offers systematic debugging paths for common issues like component stretching, layout clipping, font scaling, and display density mismatches.
  • Use Case: When a layout breaks on a foldable device during transition from folded to unfolded state, this Skill guides the developer through the root cause analysis and provides the specific GridRow or window listener implementation to fix it.

Quick Start

Use the hmos-multidevice-screen-window-size skill to analyze and fix the layout clipping issue occurring on the foldable device screen.

Frequently Asked Questions about hmos-multidevice-screen-window-size

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

FAQPage Schema
How do I fix responsive layout clipping on HarmonyOS foldable devices during screen transitions?▼

Fix responsive layout clipping on HarmonyOS foldable devices by applying systematic breakpoint management and observing window state changes. Use GridRow and GridCol implementations to ensure consistent UI rendering and prevent content stretching during foldable transitions.

What is the best way to implement breakpoint strategies for HarmonyOS multi-device screen adaptation?▼

The best way to implement breakpoint strategies for HarmonyOS multi-device adaptation is using unified breakpoint systems combined with responsive GridRow containers. This approach handles layout transitions smoothly across phone, tablet, and foldable form factors.

How does window size observation work for UI adaptation in HarmonyOS applications?▼

Window size observation in HarmonyOS works by monitoring window state changes to trigger responsive layout adjustments. Developers use window listeners to dynamically adapt component stretching, font scaling, and display density across different device form factors.

Why does my HarmonyOS component stretching break when resizing windows across different devices?▼

Component stretching breaks during HarmonyOS window resizing due to mismatched display density and improper responsive container selection. Resolve this by applying adaptive GridRow configurations and systematic debugging paths for font scaling and layout clipping anomalies.

Do I need specific responsive containers to handle HarmonyOS tablet and phone layout transitions?▼

Yes, you need responsive containers like GridRow and GridCol to handle HarmonyOS tablet and phone layout transitions. These components provide the necessary adaptive structure to maintain consistent UI rendering across diverse device form factors.

Related Skills

Explore More Software Engineering Skills→
billydeeii136billydeeii136

ui-styling

Generate UI components using shadcn/ui and Tailwind CSS utility classes.

Community
Intermediate
WdanielBWdanielB

responsive-design

Implement responsive layouts with container queries, fluid typography, CSS Grid, and mobile-first breakpoints.

Community
Intermediate
NoobyGainsNoobyGains
78

ui-engineering

Guide frontend component architecture with layout, state, and accessibility decisions.

Community
Advanced
openharmonyinsightopenharmonyinsight
31

hmos-multidevice-screen-window-window-size

Classify and fix HarmonyOS layout problems from screen and window size changes.

Official
Advanced