skills.rest
Nadav011
Nadav011COMMUNITY
Explore all skills by this author →
GitHub

mobile-native

Applies CSS and meta-tag fixes that make web apps feel native on mobile devices.

Updated Sep 15, 2026
Search Tags:#responsive design#css#pwa#safe-area#viewport#mobile web#touch-action
One-click install
npx skills add https://github.com/Nadav011/nadavai-claude --skill mobile-native-nadav011
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-native
Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/mobile-native
Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill mobile-native-nadav011

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web apps often feel like websites on phones due to sticky hover states, tap highlight flashes, the 100vh viewport bug, input-triggered zoom, laggy taps, pull-to-refresh hijacking, notch overlap, and mismatched status bars. This Skill diagnoses each symptom and applies the exact CSS declaration or meta tag that fixes it. ## Core Features & Use Cases - Symptom-to-fix mapping: A lookup table matches visible problems (gray flash on tap, stuck hover, wrong layout height) to the precise fix, such as -webkit-tap-highlight-color: transparent or 100dvh. - Platform-layer rules: Covers viewport units (dvh/svh), touch-action, overscroll-behavior, env(safe-area-inset-*), theme-color per color scheme, and 16px input font sizing to prevent iOS zoom. - Use Case: You are building a PWA with a bottom sheet and carousel. The Skill gives you the baseline meta tags, overscroll-behavior rules, touch-action: pan-y for the carousel, and safe-area padding so the app feels installed rather than embedded. ## Quick Start Ask the assistant to review your web app's mobile CSS and fix everything that makes it feel like a website on a phone.

Frequently Asked Questions about mobile-native

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix sticky hover states on mobile after a tap?▼

Wrap all hover styles in `@media (hover: hover) and (pointer: fine)` so they only apply to devices with a precise pointing device. Touch users get press feedback through `:active` styles instead, which work on every input type.

Why does my mobile layout have the wrong height with 100vh?▼

On mobile, 100vh is the largest viewport height, so elements overflow behind the visible URL bar. Use 100dvh for app shells that should track the visible area, and 100svh for heroes so content is never cut off.

How do I stop iOS Safari from zooming into input fields?▼

Set input, textarea, and select font-size to at least 16px, since iOS zooms when focused inputs use smaller text. Never use maximum-scale=1 or user-scalable=no, which are accessibility failures.

Can I verify these mobile fixes in Chrome device emulation?▼

No. Sticky hover, tap highlight, the URL bar's effect on vh, input zoom, click delay, overscroll, and safe areas only reproduce on real hardware. Connect a phone over USB and use Safari Web Inspector or chrome://inspect.

When should I use touch-action none versus pan-y?▼

Use `touch-action: pan-y` on horizontal carousels so the browser keeps vertical scrolling while the element handles horizontal. Reserve `touch-action: none` for elements that own every gesture axis, like drag-to-dismiss sheets.

Related Skills

Explore More Software Engineering Skills→
Arete-ConsortiumArete-Consortium
4

web-frontend-builder

Builds production-grade frontend interfaces with React, Next.js, and Tailwind CSS.

Official
Intermediate
gaomingzhao666gaomingzhao666
2

debugging-capacitor

Diagnose WebView, native, network, and crash issues in Capacitor iOS and Android apps.

Community
Intermediate
taxmaxitaxmaxi
1

css-animations

Write CSS transitions, keyframes, transforms, and clip-path animations without JavaScript libraries.

Official
Intermediate
addisonkaddisonk
1

converting-web-to-react-native

Convert React web prototypes into Expo Router apps with Nativewind and Reanimated.

Community
Advanced