aj-geddes/useful-ai-prompts738 installs

mobile-first-design

Q: How do I install this agent skill?

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

Q: Is this agent skill safe to install?

Review the displayed partner audits, complete source, permissions, dependencies, and exact revision before installing.

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

How do I install this agent skill?

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

view source ↗

Is this agent skill safe to install?

Gen Agent Trust Hubpass
The mobile-first-design skill is an educational resource containing guidelines, code snippets, and configuration templates for responsive web design. All files are informational or serve as safe boilerplate for infrastructure setups. No security vulnerabilities or malicious behaviors were found during the analysis.
Socketpass
No alerts
Snykpass
Risk: LOW · No issues
Runlayerpass
1/8 files flagged
ZeroLeakspass
Score: 93/100 · 2 sections analyzed

What does this agent skill do?

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

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/aj-geddes/useful-ai-prompts/mobile-first-design">View mobile-first-design on skillZs</a>