# Uno Toolkit Safearea

> Use SafeArea to keep content within visible screen bounds, avoiding notches, status bars, and on-screen keyboards. Essential for mobile forms.

- Skill: `unoplatform/uno-toolkit-safearea` (Agent Skill)
- Install (CLI): `npx skillmds@latest add unoplatform/uno-toolkit-safearea`
- Raw SKILL.md: https://api.skillmd.com/api/skills/unoplatform/uno-toolkit-safearea/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: unoplatform (https://skillmd.com/u/unoplatform)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/unoplatform/uno-toolkit-safearea

---


# Uno Toolkit SafeArea — Agent Skill

## Workflow

> **Docs lookup:** call `uno_platform_docs_search(...)` first, then `uno_platform_docs_fetch(sourcePath="…")` using the `sourcePath` field from a result (a relative `.md` path; add the result's `anchor` for a section). Never pass a URL, a `.html` link, or a hand-built path.

### Step 1: Fetch the SafeArea Documentation

```
uno_platform_docs_search("Uno Toolkit SafeArea insets notch keyboard mobile form")
```

Primary documentation pages:
- **SafeArea Control**: `external/uno.toolkit.ui/doc/controls/SafeArea.md`
- **SafeArea How-To**: `external/uno.toolkit.ui/doc/controls/walkthroughs/SafeArea.howto.md`

Fetch the how-to:

```
uno_platform_docs_fetch(sourcePath="external/uno.toolkit.ui/doc/controls/walkthroughs/SafeArea.howto.md")
```

### Step 2: For Detailed Properties Reference

```
uno_platform_docs_fetch(sourcePath="external/uno.toolkit.ui/doc/controls/SafeArea.md")
```

## Key Principles (Stable)

- **ALWAYS use SafeArea** on pages with TextBox/PasswordBox on mobile — keyboard WILL obscure inputs otherwise
- Two usage modes: `<SafeArea Insets="...">` (control) or `utu:SafeArea.Insets="..."` (attached property)
- `Insets` values: `Left`, `Top`, `Right`, `Bottom`, `SoftInput` (keyboard), or combinations
- `Mode` — `Padding` (default, adds padding) or `InsetMode.Margin` (adds margin)
- For keyboard: use `Insets="SoftInput"` or `Insets="SoftInput,Bottom"`
- XAML namespace: `xmlns:utu="using:Uno.Toolkit.UI"`

## Related Skills

- [[uno-toolkit-input-extensions]] — Auto-focus and keyboard behavior for forms
- [[uno-toolkit-statusbar-extensions]] — Status bar customization