mobile-native
An agent skill by emilkowalski, from emilkowalski/skills. Tags: animation, design, web.
What it does
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.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add emilkowalski/skills --skill mobile-nativeOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/emilkowalski/skills
cp -r skills/skills/mobile-native ~/.claude/skills/mobile-nativeSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- emilkowalski/skills (all skills from this repository)
- Path
- skills/mobile-native/SKILL.md
- Branch
- main
- Updated
- 2026-09-22
Related skills
- animate — Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool.
- animate-expo — Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate.
- animation-vocabulary — Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop.
- apple-design — Apple's approach to interface design and fluid, physical motion, translated for the web.
- ask-sonner — Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating.
- emil-design-eng — This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.