mcpField
M
mobile-first-design

mobile-first-design

github.com/secondskyDesign & UI240582 installsUpdated 5w ago
Repository

About mobile-first-design

A design guide for building interfaces from mobile layouts first, then adapting them to larger screens. It covers breakpoints, touch targets, performance targets, and progressive enhancement.

Key features

  1. 01Design from mobile screen widths
  2. 02Use breakpoints for larger screens
  3. 03Set touch-friendly target sizes
  4. 04Track page and bundle performance targets
  5. 05Apply progressive enhancement

Use cases

  1. 01Plan layouts that scale from phones to desktops
  2. 02Check button sizes and spacing for touch
  3. 03Set performance constraints for mobile pages
  4. 04Enhance a mobile baseline for larger screens

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/secondsky/claude-skills --skill mobile-first-design

After installing, type/mobile-first-designin Claude Code to confirm it loaded.

Details

From the project README

Mobile-First Design

Design interfaces starting with mobile as the foundation, then enhance for larger screens.

Breakpoints

NameWidthDevices
Mobile320-480pxiPhone SE, small Android
Tablet481-768pxiPad mini
Desktop769-1024pxiPad Pro, laptops
Large1025px+Desktop monitors

Mobile-First CSS

/* Base styles (mobile) */
.container {
  padding: 1rem;
}

.nav {
  display: none; /* Hidden on mobile */
}

.nav-toggle {
  display: block; /* Hamburger visible */
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }

  .nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Touch-Friendly Design

/* Minimum touch target: 48x48px */
.button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
}

/* Adequate spacing */
.list-item {
  padding: 16px;
  margin-bottom: 8px;
}

Performance Requirements

MetricTarget
First Contentful Paint<3s on 3G
JS bundle<100KB gzipped
Total page weight<500KB

Progressive Enhancement

<!-- Layer 1: Semantic HTML (works without CSS/JS) -->
<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

<!-- Layer 2: CSS enhances appearance -->
<!-- Layer 3: JS adds interactivity -->

Best Practices

  • Start design at 320px width
  • Use relative units (rem, %, vw)
  • Test on real devices
  • Optimize images for mobile
  • Minimize JavaScript for initial load
  • Ensure readable text without zooming

Comments

Markdown supported