mobile-native

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

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.

100vh equals the largest viewport height with browser chrome collapsed, so content overflows when the URL bar is visible. Use 100dvh for app shells that track the visible area and 100svh for heroes that must never be cut off.

Add viewport-fit=cover to the viewport meta tag so the page paints edge to edge, then pad fixed headers and bottom bars with env(safe-area-inset-top) and env(safe-area-inset-bottom). Without the meta tag, the env() values are all zero.

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 use Safari Web Inspector or chrome://inspect for debugging.

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 viewport units and meta tags do not apply there.