mobile-native Skill for Claude: Make a Web App Feel Native on a Phone
mobile-native makes your assistant fix the small CSS and meta-tag details that make a web app feel like a website on a phone.
- Installs
- 102.4K
- on skills.sh
- Stars
- 52.7K
- on GitHub
- Updated
- Oct 2026
- last repo commit
mobile-native is a fix-it skill. It maps a symptom you see on a phone to a fix and the reason behind it: stuck hover states, gray tap flashes, the wrong 100vh, inputs that zoom the page, laggy taps, pull-to-refresh, content under the notch, long-press text selection, carousels that scroll the wrong way and a mismatched status bar. There are 11 fixes in all, plus a baseline of viewport, theme-color and CSS to ship first.
It loads when a web app is built for or reviewed on mobile, or when something works in Chrome but feels wrong on a phone. It prefers CSS and media queries over JavaScript and says to test on real hardware. When first invoked with no question, it replies with one fixed sentence and waits. It bundles no scripts.
Good for
- Front-end developers whose app feels off on iPhone or Android
- PWA and bottom-sheet builders
- Reviewers checking a layout for touch and safe-area bugs
Install mobile-native
Claude Code
- 1
Copy this prompt.
Install the mobile-native skill in Claude Code. Run this command: npx skills add https://github.com/emilkowalski/skills --skill mobile-native Then check that it loaded and tell me how to use it.
- 2
Paste it into Claude Code. It shows the change and asks before running it.
Requires Node.js.
From its listing on skills.sh. Source.
What's in the skill
When it loads
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.
Sections in SKILL.md
- Initial Response
- Operating Posture
- Hard Rules
- The Symptom Table
- The Fixes
- 1. Hover state stuck after tap
- 2. Gray/blue flash on tap
- 3. Layout has the wrong height
- 4. Page zooms into the input
- 5. Tap feels laggy
- 6. Pull-to-refresh hijacks scroll
- 7. Content stops at the notch
- 8. Long-press selects button text
- 9. Carousel scrolls vertically
- 10. Status bar color doesn't match
- 11. Right in Chrome, wrong on phone
Key facts
- Author
- emilkowalski (GitHub)
- Installs on skills.sh
- 102,404 (as of 2026-11-02)
- License
- MIT
- Last repo commit
- 2026-10-28
- Files in the skill folder
- 1 file: SKILL.md
- skills.sh audits
- Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
What it includes
Five rules every fix follows
Give each fix its reason, use media queries not device sniffing, support touch and mouse together, never disable zoom, and test on hardware.
Hard rulesMatch what you see to a fix
11 symptoms, from stuck hover to a status bar color mismatch.
Symptom tableCSS and meta-tag fixes with code
Examples: gate hover with (hover: hover), use dvh or svh, set inputs to at least 16px, add viewport-fit=cover and env() safe areas.
Write ·
The fixes (1 to 11)Viewport, theme-color and CSS to ship first
A meta viewport, per-scheme theme-color tags, and a CSS block for tap highlight, overscroll and touch-action.
Write ·
BaselineSelf-check table of mistakes and the fix
Covers user-scalable=no, ungated :hover, 100vh app shells and more.
Never ShipShort summary after the fix
What was wrong, what changed, and what still needs a phone to confirm.
Output
From the official docs
Permissions
Low risk
The skill edits front-end files in your project and bundles no scripts. Review the diff and test on a real device.
What it can do
- Read your data
- Create and change things
- Delete things
- Read-only mode
Watch out for
It edits your CSS, HTML and meta tags
The skill applies fixes such as viewport-fit=cover, theme-color tags and overscroll rules to your project files. Review the diff, and check on a real phone because the SKILL.md says emulation does not reproduce these bugs.
Questions
What does the mobile-native skill do?
It helps your assistant fix the details that make a web app feel like a website on a phone. Each fix comes with the reason, so it is applied only where it fits.
How do I install mobile-native?
Use the install box at the top of the page. It installs one file. The author's README gives a command that installs his whole skills set.
Does mobile-native need an API key or tools?
No. The SKILL.md names no key, script or extra tool. It edits CSS, HTML meta tags and similar files in your project.
Why does it only reply with one sentence when I start it?
The SKILL.md says that when it is first invoked with no specific question, it replies only with a line saying it is ready and then waits for your question. Ask a specific question or describe the symptom.
Can it verify the fix on my phone?
No. The SKILL.md says many of these bugs do not show up in Chrome device emulation and tells the assistant to say which fixes it could verify from code and which you must check on real hardware.
How is it different from the animate skill?
mobile-native covers the platform layer: viewport, touch, scroll, safe areas and browser chrome. The SKILL.md sends motion design to animate and React Native work to animate-expo, both in the same repo.
Information
updated Nov 2, 2026
- Repository
- emilkowalski/skills
- Folder
skills/mobile-native
Sources
Docs, issue trackers and discussions this page is built from.
Show all 3Hide
- mobile-native SKILL.md · github.com
- emilkowalski/skills README · github.com
- animate SKILL.md · github.com