Mobile First Design

A solid foundation for building responsive sites the right way, starting at 320px and scaling up through clear breakpoints. You get sensible defaults like 48px touch targets, progressive enhancement patterns, and performance budgets that actually matter (under 3s FCP on 3G). The CSS examples show proper min-width media queries instead of the old max-width approach, and it pushes you toward semantic HTML that works before JavaScript loads. Nothing groundbreaking here, but it's the kind of practical reference that keeps you from making rookie mistakes like forgetting adequate spacing or shipping bloated bundles to mobile users.

skills.sh installs: 598
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill mobile-first-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Mobile-First Design

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

Breakpoints

Name	Width	Devices
Mobile	320-480px	iPhone SE, small Android
Tablet	481-768px	iPad mini
Desktop	769-1024px	iPad Pro, laptops
Large	1025px+	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;
}