Can I use this for Blazor Hybrid apps?

Yes, it includes specific guidance for combining XAML page settings with CSS environment variables to ensure web content respects device insets properly.

How does this skill handle keyboard avoidance?

It utilizes the SoftInput flag within the SafeAreaRegions enum to automatically pad layouts and prevent content from being covered by the on-screen soft keyboard.

What is the main benefit of using maui-safe-area in .NET 10?

It provides a unified cross-platform API (SafeAreaEdges) that replaces legacy platform-specific safe area properties with consistent behavior across iOS and Android.

Does this replace the legacy Page.UseSafeArea property?

Yes, it helps you migrate from legacy properties like UseSafeArea and IgnoreSafeArea to the modern, more granular SafeAreaEdges system introduced in .NET 10.

How do I achieve a true edge-to-edge look?

The skill guides you in setting SafeAreaEdges to None on both the ContentPage and its child layouts to allow content to flow behind system bars and notches.

.NET MAUI Safe Area Expert

Name: .NET MAUI Safe Area Expert
Author: davidortinau

bydavidortinau

•

Mobile Development

Implements precise edge-to-edge layouts and safe area insets for .NET MAUI applications using the latest .NET 10 cross-platform APIs.

This skill provides comprehensive guidance for implementing modern mobile layouts in .NET MAUI, focusing on the unified SafeAreaEdges API introduced in .NET 10. It helps developers navigate the complexities of system bars, notches, display cutouts, and soft keyboard avoidance across iOS, Android, and Mac Catalyst. Whether you are building immersive edge-to-edge UIs, keyboard-aware chat interfaces, or Blazor Hybrid applications utilizing CSS environment variables, this skill ensures your content is perfectly positioned and never obscured by system overlays.

Key Features

01Migration support from legacy iOS-only safe area APIs

02Soft keyboard avoidance and dynamic padding management

03Blazor Hybrid CSS safe area and env() variable integration

04Unified cross-platform SafeAreaEdges API implementation

05Platform-specific behavior guidance for iOS, Android, and Mac Catalyst

0680 GitHub stars

Use Cases

01Designing responsive chat interfaces that automatically adjust for the on-screen soft keyboard.

02Configuring Blazor Hybrid web content to respect device notches and home indicators using CSS.

03Creating immersive full-screen background layouts that flow behind status and navigation bars.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add davidortinau/maui-skills maui-safe-area

For use in Claude.ai and ChatGPT

Download Skill