Agent skill

Maui Safe Area

by davidortinau in davidortinau/maui-skills

.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+.

MITAuto-check passedMobile

Install Maui Safe Area

skills CLI
$ npx skills add davidortinau/maui-skills --skill maui-safe-area -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install davidortinau/maui-skills maui-safe-area --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/maui-skills/skills/maui-safe-area .claude/skills/maui-safe-area && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
maui-safe-area
GitHub stars
175
Token cost
~1.3k tokens
SKILL.md length
342 words
Files
2 (incl. references)
Skills in repo
41
Repo updated
First seen
Licence
MIT

At a glance

.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+.

  • Works in 5 steps: Layouts default to Container, not None → SoftInput on ScrollView has no effect → Default is not None → …
  • SafeAreaRegions
  • SKILL.md covers Breaking Changes, Common Gotchas, Decision Framework and Migration Quick Reference, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Maui Safe Area is an agent skill from davidortinau/maui-skills. .NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy APIs, and platform-specific behavior for Android, iOS, and Mac Catalyst. USE FOR: "safe area", "edge-to-edge", "SafeAreaEdges", "SafeAreaRegions", "keyboard avoidance", "notch insets", "status bar overlap", "iOS safe area", "Android edge-to-edge", "content behind status bar". DO NOT USE FOR: general layout…

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/safe-area-api.md`).

It sits in Mobile, covering Cross-platform mobile apps and Theming and dark mode. It works with .NET, iOS, Android and Blazor. The repository describes itself as: .NET MAUI skills for GitHub Copilot and Claude Code. The licence is MIT.

When your agent uses it

  • SafeAreaRegions
  • Keyboard avoidance
  • Status bar overlap
  • Android edge-to-edge

Example prompts

  • “safe area”
  • “edge-to-edge”
  • “SafeAreaEdges”
  • “/maui-safe-area”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Layouts default to Container, not None
  2. SoftInput on ScrollView has no effect
  3. Default is not None
  4. Blazor Hybrid double-padding
  5. iOS Shell/NavigationPage edge-to-edge

What it can do on your machine

Read from SKILL.md and the folder at commit 79bb4bf. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are xaml).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Maui Safe Area loads about 1.3k tokens when it runs, and up to ~3.4k if it reads all its reference files. Until then it costs about 164 tokens; SKILL.md has 342 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~164
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from davidortinau/maui-skills at commit 79bb4bf, republished under its MIT licence (© davidortinau). 342 words, ~1,275 tokens.

Download SKILL.mdSave it as .claude/skills/maui-safe-area/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
maui-safe-area
description
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy APIs, and platform-specific behavior for Android, iOS, and Mac Catalyst. USE FOR: "safe area", "edge-to-edge", "SafeAreaEdges", "SafeAreaRegions", "keyboard avoidance", "notch insets", "status bar overlap", "iOS safe area", "Android edge-to-edge", "content behind status bar". DO NOT USE FOR: general layout or grid design (use maui-collectionview), app lifecycle handling (use maui-app-lifecycle), or theming (use maui-theming).

Safe Area — Gotchas & Best Practices (.NET 10+)

Breaking Changes

⚠️ .NET 9 → 10: ContentPage default changed to None

ContentPage now defaults to edge-to-edge (None) on all platforms. In .NET 9, Android ContentPage behaved like Container. If your Android content goes under the status bar after upgrading, add SafeAreaEdges="Container" explicitly.

xaml
<!-- ❌ .NET 10 default — content goes under status bar on Android -->
<ContentPage>

<!-- ✅ Restore .NET 9 Android behavior -->
<ContentPage SafeAreaEdges="Container">
⚠️ WindowSoftInputModeAdjust.Resize migration

If you used WindowSoftInputModeAdjust.Resize in .NET 9, you may need SafeAreaEdges="All" on the ContentPage to maintain keyboard avoidance.

Common Gotchas

1. Layouts default to Container, not None

For true edge-to-edge, set SafeAreaEdges="None" on both the page and layouts:

xaml
<!-- ❌ Grid still respects system bars (its default is Container) -->
<ContentPage SafeAreaEdges="None">
    <Grid>
        <Image Source="bg.jpg" Aspect="AspectFill" />
    </Grid>
</ContentPage>

<!-- ✅ Both page and layout set to None -->
<ContentPage SafeAreaEdges="None">
    <Grid SafeAreaEdges="None">
        <Image Source="bg.jpg" Aspect="AspectFill" />
    </Grid>
</ContentPage>
2. SoftInput on ScrollView has no effect

ScrollView manages its own content insets. Wrap it in a Grid/StackLayout instead:

xaml
<!-- ❌ SoftInput is ignored on ScrollView -->
<ScrollView SafeAreaEdges="SoftInput">

<!-- ✅ Set SoftInput on the wrapper layout -->
<Grid SafeAreaEdges="Container, Container, Container, SoftInput">
    <ScrollView> ... </ScrollView>
</Grid>
3. Default is not None

Default = "use platform defaults for this control type." None = "edge-to-edge." They differ significantly on ScrollView (iOS maps Default to automatic content insets).

4. Blazor Hybrid double-padding
xaml
<!-- ❌ XAML safe area + CSS env() = double padding -->
<ContentPage SafeAreaEdges="Container">
    <BlazorWebView ... />  <!-- CSS also uses env(safe-area-inset-*) -->

<!-- ✅ Pick ONE approach — CSS is recommended for Blazor -->
<ContentPage SafeAreaEdges="None">
    <BlazorWebView ... />  <!-- CSS handles all insets with env() -->
5. iOS Shell/NavigationPage edge-to-edge

Content won't extend behind the nav bar unless you set a transparent background AND hide the separator:

xaml
<Shell Shell.BackgroundColor="#80000000"
       Shell.NavBarHasShadow="False" />

Decision Framework

ScenarioSafeAreaEdges value
Forms, critical inputsAll
Photo viewer, video player, gameNone (on page AND layout)
Scrollable content with fixed header/footerContainer
Chat/messaging with bottom input barPer-edge: Container, Container, Container, SoftInput
Blazor Hybrid appNone on page, CSS env() for insets
Show full SKILL.md (149 more words)Show less

Migration Quick Reference

Legacy (.NET 9)New (.NET 10+)
ios:Page.UseSafeArea="True"SafeAreaEdges="Container"
IgnoreSafeArea="True"SafeAreaEdges="None"
WindowSoftInputModeAdjust.ResizeSafeAreaEdges="All" on ContentPage

Legacy properties still work but are obsolete.

Best Practices

  1. Combine SafeAreaEdges with Padding — safe area handles insets, Padding adds visual spacing:

    xaml
    <ContentPage SafeAreaEdges="All">
        <VerticalStackLayout Padding="20">
            <!-- Both applied — no conflict -->
        </VerticalStackLayout>
    </ContentPage>
  2. Use per-control settings for mixed layouts (edge-to-edge header + safe body + keyboard-aware footer).

  3. For Blazor Hybrid, prefer CSS env() and leave SafeAreaEdges="None". Add viewport-fit=cover to the <meta viewport> tag.

  4. Test on notched devices (iPhone X+, Android cutouts), tablets in landscape, and varying screen sizes.

Checklist

  • Android upgrade: SafeAreaEdges="Container" added if content goes under status bar
  • Edge-to-edge: None set on both page and layout
  • ScrollView keyboard avoidance uses wrapper Grid, not ScrollView's own SafeAreaEdges
  • Blazor Hybrid: using either XAML or CSS safe areas, not both
  • viewport-fit=cover in Blazor's index.html <meta viewport> tag
  • Legacy UseSafeArea / IgnoreSafeArea migrated to SafeAreaEdges

© davidortinau, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/maui-skills/skills/maui-safe-area of davidortinau/maui-skills.

  • SKILL.md
  • references/safe-area-api.md

Open the folder on GitHubat commit 79bb4bf

Compare with similar skills

Maui Safe Area next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Maui Safe Area compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Maui Safe Area this skilldavidortinau/maui-skills175—~1.3kAutomated safety check: PassMIT
Maui Safe Areadotnet/skills5.6k1 repos~3.2kAutomated safety check: PassMIT
Maui AI DebuggingRedth/Maui.Gtk101—~4.1kAutomated safety check: PassMIT
MAUI Integration Test Runnerdotnet/maui23k—~2.1kAutomated safety check: PassMIT
ThemingCode-with-Beto/skills140—~2.5kAutomated safety check: PassNone
Dotnet UInovotnyllc/dotnet-artisan232—~1.3kAutomated safety check: PassMIT

Similar skills

  • Maui Safe Area

    dotnet/skills

    Official

    .NET MAUI safe area and edge-to-edge layout guidance for .NET 10+.

    5.6k GitHub starsUsed in 1 repo~3.2k tokens
    MobileAuto-check passed
  • Maui AI Debugging

    Redth/Maui.Gtk

    End-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps as an AI agent.

    101 GitHub stars~4.1k tokensUpdated 5 mo ago
    MobileAuto-check passed
  • Official

    Builds and packs .NET MAUI, installs the local workloads and runs integration tests for templates, samples and end-to-end scenarios by category.

    23k GitHub stars~2.1k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Theming

    Code-with-Beto/skills

    Scaffold a unified, cross-platform color theme system into an Expo Router app.

    140 GitHub stars~2.5k tokensUpdated 3 mo ago
    MobileAuto-check passed
  • Dotnet UI

    novotnyllc/dotnet-artisan

    Builds .NET UI apps across Blazor (Server, WASM, Hybrid, Auto), MAUI (XAML, MVVM, Shell, Native AOT), Uno Platform (MVUX, Extensions, Toolkit), WPF (.NET 8+, Fluent theme), WinUI 3 (Windows App SDK…

    232 GitHub stars~1.3k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed
  • Official

    Builds and runs .NET MAUI device tests locally on iOS simulators, MacCatalyst, Android emulators or Windows, with optional category filtering.

    23k GitHub stars~3.3k tokensUpdated yesterday
    Testing & QAAuto-check passed

More from davidortinau/maui-skills

All 41 skills in this repo
  • Maui Hot Reload Diagnostics

    davidortinau/maui-skills

    Diagnose and troubleshoot .NET MAUI Hot Reload issues (C Hot Reload, XAML Hot Reload, Blazor Hybrid).

    175 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Maui Accessibility

    davidortinau/maui-skills

    Guide for making .NET MAUI apps accessible — screen reader support via SemanticProperties, heading levels, AutomationProperties visibility control, programmatic focus and announcements, and…

    175 GitHub stars~974 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui Animations

    davidortinau/maui-skills

    .NET MAUI view animations, custom animations, easing functions, rotation, scale, translation, and fade effects.

    175 GitHub stars~911 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui App Icons Splash

    davidortinau/maui-skills

    .NET MAUI app icon configuration, splash screen setup, SVG to PNG conversion at build time, composed/adaptive icons, and platform-specific icon and splash screen requirements for Android, iOS, Mac…

    175 GitHub stars~995 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui App Lifecycle

    davidortinau/maui-skills

    .NET MAUI app lifecycle guidance covering the four app states (not running, running, deactivated, stopped), cross-platform Window lifecycle events, backgrounding and resume behaviour…

    175 GitHub stars~947 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui Aspire

    davidortinau/maui-skills

    Guide for .NET MAUI apps consuming .NET Aspire-hosted backend services.

    175 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about Maui Safe Area

What does Maui Safe Area do?

.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Maui Safe Area is an agent skill from davidortinau/maui-skills.NET 10+.

When should I use Maui Safe Area?

Maui Safe Area fits situations like: safeAreaRegions; keyboard avoidance; status bar overlap; android edge-to-edge.

How do I install Maui Safe Area in Claude Code?

Run `npx skills add davidortinau/maui-skills --skill maui-safe-area -a claude-code`. Or copy the skill folder (plugins/maui-skills/skills/maui-safe-area in davidortinau/maui-skills) into .claude/skills/maui-safe-area in your project. Claude Code loads it when a task matches its description.

How do I install Maui Safe Area in Codex?

Run `npx skills add davidortinau/maui-skills --skill maui-safe-area -a codex`. Or copy the skill folder (plugins/maui-skills/skills/maui-safe-area in davidortinau/maui-skills) into .agents/skills/maui-safe-area in your project. Codex loads it when a task matches its description.

Can I use Maui Safe Area in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davidortinau/maui-skills --skill maui-safe-area -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/maui-safe-area, .gemini/skills/maui-safe-area, .github/skills/maui-safe-area and .opencode/skills/maui-safe-area in your project.

What does Maui Safe Area need to run?

SKILL.md names no scripts, command-line tools or credentials: Maui Safe Area is instructions for the agent only.

Does Maui Safe Area access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Maui Safe Area safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Maui Safe Area use?

Maui Safe Area is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Maui Safe Area use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.1k tokens, read only when the agent opens those files.

What are the alternatives to Maui Safe Area?

Skills that share tags, products or a category with Maui Safe Area: Maui Safe Area (dotnet/skills, 5.6k stars), Maui AI Debugging (Redth/Maui.Gtk, 101 stars), MAUI Integration Test Runner (dotnet/maui, 23k stars) and Theming (Code-with-Beto/skills, 140 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Maui Safe Area?

davidortinau (a GitHub user) maintains it in davidortinau/maui-skills, which has 175 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on July 6, 2026.

Source: davidortinau/maui-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.