skills.rest
beelabstudio
beelabstudioOFFICIAL
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 Mar 14, 2026
Search Tags:#css#pwa#responsive#safe-area#viewport#touch#mobile web
One-click install
npx skills add https://github.com/beelabstudio/ai --skill mobile-native-beelabstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-native
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/mobile-native
Command: npx skills add https://github.com/beelabstudio/ai --skill mobile-native-beelabstudio

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 page 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 one-line CSS or HTML fixes. - Platform-layer rules: Covers viewport units (dvh/svh), safe-area insets, touch-action, overscroll-behavior, tap highlight, user-select, theme-color, and input font sizing. - Use Case: You ship a PWA with a bottom sheet and users report the close button sits under the home indicator and taps feel laggy. The Skill adds viewport-fit=cover with env(safe-area-inset-bottom) padding and touch-action: manipulation with :active press feedback. ## Quick Start Ask the assistant to review your web app's mobile CSS and fix everything that makes it feel like a website instead of a native app 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 hover states stuck after tap on mobile?▼

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

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

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

Why does 100vh break my mobile layout?▼

100vh equals the largest viewport height, so with the URL bar visible your layout overflows and bottom-pinned elements hide under browser chrome. Use 100dvh for app shells that track the visible area and 100svh for heroes that must never be cut off.

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

No. Sticky hover, tap highlight, the click delay, overscroll, safe areas, and the software keyboard only reproduce on real hardware. Connect a phone over USB and debug via Safari Web Inspector or chrome://inspect.

How do I stop pull-to-refresh from hijacking my app's scroll?▼

Set overscroll-behavior: none on html and body, then overscroll-behavior: contain on inner scrollable containers like sheets and chat lists. Avoid touchmove preventDefault listeners, which block scrolling and hurt frame rates.

When should I not use this mobile web approach?▼

This Skill covers the web platform layer only. For motion design use an animation skill, and for React Native apps use a native-specific skill, since CSS viewport units and meta tags do not apply there.

Related Skills

Explore More Software Engineering Skills→
Jicate-SolutionsJicate-Solutions

mobile-responsive

Convert web pages to mobile-responsive layouts in Next.js/React with Tailwind CSS.

Official
Intermediate
jamditisjamditis
359

mobile-debugging

Debug mobile web pages using Eruda, vConsole, and remote debugging tools.

Community
Basic
mooch10mooch10
1

animate-expo

Implements React Native and Expo animations using Reanimated, Gesture Handler, and Expo Router.

Community
Advanced
bidahbidah
28

building-native-ui

Build React Native and Expo interfaces with Expo Router, Flexbox, and Reanimated.

Community
Intermediate