What is the mobile-native skill?
mobile-native is a skill in emilkowalski/skills that covers eleven platform-layer fixes: sticky hover states, tap highlight flashes, viewport height bugs, input zoom, scroll lag, pull-to-refresh hijacking, notch content, long-press selection, carousel scroll direction, status bar color and hardware testing. It gates fixes by capability with media queries instead of user-agent sniffing, and never disables zoom.
mobile-native is one skill in emilkowalski/skills. It addresses the CSS and meta tag fixes that turn a web app from feeling like a website inside a browser into something that feels installed on the phone.
The skill takes the view of a design engineer who has shipped gesture-driven UI to real phones, and warns against two failure modes: trusting desktop emulation, where most of these bugs never reproduce, and reaching for JavaScript when a CSS or meta tag fix is enough.
What changes in the agent's output
- Hover effects get gated behind
@media (hover: hover) and (pointer: fine)instead of staying stuck after a tap on touch devices. - Input font size gets set to at least 16px so the browser stops zooming in on focus, rather than disabling zoom outright.
- 100dvh or 100svh replaces 100vh for layout height, avoiding the classic mobile viewport height bug.
- overscroll-behavior: none stops a scrolling list from accidentally triggering pull-to-refresh.
The never-ship checklist
The skill contrasts forbidden patterns with the correct fix side by side: never maximum-scale=1, fix input font size to 16px instead; never device sniffing, use a hover and pointer media query instead; and never skip hardware testing before calling a gesture fix done.
Who the mobile-native skill is for
Best for
- Web apps meant to feel installed, not like a page viewed in a browser tab.
- Teams chasing a specific mobile bug, such as pull-to-refresh hijacking or notch content.
- Projects that test primarily in desktop emulation and need a real-device pass.
Not for
- If your job is mostly setting mobile-first breakpoints and container queries for layout, the responsive design skill is the better fit for that.
- When the task is building native Expo or React Native screens from scratch, the building-native-ui skill is the better fit for that.
- If your job is mostly auditing a WordPress site's mobile layout and Core Web Vitals, the mobile experience report skill is the better fit for that.
Use it with UiChemy
These are platform-layer CSS and meta tag fixes on an existing build. Once the mobile feel is right, UiChemy AI to WordPress carries that front-end build into an editable WordPress page.
How to install Mobile Native Skill for AI Coding Agents
npx skills@latest add emilkowalski/skillsAdd the skills
Run
npx skills@latest add emilkowalski/skillsfrom your project to pull in the full set, including mobile-native.Or use the plugin marketplace
In Claude Code,
/plugin marketplace add emilkowalski/skillsregisters the repository, then install the plugin that bundles mobile-native with the rest.Ask for it by name
Describe a mobile bug, such as sticky hover or pull-to-refresh hijacking, in your prompt and the agent pulls in mobile-native to fix it.
Check that it loaded
Ask the agent to fix a specific mobile symptom, such as input zoom on focus, and check that it changes font-size rather than disabling zoom with maximum-scale.
Key features
- Hover-state gating
@media (hover: hover) and (pointer: fine)keeps hover effects off touch devices, fixing the sticky hover-after-tap bug without device sniffing. - Tap highlight removal
-webkit-tap-highlight-colorgets set to transparent, removing the gray flash a tap otherwise leaves on touch devices. - Correct viewport height units100dvh for a full app layout and 100svh for a hero section replace plain 100vh, which miscalculates height once mobile browser chrome shows or hides.
- Input zoom fix without disabling zoomSetting input font-size to at least 16px stops the browser's automatic zoom on focus, so zoom stays enabled for users who need it.
- Tap feedback and touch-actionFeedback on pointerdown paired with touch-action: manipulation removes the roughly 300ms delay that makes taps feel laggy.
- Pull-to-refresh controloverscroll-behavior: none on a scrolling container stops an accidental swipe from triggering the browser's native pull-to-refresh.
- Safe-area notch handlingviewport-fit=cover plus env(safe-area-inset-*) keeps content clear of a device notch or rounded corners instead of running under them.
- Carousel scroll direction fixtouch-action: pan-y on a horizontal carousel lets vertical page scrolling pass through instead of fighting the carousel's own drag gesture.
- Per-scheme status bar colorSeparate theme-color meta tags for light and dark schemes keep the status bar color matched to the active theme instead of one fixed value.
- Mandatory hardware testingEvery fix in the skill calls for verification on a real device, since many of these bugs do not reproduce at all in desktop emulation.
Frequently asked questions
What is the mobile-native skill?
It is a skill in emilkowalski/skills that fixes the CSS and meta tag issues that make a web app feel like a website in a browser rather than an installed native app, covering eleven specific platform-layer bugs from sticky hover to notch content.
How do I install the mobile-native skill?
Run npx skills@latest add emilkowalski/skills from a project to add the full set, or register the repository as a Claude Code plugin marketplace and install the bundled plugin. Describing a mobile bug in a prompt also pulls the skill in automatically.
How does mobile-native fix the sticky hover bug on touch devices?
It gates hover styles behind @media (hover: hover) and (pointer: fine), so a hover effect only applies on devices with a real pointer. On touch, the effect never gets stuck active after a tap the way plain :hover can.
Does mobile-native disable zoom to stop input fields from zooming in?
No. The skill treats disabling zoom as forbidden. Instead it sets a minimum 16px font-size on inputs, which stops the browser's automatic zoom on focus while leaving pinch-to-zoom available for users who rely on it.
What is the viewport height fix in mobile-native?
It replaces 100vh with 100dvh for a full app layout or 100svh for a hero section. Plain 100vh does not account for mobile browser chrome appearing or disappearing, which creates a layout jump the dynamic and small viewport units avoid.
How does mobile-native handle a device notch?
It applies viewport-fit=cover in the meta viewport tag along with env(safe-area-inset-*) padding on affected elements, so content stays clear of a notch or rounded screen corners instead of rendering underneath them.
Why does mobile-native insist on real device testing?
Many of the bugs it fixes, such as pull-to-refresh hijacking or tap highlight flashes, do not reproduce in desktop browser emulation at all. The skill treats a fix as incomplete until someone checks it on actual phone hardware.