frontend-responsive-ui_skill

Overview

This skill defines practical standards for building responsive, mobile-first interfaces using fluid containers, relative units, consistent breakpoints, and touch-friendly targets. It helps teams create layouts that scale across phones, tablets, laptops, and desktops while prioritizing performance, accessibility, and content hierarchy. Use it to guide CSS, component structure, and testing for multi-device support.

How this skill works

The skill prescribes a mobile-first workflow: write base styles for small screens, then enhance with media queries at project breakpoints. It enforces fluid layouts using flexbox/grid, percentage widths, and container queries where supported. It also standardizes units (rem/em/%/vw), touch target sizing, responsive typography, image srcset/picture strategies, and a verification checklist for device testing.

When to use it

• Creating or modifying layouts that must work across mobile, tablet, and desktop
• Implementing mobile-first patterns and breakpoint-specific styles
• Writing responsive CSS, flexbox/grid layouts, or defining breakpoints
• Optimizing images and assets for multiple screen sizes and network conditions
• Testing layouts across devices and running visual regression checks

Best practices

• Always start mobile-first; enhance at min-width breakpoints rather than overriding desktop styles
• Use project-standard breakpoints — check existing definitions before adding new ones
• Favor relative units (rem/em/%) for fonts, spacing, and dimensions; reserve px for thin borders and hairlines
• Build fluid containers with width:100% and max-width, and use grid/flex patterns like 1fr, minmax(), auto-fit/auto-fill
• Ensure touch targets meet minimums (44x44px iOS, 48x48px Android) and provide spacing between interactive elements
• Serve images with srcset or picture and prefer modern formats (webp/avif) to reduce payloads

Example use cases

• Converting a desktop-first dashboard to mobile-first with stacked widgets and reordered content
• Implementing a responsive grid that goes 1→2→4 columns at md/lg breakpoints
• Designing touch-friendly headers and nav: hamburger on mobile, inline nav on desktop
• Optimizing hero images using srcset and sizes for different viewport widths
• Creating responsive typography with clamp() or step-up font sizes at breakpoints