safe-area-handling
✓Complete guide to handling safe areas in Capacitor apps for iPhone notch, Dynamic Island, home indicator, and Android cutouts. Covers CSS, JavaScript, and native solutions. Use this skill when users have layout issues on modern devices.
Installation
SKILL.md
Handle iPhone notch, Dynamic Island, home indicator, and Android cutouts properly.
Safe areas are the regions of the screen not obscured by:
| safe-area-inset-top | Notch/Dynamic Island/status bar | | safe-area-inset-bottom | Home indicator/navigation bar | | safe-area-inset-left | Left edge (landscape) | | safe-area-inset-right | Right edge (landscape) |
Complete guide to handling safe areas in Capacitor apps for iPhone notch, Dynamic Island, home indicator, and Android cutouts. Covers CSS, JavaScript, and native solutions. Use this skill when users have layout issues on modern devices. Source: cap-go/capgo-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/cap-go/capgo-skills --skill safe-area-handling- Source
- cap-go/capgo-skills
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-09
- Updated
- 2026-02-18
Quick answers
What is safe-area-handling?
Complete guide to handling safe areas in Capacitor apps for iPhone notch, Dynamic Island, home indicator, and Android cutouts. Covers CSS, JavaScript, and native solutions. Use this skill when users have layout issues on modern devices. Source: cap-go/capgo-skills.
How do I install safe-area-handling?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/cap-go/capgo-skills --skill safe-area-handling Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/cap-go/capgo-skills
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-09