mobile-ui-standards

What problem does it solve?

This Skill addresses the challenges of designing for mobile-first, preventing cluttered interfaces, poor readability, and difficult touch interactions on small screens, ensuring a seamless user experience.

Core Features & Use Cases

• Mobile-First Design Enforcement: Guides you to implement designs starting with mobile, then scaling up to desktop, ensuring responsiveness and optimal layout for all screen sizes.
• Compact Elements & Typography: Provides guidelines for smaller font sizes (14px base), tighter spacing, and compact UI elements to maximize screen real estate.
• Touch Target Optimization: Enforces minimum touch target sizes (44x44px) for interactive elements, making your mobile UI comfortable and accessible for all users.
• Use Case: When developing a new component, activate this skill to ensure it adheres to mobile-first principles, using responsive font sizes, compact padding, and adequate touch targets from the outset.

Quick Start

Example of a mobile-first button with adequate touch target:

<button class="min-h-[44px] min-w-[44px] px-4 py-2 text-sm md:text-base">
  Tap Me
</button>

Example of responsive font sizes:

<h1 class="text-2xl md:text-3xl lg:text-4xl">
  Heading
</h1>