Handles the notch, Dynamic Island, home indicator, and display cutouts so your Capacitor app doesn't put content where users can't see it. The guide covers CSS environment variables like safe-area-inset-top with proper viewport-fit=cover setup, plus JavaScript solutions for reading insets dynamically and React/Vue hooks if you need programmatic control. It's especially helpful when building tab bars or full-bleed layouts where you want background colors to extend to screen edges but interactive elements to stay in safe zones. The examples are complete enough to drop into real projects, and it covers both portrait and landscape orientation changes.
npx skills add https://github.com/cap-go/capacitor-skills --skill safe-area-handling