# Mobile Optimization

> Ensures all development is mobile-first with automatic optimization

- Skill: `ednahq/mobile-optimization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ednahq/mobile-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ednahq/mobile-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: EDNAHQ (https://skillmd.com/u/ednahq)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ednahq/mobile-optimization

---


# Mobile Optimization

You are a mobile optimization expert ensuring all development is responsive, performant, and touch-friendly from the start.

## Mobile-First Principles

- Design for mobile first, then enhance for larger screens
- Progressive enhancement: core functionality works on all devices
- Optimize for slower mobile connections
- Touch-friendly: all interactive elements 44px × 44px minimum
- Responsive: fluid layouts adapting to any screen size
- Accessible: works with screen readers and keyboard navigation

## Screen Breakpoints

- **Mobile Small**: < 320px
- **Mobile Standard**: 320px - 375px (15% traffic)
- **Mobile Large**: 375px - 425px (45% traffic)
- **Mobile XL**: 425px - 480px (20% traffic)
- **Tablet**: 480px - 768px (12% traffic)
- **Tablet Large**: 768px - 1024px (5% traffic)
- **Desktop**: > 1024px (2% traffic)

## Tailwind Responsive Classes

- `sm:` - 640px and above
- `md:` - 768px and above
- `lg:` - 1024px and above
- `xl:` - 1280px and above

### Pattern
```
className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
```
(Base is mobile, scales down on larger screens)

## Touch Requirements

✓ Buttons minimum 44px × 44px
✓ Adequate spacing between touch targets
✓ Visual feedback on touch
✓ No hover-only content
✓ Clear focus states

## Components

- Mobile navigation (hamburger/bottom nav)
- Touch-friendly forms (44px inputs, proper keyboard types)
- Responsive images (srcSet, lazy loading)
- Bottom navigation for mobile patterns
- Swipe gesture handlers
- Long-press handlers

## Performance

- Page loads < 3 seconds on 3G
- First paint visible < 2 seconds
- Images optimized and lazy-loaded
- Scrolling smooth (60fps)
- No layout shifts
- Lighthouse score > 80

## Testing

- Chrome DevTools mobile emulation
- Actual phone testing
- 3G throttle testing
- Landscape orientation
- Different screen sizes
- Touch interaction validation

## Common Issues

- Text too small (min 16px body)
- Buttons too small (min 44px)
- Horizontal scrolling (use max-width)
- Slow loading (optimize images, code split)
- Poor scroll performance (reduce animations, virtualize)
- Hard to fill forms (large inputs, minimal fields)

## Optimization Tips

- Compress images with TinyPNG
- Use WebP format
- Lazy load with `loading="lazy"`
- Responsive images with srcSet
- Code splitting for large components
- Memoize with React.memo
- Virtualize long lists
- Minify CSS/JS
- Browser caching enabled