Safe Area Handling

What it does

This skill enables AI agents to correctly handle device safe areas, ensuring UI elements do not overlap with system bars like the notch or dynamic island. It guarantees consistent rendering and interaction across various mobile devices by respecting platform-specific constraints.

When to use it

• Developing cross-platform mobile applications using Capacitor where screen real estate varies significantly between devices.
• Preventing content from being obscured by status bars, navigation gestures, or hardware cutouts on modern smartphones.
• Ensuring touch targets and interactive elements remain accessible regardless of the device's physical layout.

Key capabilities

• Detects and adapts to specific safe area insets defined by the operating system.
• Adjusts layout boundaries dynamically to prevent UI overlap with system UI elements.
• Provides a standardized approach for handling diverse mobile form factors within Capacitor environments.

Example prompts

• "Configure my Capacitor app to respect the iPhone notch and avoid placing buttons there."
• "How can I ensure my web view content doesn't get hidden behind the Android status bar?"
• "Implement safe area handling so my UI remains consistent on devices with dynamic islands."

Tips & gotchas

Ensure your project is built within a Capacitor environment to utilize this skill effectively. Always test on multiple device models, as safe area dimensions vary widely across different manufacturers and OS versions.