home / skills / secondsky / claude-skills / mobile-first-design

mobile-first-design skill

Q: What breakpoints should I use?

Use a simple set: mobile (~320–480px), tablet (~481–768px), desktop (~769–1024px), and large (1025px+). Adjust to your audience as needed.

Q: How do I balance visuals and performance?

Start with minimal CSS and assets on mobile, use responsive images, defer noncritical JS, and set performance budgets (FCP <3s on 3G, JS bundle <100KB gzipped).

safe

/plugins/mobile-first-design/skills/mobile-first-design

This skill helps design mobile-first responsive interfaces by guiding breakpoints, touch targets, and progressive enhancement for performance and accessibility.

npx playbooks add skill secondsky/claude-skills --skill mobile-first-design

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.9 KB

---
name: mobile-first-design
description: Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.
---

# 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

```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

```css
/* 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

| Metric | Target |
|--------|--------|
| First Contentful Paint | <3s on 3G |
| JS bundle | <100KB gzipped |
| Total page weight | <500KB |

## Progressive Enhancement

```html
<!-- 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

Overview

This skill designs responsive interfaces starting from mobile screens and progressively enhances layouts for larger devices. It provides practical rules, breakpoints, touch guidance, and performance targets to build fast, usable, mobile-first web experiences. Use it to create production-ready responsive UIs with clear mobile priorities.

How this skill works

The skill defines a mobile-first workflow: establish base styles for small screens, then layer media queries for tablet and desktop breakpoints. It inspects layout choices, touch target sizing, and asset strategies to keep initial loads small and interaction-friendly. It recommends semantic HTML as the baseline, then adds CSS and JavaScript enhancements progressively.

When to use it

Building a responsive website that must prioritize mobile users
Optimizing an existing site for faster mobile load times and touch ergonomics
Designing adaptive layouts with clear breakpoints and progressive enhancement
Setting performance budgets for initial page load and JS bundle size
Creating UI components that work without JavaScript and improve with progressive enhancement

Best practices

Start designs at 320px and design up rather than down
Use relative units (rem, %, vw) for scalable, accessible layouts
Define clear breakpoints: mobile, tablet (~481–768px), desktop (~769–1024px), large (1025px+)
Make touch targets at least 48x48px and provide adequate spacing between controls
Optimize images and use responsive sources to reduce mobile payload
Keep initial JavaScript minimal; aim for small gzipped bundles and fast First Contentful Paint

Example use cases

Create a responsive landing page that loads quickly on 3G and scales cleanly to desktop
Implement a navigation that shows a hamburger on mobile and a flex nav on tablet/desktop via media queries
Build a product list with touch-friendly cards and progressive image loading for mobile
Audit an app to reduce initial JS, enforce a <100KB gzipped bundle target, and meet FCP <3s on 3G
Design UI components using semantic HTML first, then enhance visuals and interactivity with CSS and JS

FAQ

What breakpoints should I use?

Use a simple set: mobile (~320–480px), tablet (~481–768px), desktop (~769–1024px), and large (1025px+). Adjust to your audience as needed.

How do I balance visuals and performance?

Start with minimal CSS and assets on mobile, use responsive images, defer noncritical JS, and set performance budgets (FCP <3s on 3G, JS bundle <100KB gzipped).