skills.rest
armanisadeghi
armanisadeghiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ios-mobile-first

Standardize iOS mobile-first design in React projects with dvh layouts and responsive modals.

2|1|Updated Aug 24, 2024
Search Tags:#mobile-first#ios#responsive-design#safe-area#touch-targets#viewport#dialogs-drawers
One-click install
npx skills add https://github.com/armanisadeghi/ai-matrx --skill ios-mobile-first
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ios-mobile-first
Source: https://github.com/armanisadeghi/ai-matrx/tree/main/.cursor/skills/ios-mobile-first
Command: npx skills add https://github.com/armanisadeghi/ai-matrx --skill ios-mobile-first

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

iOS-mobile-first design standardizes how mobile web apps render and behave on iOS devices, ensuring consistent, accessible experiences across views and components.

Core Features & Use Cases

  • dvh-based layouts and safe-area awareness to prevent content clipping on iPhone and iPad.
  • Drawer versus Dialog modal strategy driven by screen size via a mobile-aware rendering pattern.
  • Touch-friendly targets and typography ensuring legible, tappable interfaces on small screens.
  • Guidelines for responsive patterns, header variables, and single-scroll page layouts to avoid nested scrolling.

Quick Start

Configure a sample component to use dynamic viewport units (dvh), safe-area padding, and a mobile Drawer fallback on small screens, then test in iOS Safari.

Frequently Asked Questions about ios-mobile-first

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

FAQPage Schema
How do I prevent content clipping in iOS Safari responsive layouts?▼

Use dynamic viewport units (dvh) and safe-area padding utilities to prevent content clipping in iOS responsive layouts. This approach ensures headers and touch targets remain visible regardless of Safari's dynamic viewport changes.

When should I use a Drawer versus a Dialog for mobile web design?▼

Use a Drawer on mobile screens and a Dialog on desktop to optimize mobile web design. A mobile-aware rendering hook conditionally renders the Drawer to provide a touch-friendly, bottom-up interaction pattern on small devices.

Does this Skill require specific React hooks for mobile-first design?▼

Yes, React-based projects require a mobile-aware hook like useIsMobile to conditionally render components. This hook drives the responsive strategy, switching between Drawer and Dialog components based on screen size detection.

What is the best way to handle touch targets and typography on iOS?▼

Standardize touch targets and typography using mobile-first design guidelines to ensure interfaces are legible and tappable on iOS. This involves setting minimum hit areas and responsive font scales for small screens.

How do I avoid nested scrolling in single-scroll mobile page layouts?▼

Avoid nested scrolling in single-scroll mobile page layouts by stacking mobile sections vertically and using header variables. This responsive pattern prevents internal scroll containers from conflicting with the main page scroll.

Related Skills

Explore More Design & Creative Skills→
ramunasnognysramunasnognys
1

mobile-ux-improver

Enforce mobile-first UX best practices for web application components.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

mobile-viewport-implementation

Implement mobile layouts using svh, dvh, lvh, and safe-area insets.

Official
Advanced
haryelramalhoharyelramalho

vercel-composition-patterns

Refactor React components into compound structures with explicit variants and lifted state using Context APIs.

Community
Advanced
heaptracetechnologyheaptracetechnology
13

mobile-ui

Build platform-adaptive mobile UI components across React Native, Flutter, and SwiftUI.

Community
Advanced