safe-area-handling
OfficialEnsure layouts respect device safe areas.
AuthorCap-go
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Safe areas on modern devices can obscure content; this guide provides strategies to ensure UI respects notches, Dynamic Island, home indicators, and Android cutouts. This Skill covers CSS, JavaScript, and native configurations to consistently render edge-to-edge layouts across iOS and Android devices.
Core Features & Use Cases
- Viewport and CSS: Enable safe-area insets with viewport-fit=cover and env(safe-area-inset-*) variables to pad content appropriately.
- Cross-platform guidance: Apply consistent patterns in CSS, TS/JS utilities, and native iOS/Android tweaks to support notches and display cutouts.
- Real-world use case: Implement a header and content layout that remains visible and accessible on iPhone with a notch or Dynamic Island and on Android devices with display cutouts.
Quick Start
Add the viewport-fit=cover meta tag and use env(safe-area-inset-*) values in your CSS to respect notches and home indicators.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: safe-area-handling Download link: https://github.com/Cap-go/capgo-skills/archive/main.zip#safe-area-handling Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.