M

mobile-first-design

mobile-first-design

github.com/aj-geddesDesign & UI373860 installsUpdated 34w ago

About mobile-first-design

A design skill that starts with small screens and scales experiences for larger devices. It provides guidance on responsive implementation, mobile performance, and progressive enhancement.

Key features

01Small-screen-first layout planning
02Responsive design guidance
03Mobile performance guidance
04Progressive enhancement guidance

Use cases

01Designing a web application
02Creating a responsive website
03Prioritizing features for mobile screens
04Improving cross-device experience

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill mobile-first-design

After installing, type/mobile-first-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

mobile-performance.md

progressive-enhancement.md

responsive-design-implementation.md

scripts/

validate-config.sh

templates/

config-starter.yaml

Details

From the project README

Mobile-First Design

Table of Contents

Overview
When to Use
Quick Start
Reference Guides
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	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

Comments

Markdown supported

Sign in to comment