Mobile Ux Optimizer

Handles the specific weirdness of mobile web: the 100vh viewport bug that cuts off content behind browser chrome (use 100dvh instead), iPhone notches and safe areas, 44px minimum touch targets, and bottom navigation that doesn't break thumbs. Gives you working patterns for slide-out drawers, swipe gestures, and pull-to-refresh with proper touch event handling. The mobile-first CSS examples are solid, building up from mobile rather than media-querying down from desktop. Pairs well with PWA work since installable apps need this stuff dialed in. Not for native iOS or Android development, just progressive web apps and responsive sites where touch and small screens matter.

skills.sh installs: 273
GitHub stars: 113
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add erichowens/some_claude_skills --skill mobile-ux-optimizer --agent claude-code

Installs into .claude/skills of the current project.

Files

Mobile-First UX Optimization

Build touch-optimized, performant mobile experiences with proper viewport handling and responsive patterns.

When to Use

✅ USE this skill for:

Viewport issues (100vh problems, safe areas, notches)
Touch target sizing and spacing
Mobile navigation patterns (bottom nav, drawers, hamburger menus)
Swipe gestures and pull-to-refresh
Responsive breakpoint strategies
Mobile performance optimization

❌ DO NOT use for:

Native app development → use react-native or swift-executor skills
Desktop-only features → no skill needed, standard patterns apply
General CSS/Tailwind questions → use Tailwind docs or web-design-expert
PWA installation/service workers → use pwa-expert skill

Core Principles

Mobile-First Means Build Up, Not Down

/* ❌ ANTI-PATTERN: Desktop-first (scale down) */
.card { width: 400px; }
@media (max-width: 768px) { .card { width: 100%; } }

/* ✅ CORRECT: Mobile-first (scale up) */
.card { width: 100%; }
@media (min-width: 768px) { .card { width: 400px; } }