Maui Safe Area

If you're hitting .NET 10 and your Android content suddenly bleeds behind the status bar, this is why: the new SafeAreaEdges property replaced the old iOS-only UseSafeArea API and changed ContentPage's default to edge-to-edge on all platforms. The skill covers the SafeAreaRegions flags (Container for system bars, SoftInput for keyboard), per-edge control, and migration patterns for chat UIs, immersive layouts, and mixed designs where your header goes full-bleed but your form stays safe. It's focused on .NET 10 plus only. If you're still on .NET 9, you'll need the legacy properties instead.

skills.sh installs: 3.9K
GitHub stars: 5.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dotnet/skills --skill maui-safe-area --agent claude-code

Installs into .claude/skills of the current project.

Files

Safe Area & Edge-to-Edge Layout (.NET 10+)

.NET 10 introduces a brand-new, cross-platform safe area API that replaces the legacy iOS-only UseSafeArea and the layout-level IgnoreSafeArea properties. The new SafeAreaEdges property and SafeAreaRegions flags enum give you per-edge, per-control safe area management on Android, iOS, and Mac Catalyst from a single API surface.

This is new API surface in .NET 10. If the project targets .NET 9 or earlier, these APIs do not exist. Guide the developer to the legacy ios:Page.UseSafeArea and Layout.IgnoreSafeArea properties instead.

When to Use

Content overlaps status bar, notch, Dynamic Island, or home indicator after upgrading to .NET 10
Implementing edge-to-edge / immersive layouts (photo viewers, video players, maps)
Keyboard avoidance for chat or form UIs
Migrating from ios:Page.UseSafeArea, Layout.IgnoreSafeArea, or WindowSoftInputModeAdjust.Resize
Blazor Hybrid apps that need CSS env(safe-area-inset-*) coordination
Mixed layouts with an edge-to-edge header but a safe-area-respecting body