skills.rest
emilkowalski
emilkowalskiCOMMUNITY
Explore all skills by this author →
Website𝕏@emilkowalskiGitHub

mobile-native

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

41.1k|2.3k|Updated Mar 16, 2026
Search Tags:#css#mobile#pwa#responsive#safe-area#viewport#touch
One-click install
npx skills add https://github.com/emilkowalski/skills --skill mobile-native-emilkowalski
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-native
Source: https://github.com/emilkowalski/skills/tree/main/skills/mobile-native
Command: npx skills add https://github.com/emilkowalski/skills --skill mobile-native-emilkowalski

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, and content hidden under the notch. 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: Match visible problems (gray flash on tap, stuck hover, wrong layout height) to one-line CSS or HTML fixes like -webkit-tap-highlight-color: transparent, 100dvh, and @media (hover: hover). - Platform-layer coverage: Handles viewport units, safe-area insets, touch-action, overscroll-behavior, theme-color per color scheme, and input font sizing to prevent iOS zoom. - Use Case: You are building a PWA with a bottom sheet and carousel. Use this Skill to set viewport-fit=cover, pad with env(safe-area-inset-bottom), apply touch-action: pan-y to the carousel, and verify the result on real hardware. ## Quick Start Review my web app and fix everything that makes it feel like a website instead of a native app on my 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 hovering input. Touch users get press feedback through :active styles instead, which work on every input type.

How to 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 are smaller. Never use maximum-scale=1 or user-scalable=no, which are accessibility failures.

What is the difference between 100vh, 100dvh, and 100svh?▼

100vh is the largest viewport and overflows when the URL bar is visible. Use 100dvh for app shells that should track the visible area, and 100svh for heroes so content is never cut off or shifted mid-scroll.

Does Chrome device emulation catch mobile web bugs?▼

No. Sticky hover, tap highlight, input zoom, click delay, overscroll, safe areas, and keyboard behavior only reproduce on real hardware. Connect a phone via LAN IP and debug with Safari Web Inspector or chrome://inspect.

Why does my carousel scroll the page vertically on mobile?▼

The browser cannot tell whether a swipe targets the carousel or the page. Set touch-action: pan-y on the horizontal carousel so the browser keeps vertical panning while the element handles horizontal gestures.

When should I not use user-select: none?▼

Never apply user-select: none to body or content text, since users copy addresses, error messages, and order numbers. Apply it only to controls like buttons, tabs, chips, and drag handles.

Related Skills

Explore More Design & Creative Skills→
gileckgileck

ui-mobile-first-shadcn

Enforce mobile-first UI rules for shadcn and Tailwind in Next.js apps.

Community
Basic
jamditisjamditis
359

mobile-debugging

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

Community
Basic
quanthubbrquanthubbr

animate-expo

Implements React Native and Expo animations using Reanimated, Gesture Handler, and native screen transitions.

Official
Advanced
beelabstudiobeelabstudio

animate-expo

Implements UI-thread animations, gestures, and haptics for React Native Expo apps.

Official
Advanced