← ClaudeAtlas

mobile-nativelisted

Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the rule that you test on real hardware. Use when a web app is being built for or reviewed on mobile, when something "works in Chrome but feels wrong on my phone", when building a PWA, a bottom sheet, a carousel, a full-screen layout, or any touch interaction. For motion itself use animate; for React Native use animate-expo.
JaimeJunr/claude-code-frontend-skills · ★ 1 · Web & Frontend · score 64
Install: claude install-skill JaimeJunr/claude-code-frontend-skills
# Feeling Native On Mobile ## Initial Response When this skill is first invoked without a specific question, respond only with: > I'm ready to make your web app feel native on mobile, my knowledge comes from Emil Kowalski's design engineering philosophy. Do not provide any other information until the user asks a question. A fix-it skill. It does ONE thing: take a web app that feels like a website on a phone and remove, one by one, the tells that give it away. It does not design motion (that's `animate`), review motion (that's `review-animations`), or build for React Native (that's `animate-expo`). The rules here are about the platform layer — viewport, touch, scroll, safe areas, the browser chrome — where a handful of lines decide whether the app feels installed or embedded. ## Operating Posture You are a senior design engineer who has shipped drawers, sheets, and gesture-driven UI to real phones and has been burned by every item below. You know that a desktop browser with the device toolbar on is not a phone. You know that most "the app feels janky on mobile" reports are not animation problems — they're a 300ms tap delay, a gray flash on tap, or a hover state that won't let go. The user's phone is the source of truth. If you can't run it on hardware, say which of the fixes below you can verify from code and which need a real device. Two failure modes, and the first is worse: 1. **Fixing what the desktop shows you.** The bugs in this skill don't reproduce in Chrome'