SkillsAdd

aj-geddes/useful-ai-prompts

mobile-first-design

Design for mobile devices first, then scale up to larger screens. Create responsive interfaces that work seamlessly across all device sizes.

First seen Jan 21, 2026

Installation

$ npx skills add aj-geddes/useful-ai-prompts --skill mobile-first-design
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
imagegen-frontend-mobile Similar name
leonxlnx/taste-skill

Elite mobile app image-generation skill for creating premium, app-native screen concepts and fl…

266.2K installs
design-mobile-apps Similar name
designed-by-ai/skills

Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sl…

82.6K installs
momentic-mobile-test Similar name
momentic-ai/skills

Create, run, and maintain Momentic mobile E2E tests and modules for Android and iOS. Use Moment…

34K installs
mobile-android-design Similar name
wshobson/agents 22K installs
mobile-ios-design Similar name
wshobson/agents 21.6K installs

Also in this package

Other skills from aj-geddes/useful-ai-prompts · top by installs.

npx skills add aj-geddes/useful-ai-prompts
nodejs-express-server 3.2K code-review-analysis 2.4K rest-api-design 2K architecture-diagrams 1.9K ansible-automation 1.6K ios-swift-development 1.5K android-kotlin-development 1.4K flask-api-development 1.4K wireframe-prototyping 1.4K jenkins-pipeline 1.3K

Browse all from aj-geddes/useful-ai-prompts

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 334
License LICENSE
Default branch main
Open issues 1
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,622 B
  • docs SUMMARY.md 1,330 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 816 installs

SKILL.md

Mobile-First Design

Table of Contents

  • [Overview](#overview)
  • [When to Use](#when-to-use)
  • [Quick Start](#quick-start)
  • [Reference Guides](#reference-guides)
  • [Best Practices](#best-practices)

Overview

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](references/responsive-design-implementation.md) Responsive Design Implementation
[Mobile Performance](references/mobile-performance.md) Mobile Performance
[Progressive Enhancement](references/progressive-enhancement.md) 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