skills.rest
T1nker-1220
T1nker-1220COMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-ui-standards

Enforce mobile-first UI standards with compact spacing and touch-friendly targets.

Updated Jul 29, 2025
Search Tags:#accessibility#web development#responsive design#UI/UX#mobile-first#mobile design#front-end
One-click install
npx skills add https://github.com/T1nker-1220/.claude --skill mobile-ui-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ui-standards
Source: https://github.com/T1nker-1220/.claude/tree/main/skills/mobile-ui-standards
Command: npx skills add https://github.com/T1nker-1220/.claude --skill mobile-ui-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

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>

Frequently Asked Questions about mobile-ui-standards

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

FAQPage Schema
How do I design a mobile-first UI that works across all screen sizes?▼

Mobile-first design starts by building your interface for small screens, then progressively enhances it for larger devices using responsive breakpoints. This ensures optimal layouts, readable typography, and proper spacing on all screen sizes from the ground up.

What are touch target sizes and why do they matter for mobile UI?▼

Touch targets are the interactive areas users tap on mobile devices. Minimum 44x44 pixels ensures comfortable, accessible interactions and reduces accidental taps, especially important for users with varying dexterity or on high-resolution screens.

How do I handle responsive font sizes across mobile and desktop views?▼

Use relative font scaling with media queries or utility classes to adjust typography at different breakpoints. Start with smaller base sizes (14px) on mobile, then increase incrementally for tablets and desktops to maintain readability without sacrificing screen real estate.

Can I apply mobile-first principles to existing component libraries?▼

Yes. Audit your components for compact spacing, adequate touch targets (44x44px minimum), and responsive font scales, then refactor using mobile-first CSS. Ensure padding, margins, and element sizes work well on small screens before scaling up.

What spacing and typography guidelines ensure readable, compact mobile layouts?▼

Use tighter padding and margins on mobile to maximize screen real estate while maintaining visual hierarchy. Start with base font size of 14px and scale up with breakpoints; ensure sufficient line-height for readability despite compact spacing.

Related Skills

Explore More Design & Creative Skills→
moughamirmoughamir

tailwindcss-mobile-first

Implement mobile-first responsive Tailwind CSS layouts with progressive breakpoints and fluid typography.

Community
Advanced
lord-vinayaklord-vinayak

mobile-touch-auditor

Audit mobile UI accessibility against WCAG 2.2 AA/AAA criteria.

Community
Advanced
daltonkyemillerdaltonkyemiller
2

adapt

Analyze and adjust design layouts, breakpoints, and interaction elements across device contexts.

Community
Advanced
FAeN399FAeN399

css-layout-builder

Create responsive CSS layouts using Grid, Flexbox, and container queries.

Community
Advanced