---

name: responsive-layouts description: Create fully responsive page layouts for all pages and components using Tailwind CSS and Next.js App Router.

Responsive Layout Design

Instructions

1. Page layouts

   • Implement mobile-first design
   • Use grid and flexbox for structure
   • Ensure adaptive spacing and padding

2. Navigation

   • Responsive navbar (desktop → mobile hamburger)
   • Collapsible sidebars for tablet view

3. Component resizing

   • Ensure cards, buttons, forms scale properly
   • Test on mobile, tablet, and desktop breakpoints

Best Practices

• Keep breakpoints consistent
• Avoid horizontal scrolling
• Modular, reusable layouts