Mobile first design

Skill ulpi-io/plugin-marketplace/plugins/aj-geddes/skills/mobile-first-design

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

Install

npx -y skills add ulpi-io/plugin-marketplace --skill mobile-first-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.6 KB, 536 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 5 files

5.0 KB alongside SKILL.md, 1 of them executable