Frontend Responsive

Implement responsive design using mobile-first development approach with standard Tailwind breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px), fluid layouts, and proper testing across device sizes. Use this skill when creating layouts, implementing responsive navigation, sizing images and media, defining typography that scales across devices, working with CSS breakpoints, or testing UI components on different screen sizes. Apply when working on any component that renders visual UI (*.tsx, *.jsx), layout components, grid systems, or responsive styling code. This skill ensures mobile-first CSS development (default styles for mobile, then sm:, md:, lg:, xl: for larger screens), consistent breakpoint usage across the application, fluid layouts with percentage-based widths and flexible containers, relative units (rem/em) over fixed pixels for better scalability, touch-friendly tap targets (minimum 44x44px), optimized images and assets for mobile networks, readable typography across all breakpoints without requiring zoom, content prioritization showing most important content first on smaller screens, and responsive grid patterns (grid-cols-1 md:grid-cols-2 lg:grid-cols-3).