Mobile-First Agent Skill
Mobile-first responsive design, touch targets, and PWA patterns.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Mobile-first responsive design, touch targets, and PWA patterns.
homepage: https://yepapi.com/skills/mobile-first
metadata:
tags: [mobile, responsive, pwa, touch]
---
# Mobile-First Design
## Rules
- Design for mobile first, enhance for desktop — `min-width` breakpoints
- Touch targets: minimum 44x44px for buttons and links
- Viewport units: `dvh` for full-screen layouts (accounts for mobile browser chrome)
- Safe areas: `env(safe-area-inset-*)` for notch/island devices
- PWA basics: `manifest.json`, service worker, `<meta name="theme-color">`
- Performance budgets: < 200KB JS on first load for mobile
- Input types: `type="email"`, `type="tel"`, `type="number"` — trigger correct keyboard
- No hover-only interactions — everything must work with tap
- Test on real devices — emulators miss performance issues and touch quirksInstall
Why Use the Mobile-First Skill?
Without this skill, your AI guesses at mobile-first patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Mobile-First skill installed. Your AI knows the context and writes code that fits.
"Refactor this page to be mobile-first with proper touch targets and responsive breakpoints"
"Create a PWA with offline support, install prompt, and push notifications"
"Build a responsive layout that works from 320px to 4K with proper font scaling"
Mobile-First skill — FAQ
It enforces mobile-first responsive design, proper touch targets, and PWA patterns. Your AI generates layouts that work on small screens first and scale up gracefully.
Run `npx skills add YepAPI/skills --skill mobile-first` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
Mobile-first means you design for small screens first, then add complexity for larger screens. Responsive means adapting any design to different sizes. Mobile-first produces simpler, faster-loading pages.