Maui Safe Area
dotnet/skills
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+.
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+.
$ npx skills add davidortinau/maui-skills --skill maui-safe-area -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install davidortinau/maui-skills maui-safe-area --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "maui-safe-area" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-safe-area into .claude/skills/maui-safe-area/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-safe-area", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-safe-areaType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add davidortinau/maui-skills --skill maui-safe-area -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install davidortinau/maui-skills maui-safe-area --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/maui-skills/skills/maui-safe-area .agents/skills/maui-safe-area && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "maui-safe-area" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-safe-area into .agents/skills/maui-safe-area/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-safe-area", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davidortinau/maui-skills --skill maui-safe-area -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install davidortinau/maui-skills maui-safe-area --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/maui-skills/skills/maui-safe-area .cursor/skills/maui-safe-area && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "maui-safe-area" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-safe-area into .cursor/skills/maui-safe-area/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-safe-area", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/davidortinau/maui-skills.git --path plugins/maui-skills/skills/maui-safe-area--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add davidortinau/maui-skills --skill maui-safe-area -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install davidortinau/maui-skills maui-safe-area --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/maui-skills/skills/maui-safe-area .gemini/skills/maui-safe-area && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "maui-safe-area" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-safe-area into .gemini/skills/maui-safe-area/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-safe-area", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install davidortinau/maui-skills maui-safe-areaInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add davidortinau/maui-skills --skill maui-safe-area -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/maui-skills/skills/maui-safe-area .github/skills/maui-safe-area && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "maui-safe-area" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-safe-area into .github/skills/maui-safe-area/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-safe-area", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davidortinau/maui-skills --skill maui-safe-area -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install davidortinau/maui-skills maui-safe-area --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/maui-skills/skills/maui-safe-area .opencode/skills/maui-safe-area && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "maui-safe-area" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-safe-area into .opencode/skills/maui-safe-area/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-safe-area", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
maui-safe-area.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 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.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 79bb4bf. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from davidortinau/maui-skills at commit 79bb4bf, republished under its MIT licence (© davidortinau). 342 words, ~1,275 tokens.
.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.NoneContentPage 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.
<!-- ❌ .NET 10 default — content goes under status bar on Android -->
<ContentPage>
<!-- ✅ Restore .NET 9 Android behavior -->
<ContentPage SafeAreaEdges="Container">If you used WindowSoftInputModeAdjust.Resize in .NET 9, you may need
SafeAreaEdges="All" on the ContentPage to maintain keyboard avoidance.
Container, not NoneFor true edge-to-edge, set SafeAreaEdges="None" on both the page and layouts:
<!-- ❌ 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>SoftInput on ScrollView has no effectScrollView manages its own content insets. Wrap it in a Grid/StackLayout instead:
<!-- ❌ SoftInput is ignored on ScrollView -->
<ScrollView SafeAreaEdges="SoftInput">
<!-- ✅ Set SoftInput on the wrapper layout -->
<Grid SafeAreaEdges="Container, Container, Container, SoftInput">
<ScrollView> ... </ScrollView>
</Grid>Default is not NoneDefault = "use platform defaults for this control type." None = "edge-to-edge."
They differ significantly on ScrollView (iOS maps Default to automatic content insets).
<!-- ❌ 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() -->Content won't extend behind the nav bar unless you set a transparent background AND hide the separator:
<Shell Shell.BackgroundColor="#80000000"
Shell.NavBarHasShadow="False" />| Scenario | SafeAreaEdges value |
|---|---|
| Forms, critical inputs | All |
| Photo viewer, video player, game | None (on page AND layout) |
| Scrollable content with fixed header/footer | Container |
| Chat/messaging with bottom input bar | Per-edge: Container, Container, Container, SoftInput |
| Blazor Hybrid app | None on page, CSS env() for insets |
| Legacy (.NET 9) | New (.NET 10+) |
|---|---|
ios:Page.UseSafeArea="True" | SafeAreaEdges="Container" |
IgnoreSafeArea="True" | SafeAreaEdges="None" |
WindowSoftInputModeAdjust.Resize | SafeAreaEdges="All" on ContentPage |
Legacy properties still work but are obsolete.
Combine SafeAreaEdges with Padding — safe area handles insets, Padding adds visual spacing:
<ContentPage SafeAreaEdges="All">
<VerticalStackLayout Padding="20">
<!-- Both applied — no conflict -->
</VerticalStackLayout>
</ContentPage>Use per-control settings for mixed layouts (edge-to-edge header + safe body + keyboard-aware footer).
For Blazor Hybrid, prefer CSS env() and leave SafeAreaEdges="None".
Add viewport-fit=cover to the <meta viewport> tag.
Test on notched devices (iPhone X+, Android cutouts), tablets in landscape, and varying screen sizes.
SafeAreaEdges="Container" added if content goes under status barNone set on both page and layoutSafeAreaEdgesviewport-fit=cover in Blazor's index.html <meta viewport> tagUseSafeArea / 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
SKILL.md and 1 other file (references) in plugins/maui-skills/skills/maui-safe-area of davidortinau/maui-skills.
Open the folder on GitHubat commit 79bb4bf
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Maui Safe Area this skilldavidortinau/maui-skills | 175 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Maui Safe Areadotnet/skills | 5.6k | 1 repos | ~3.2k | Automated safety check: Pass | MIT | |
| Maui AI DebuggingRedth/Maui.Gtk | 101 | — | ~4.1k | Automated safety check: Pass | MIT | |
| MAUI Integration Test Runnerdotnet/maui | 23k | — | ~2.1k | Automated safety check: Pass | MIT | |
| ThemingCode-with-Beto/skills | 140 | — | ~2.5k | Automated safety check: Pass | None | |
| Dotnet UInovotnyllc/dotnet-artisan | 232 | — | ~1.3k | Automated safety check: Pass | MIT |
dotnet/skills
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+.
Redth/Maui.Gtk
End-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps as an AI agent.
dotnet/maui
Builds and packs .NET MAUI, installs the local workloads and runs integration tests for templates, samples and end-to-end scenarios by category.
Code-with-Beto/skills
Scaffold a unified, cross-platform color theme system into an Expo Router app.
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…
dotnet/maui
Builds and runs .NET MAUI device tests locally on iOS simulators, MacCatalyst, Android emulators or Windows, with optional category filtering.
davidortinau/maui-skills
Diagnose and troubleshoot .NET MAUI Hot Reload issues (C Hot Reload, XAML Hot Reload, Blazor Hybrid).
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…
davidortinau/maui-skills
.NET MAUI view animations, custom animations, easing functions, rotation, scale, translation, and fade effects.
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…
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…
davidortinau/maui-skills
Guide for .NET MAUI apps consuming .NET Aspire-hosted backend services.
Categories
.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+.
Maui Safe Area fits situations like: safeAreaRegions; keyboard avoidance; status bar overlap; android edge-to-edge.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Maui Safe Area is instructions for the agent only.
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.
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.
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.
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.
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.
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.