mobile-first-design
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.
By secondsky · 502 installs
npx skills add secondsky/claude-skills --skill mobile-first-design
Source repository · Upstream listing
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
Touch Friendly Design
Performance Requirements
Metric Target
First Contentful Paint <3s on 3G
JS bundle <100KB gzipped
Total page weight <500KB
Progressive Enhancement
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