Agent skill · design visual · secondsky
mobile-first-design
Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.
Why this skill is useful
Codifies mobile-first design principles and CSS patterns that the AI could infer but doesn't have to guess.
What it needs
About 1k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Mobile-First Design Design interfaces starting with mobile as the foundation, then enhance for larger screens. Breakpoints Name Width Devices ------ ------- --------- Mobile 320-480px iPhone SE, small Android Tablet 481-768px iPad mini Desktop 769-1024px iPad Pro, laptops Large 1025px+ Desktop monitors Mobile-First CSS Touch-Friendly Design Performance Requirements Metric Target -------- -------- First Contentful Paint <3s on 3G JS bundle <100KB gzipped Total page weight <500KB Progressive Enhancement Best Practices Start design at 320px width Use relative units (rem, %, vw) Test on real devices Optimize images for mobile Minimize JavaScript for initial load Ensure readable text without zooming
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/mobile-first-design