← ClaudeAtlas

mobile-uilisted

Use when a ticket builds or reworks UI in a React Native / Expo (or React + Capacitor) mobile app and it must feel like a real, store-credible native app — not a wrapped mobile website. Covers the native-feel bar, safe-area/gesture/haptics, store-readiness, and mobile performance. Invoke for "make this screen feel native", "build the mobile X screen", "this feels like a website", "would this get approved", or as the mobile pack for any app-UI change.
tmj-90/gaffer · ★ 0 · Web & Frontend · score 69
Install: claude install-skill tmj-90/gaffer
# Build store-credible native-feel mobile UI Change the **skin, never the skeleton.** Build mobile UI that clears a native-feel bar and a store-readiness bar — without touching gameplay, navigation routes, state, scoring, or business logic. Where a redesign implies a structural change ("this should be a sheet, not a modal"), flag it as a **proposal**; do not silently implement it. ## The three non-negotiable bars A "premium" mobile surface must clear all three at once — failing any one ships as not-premium regardless of the others. 1. **Native feel.** Every hybrid/RN screen reads as a mobile website until deliberately de-websified. Tells to close: centred modals (→ bottom sheets), fade transitions (→ slide/shared-element), missing swipe-back and hardware-back handling, no haptics on primary taps, fonts flashing, wrong scroll bounce, ignored safe-area insets, default launch screen. 2. **Maturity (indie → store-credible).** Tidying a plateau makes the plateau more visible. Recommit: real type scale, brand chrome (not generic), activated margins, ambient life, and **one named hero detail per screen** — the deliberate moment the user remembers. 3. **Store readiness.** Most "wouldn't get approved" intuition is a finite checklist: tap targets ≥ 44pt, privacy/permission strings present, real launch screen, Dynamic Type / large-text support, working hardware back (Android), opposite colour scheme, no placeholder content. ## Steps 1. **Read the lore +