Call Me David

Prevents light/dark appearance mismatches in Expo apps, especially iOS liquid glass headers, status bars, and safe-area backgrounds.

Applies safe-area layout rules for Expo/React Native screens, especially with React Navigation headers. Use when content overlaps the notch/status bar, spacing feels inconsistent, or `headerTransparent: true` is enabled.

Diagnoses and fixes Expo/React Navigation status bar mismatches. Use when status bar text/icons are hard to read, not matching header/background, flickering between screens, or behaving unexpectedly with transparent headers and safe areas.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Ensures mobile app layouts work across iPhone, iPad, Android phones and tablets, small and large screens, landscape and portrait, notches, gesture areas, and dynamic text. Use when creating screens, refactoring layouts, reviewing UI code, building responsive components, fixing overflow or cut-off text, supporting tablets, handling dynamic font sizes, designing forms/lists/cards/modals/navigation, or implementing layouts in React Native, SwiftUI, Jetpack Compose, Flutter, or native mobile frameworks.

Tells you how to use the pressto button in react-native/expo apps

Fixes broken line height, spacing, wrapping, and baselines when React Native copy is built from one Text (or Animated.Text) per character or word inside View rows and flexWrap. Use when debugging "wrong padding/margins/typography" on staggered or per-glyph text, typewriter effects, character fade-ins, or any pattern that maps strings to many sibling Text nodes inside flex containers.