applelamps/x-vercel-beta
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
FAQ
No. Patterns use responsive breakpoints and max-width containers so desktop styles remain intact; safe-area insets do nothing on non-safe-area devices.
What touch target size should I choose for critical actions?
Use at least 56×56px for critical actions, 48×48px as a recommended default, and never go below 44×44px for tappable controls.
How do I support older devices with notches or no safe-area env values?
env(safe-area-inset-*) falls back to 0 on devices that don’t expose them. Combine with sensible default padding and test on physical devices or simulators.
