skills.rest
curiositech
curiositechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-ux-optimizer

Optimize mobile-first user experiences for touch interfaces and responsive layouts.

181|30|Updated Nov 16, 2025
Search Tags:#navigation#mobile#responsive#ux#viewport#touch
One-click install
npx skills add https://github.com/curiositech/some_claude_skills --skill mobile-ux-optimizer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ux-optimizer
Source: https://github.com/curiositech/some_claude_skills/tree/main/.claude/skills/mobile-ux-optimizer
Command: npx skills add https://github.com/curiositech/some_claude_skills --skill mobile-ux-optimizer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the unique challenges of designing for mobile devices, ensuring optimal user experience on touchscreens, with responsive layouts, and peak performance.

Core Features & Use Cases

  • Viewport Handling: Solves issues with dynamic browser toolbars and safe area insets (notches, home indicators) using dvh and env(safe-area-inset-*).
  • Touch Targets: Enforces minimum touch target sizes (44px/48dp) for better usability.
  • Navigation Patterns: Provides examples for common mobile navigation like bottom nav bars and slide-out drawers.
  • Gestures & Performance: Includes guidance on swipe gestures, pull-to-refresh, image optimization, and reducing bundle size.
  • Use Case: Ensure your e-commerce app's product pages are easily navigable on a smartphone, with large, tappable buttons and content that doesn't get hidden by the browser's address bar.

Quick Start

Use the mobile-ux-optimizer skill to ensure the bottom navigation bar on the website is correctly padded for safe areas.

Frequently Asked Questions about mobile-ux-optimizer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix mobile viewport issues caused by dynamic browser toolbars?▼

Use `dvh` units to handle mobile viewport issues caused by dynamic browser toolbars. This ensures your responsive layout adjusts correctly as the address bar expands or collapses on touchscreens.

What is the minimum touch target size for mobile usability?▼

The minimum touch target size for mobile usability is 44px or 48dp. Enforcing this sizing rule ensures touch interfaces remain easily tappable and prevents user input errors on small screens.

How do I handle notches and home indicators in responsive layouts?▼

Handle notches and home indicators in responsive layouts by applying `env(safe-area-inset-*)` CSS properties. This properly pads touch interfaces so content avoids obstructed screen edges on mobile devices.

What's the best way to implement mobile navigation for touch interfaces?▼

Implement mobile navigation for touch interfaces using bottom navigation bars or slide-out drawers. These patterns keep navigation accessible while preserving valuable screen space on mobile devices.

How do I add swipe gestures and pull-to-refresh to a mobile web app?▼

Add swipe gestures and pull-to-refresh to mobile web apps by following touch interface optimization guidance. This ensures gesture interactions feel native and perform smoothly without layout jank.

Does mobile UX optimization work for e-commerce product pages?▼

Mobile UX optimization works effectively for e-commerce product pages by ensuring large tappable buttons and responsive layouts. This prevents content from being hidden by browser toolbars on smartphones.

Related Skills

Explore More Design & Creative Skills→
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
JoniSirvioJoniSirvio

optimize

Measure Core Web Vitals and implement targeted optimizations for web and mobile interfaces.

Community
Advanced
Arnutt-NArnutt-N

mobile-responsive

Implements mobile-first responsive layouts and touch interactions for HR-IMS frontend.

Community
Intermediate
RomualdPRomualdP

Mobile-First Responsive Design

Implement mobile-first responsive layouts with Tailwind CSS breakpoints.

Community
Intermediate