Mobile First Design

The mobile-first design skill instructs AI agents to prioritize building responsive interfaces that start with small screens and scale up for larger displays. It ensures layouts adapt fluidly across devices while maintaining performance and accessibility standards.

When to use it

• Creating new landing pages or marketing sites intended for broad device consumption.
• Refactoring existing desktop-heavy codebases to ensure compatibility on tablets and smartphones.
• Generating CSS media queries and flexbox/grid layouts that prevent horizontal scrolling.
• Optimizing touch targets and navigation menus for finger interaction rather than mouse clicks.

Key capabilities

• Generates responsive breakpoints for common screen sizes (mobile, tablet, desktop).
• Produces mobile-optimized navigation patterns like hamburger menus.
• Ensures font sizes and spacing remain legible on small displays.
• Prioritizes core content visibility before expanding secondary features.

Example prompts

• "Build a responsive hero section using CSS Grid that stacks vertically on mobile devices."
• "Refactor this desktop-only HTML structure to be fully mobile-first with touch-friendly buttons."
• "Create a media query strategy for an e-commerce product page to ensure images scale correctly on phones."

Tips & gotchas

Mobile-first design requires testing actual device dimensions rather than relying solely on browser developer tools. Avoid using fixed pixel widths in your base styles; instead, use relative units like rem or percentages to maintain flexibility as screen sizes change.