responsive-layouts
Create fully responsive page layouts for all pages and components using Tailwind CSS and Next.js App Router.
SKILL.md.claude/skills/responsive-layouts
GitHubResponsive Layout Design
Instructions
Page layouts
- Implement mobile-first design
- Use grid and flexbox for structure
- Ensure adaptive spacing and padding
Navigation
- Responsive navbar (desktop → mobile hamburger)
- Collapsible sidebars for tablet view
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