responsive-layout-master

name	responsive-layout-master
description	Create layouts that look perfect on every device and screen size.

Responsive Layout Master

This skill ensuring that a website's layout fluidly adapts to mobile, tablet, and desktop screens using modern CSS techniques.

Instructions

1. Use a mobile-first design approach.
2. Define standard breakpoints (e.g., 640px, 768px, 1024px).
3. Implement flexible units (rem, em, %, vh/vw) over fixed pixels.
4. Use CSS Grid and Flexbox for complex alignment.
5. Ensure images and typography scale correctly without breaking the layout.

Examples

• "Make this 3-column desktop layout stack into a single column for mobile."
• "Debug a responsive issue where the sidebar overlaps the content on tablets."