Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.
When to Use
Web application design
Responsive website creation
Feature prioritization
Performance optimization
Progressive enhancement
Cross-device experience design
Quick Start
Minimal working example:
Mobile-First Approach:
Step 1: Design for Mobile (320px - 480px)
- Constrained space forces priorities
- Focus on essential content and actions
- Single column layout
- Touch-friendly interactive elements
Step 2: Enhance for Tablet (768px - 1024px)
- Add secondary content
- Multi-column layouts possible
- Optimize spacing and readability
- Take advantage of hover states
Step 3: Optimize for Desktop (1200px+)
- Full-featured experience
- Advanced layouts
- Rich interactions
- Multiple columns and sidebars
---
## Responsive Breakpoints:
Mobile: 320px - 480px
- iPhone SE, older phones
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
Guide
Contents
Responsive Design Implementation
Responsive Design Implementation
Mobile Performance
Mobile Performance
Progressive Enhancement
Progressive Enhancement
Best Practices
✅ DO
Design for smallest screen first
Test on real mobile devices
Use responsive images
Optimize for mobile performance
Make touch targets 44x44px minimum
Stack content vertically on mobile
Use hamburger menu on mobile
Hide non-essential content on mobile
Test with slow networks
Progressive enhancement approach
❌ DON'T
Assume all mobile users have fast networks
Use desktop-only patterns on mobile
Ignore touch interaction needs
Make buttons too small
Forget about landscape orientation
Over-complicate mobile layout
Ignore mobile performance
Assume no keyboard (iPad users)
Skip mobile user testing
Forget about notches and safe areas
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: aj-geddes-useful-ai-prompts-mobile-first-design3description: Mobile-First Design4---56# Mobile-First Design78## Table of Contents910- [Overview](#overview)11- [When to Use](#when-to-use)12- [Quick Start](#quick-start)13- [Reference Guides](#reference-guides)14- [Best Practices](#best-practices)1516## Overview1718Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.1920## When to Use2122- Web application design23- Responsive website creation24- Feature prioritization25- Performance optimization26- Progressive enhancement27- Cross-device experience design2829## Quick Start3031Minimal working example:3233```yaml34Mobile-First Approach:3536Step 1: Design for Mobile (320px - 480px)37 - Constrained space forces priorities38 - Focus on essential content and actions39 - Single column layout40 - Touch-friendly interactive elements4142Step 2: Enhance for Tablet (768px - 1024px)43 - Add secondary content44 - Multi-column layouts possible45 - Optimize spacing and readability46 - Take advantage of hover states4748Step 3: Optimize for Desktop (1200px+)49 - Full-featured experience50 - Advanced layouts51 - Rich interactions52 - Multiple columns and sidebars5354---55## Responsive Breakpoints:5657Mobile: 320px - 480px58 - iPhone SE, older phones59// ... (see reference guides for full implementation)60```6162## Reference Guides6364Detailed implementations in the `references/` directory:6566| Guide | Contents |67|---|---|68| [Responsive Design Implementation](references/responsive-design-implementation.md) | Responsive Design Implementation |69| [Mobile Performance](references/mobile-performance.md) | Mobile Performance |70| [Progressive Enhancement](references/progressive-enhancement.md) | Progressive Enhancement |7172## Best Practices7374### ✅ DO7576- Design for smallest screen first77- Test on real mobile devices78- Use responsive images79- Optimize for mobile performance80- Make touch targets 44x44px minimum81- Stack content vertically on mobile82- Use hamburger menu on mobile83- Hide non-essential content on mobile84- Test with slow networks85- Progressive enhancement approach8687### ❌ DON'T8889- Assume all mobile users have fast networks90- Use desktop-only patterns on mobile91- Ignore touch interaction needs92- Make buttons too small93- Forget about landscape orientation94- Over-complicate mobile layout95- Ignore mobile performance96- Assume no keyboard (iPad users)97- Skip mobile user testing98- Forget about notches and safe areas99100---101> Converted and distributed by [TomeVault](https://tomevault.io/claim/aj-geddes) — claim your Tome and manage your conversions.102<!-- tomevault:4.0:skill_md:2026-04-11 -->
Run npx skillmds@latest add tomevault-io/aj-geddes-useful-ai-prompts-mobile-first-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Mobile-First Design It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io