frontend-responsive_skill

Overview

This skill helps you build responsive, mobile-first layouts using fluid containers, standard breakpoints, and adaptive design patterns that work across all screen sizes. It focuses on practical rules and patterns for CSS breakpoints, fluid grids, responsive typography, and touch-friendly interactions to deliver consistent UI across devices.

How this skill works

The skill inspects UI requirements and suggests layout strategies like mobile-first breakpoints, relative units (rem, em, %) and flexible grid systems. It recommends concrete techniques—media queries, srcset/picture for images, Tailwind breakpoint modifiers, and adaptive navigation patterns—plus testing approaches to validate layouts on multiple viewports.

When to use it

• Implementing responsive layouts or grid systems for new pages
• Converting desktop-first designs into mobile-first implementations
• Working with CSS breakpoints, media queries, or Tailwind modifiers
• Implementing fluid containers, flexible grids, or responsive images
• Optimizing touch targets and performance for mobile networks
• Testing UI across multiple device sizes and form factors

Best practices

• Adopt mobile-first breakpoints: write base styles for small screens and layer up with min-width queries
• Prefer relative units (rem, em, %) for spacing, typography, and container sizing
• Use fluid containers and CSS Grid/Flexbox; avoid hard-coded pixel widths where possible
• Serve responsive images with srcset or picture and use modern formats (WebP/AVIF) when appropriate
• Ensure tap targets are >=44px, prioritize content, and hide nonessential elements on narrow viewports
• Test across devices and network conditions; emulate touch, pointer, and varying DPR

Example use cases

• Create a landing page with a single-column mobile layout that expands into a multi-column grid on tablet and desktop
• Implement a responsive navigation that becomes a hamburger menu on small screens and a horizontal menu on wide screens
• Build a product card component with fluid image sizes and responsive typography using rem units
• Optimize hero images using picture/srcset and lazy loading for mobile networks
• Apply Tailwind breakpoint modifiers (sm:, md:, lg:) to progressively enhance layout at larger viewports