mobile-ui_skill

Overview

This skill optimizes mobile UI for smartphones including iPhone 16/17/18 Pro, focusing on responsive layouts, safe areas, touch targets, and mobile viewport setup. It provides concrete patterns, breakpoints, and CSS/TypeScript snippets to make interfaces feel native, accessible, and robust across modern iPhones and high-density displays. Use it to reduce common mobile layout issues and improve touch/visual ergonomics.

How this skill works

The skill inspects layout and interaction patterns and suggests adjustments for viewport meta, safe-area insets, touch target sizing, typography scaling, and scrolling behavior. It recommends device-aware breakpoints and Tailwind config mappings, supplies core component patterns (responsive container, bottom nav, touch-optimized buttons, momentum scroll), and enforces critical accessibility rules. Outputs are actionable changes and code patterns you can drop into TypeScript/React projects.

When to use it

• Building or testing responsive layouts for smartphones
• Designing touch interfaces and navigation for iOS/Android
• Targeting iPhone 16/17/18 Pro or other high-density phones
• Implementing safe-area support for notches and Dynamic Island
• Improving mobile typography, spacing, and touch target sizes

Best practices

• Include a proper viewport meta tag with viewport-fit=cover to enable safe-area use
• Apply env(safe-area-inset-*) to padding/margins for top/bottom/left/right safe areas
• Use minimum touch target sizes (44×44px Apple / 48×48dp Material); prefer 48×48px with 8px spacing
• Avoid disabling zoom (never use user-scalable=no or maximum-scale=1) to preserve accessibility
• Provide visible focus states and never rely on hover for critical actions
• Enable touch-manipulation and momentum scrolling for native-feeling interactions

Example use cases

• Add safe-area-aware padding to a full-width app shell so content doesn’t collide with Dynamic Island or the home indicator
• Create a bottom navigation bar with pb using env(safe-area-inset-bottom) and nav items sized to at least 44–56px
• Apply a responsive typography scale using clamp() to keep text readable across iPhone SE to Pro Max
• Configure Tailwind screens to match common iPhone widths and serve optimized layouts per breakpoint
• Build a scroll container with -webkit-overflow-scrolling: touch and scroll-snap to deliver smooth momentum scrolling