Agent skill · design visual · aj-geddes
mobile-first-design
Design for mobile devices first, then scale up to larger screens. Create responsive interfaces that work seamlessly across all device sizes.
Why this skill is useful
Codifies mobile-first design principles and best practices that the AI could infer but now doesn't have to guess.
What it needs
About 1k tokens when loaded. Last updated 2026-03-04. 307 stars on the source repository.
What this skill does
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: 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 to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/mobile-first-design