commands/development/web-development/responsive-audit.md

Evaluate mobile-friendliness and propose responsive design improvements.

Your task:

1. Audit current responsive design:

   • Test at common breakpoints (mobile, tablet, desktop)
   • Check viewport meta tag
   • Evaluate touch targets (minimum 44x44px)
   • Test horizontal scrolling issues
   • Check font sizes on mobile

2. Identify issues:

   • Text too small to read
   • Content wider than screen
   • Links/buttons too close together
   • Images not responsive
   • Poor mobile navigation
   • Viewport not configured

3. Propose improvements:

   • Add/fix viewport meta tag:

     <meta name="viewport" content="width=device-width, initial-scale=1">
     

   • Implement responsive images:

     <img src="/spaces/danielrosehill/Claude-Code-Slash-Commands/resolve/main/commands/development/web-development/image.jpg" srcset="..." sizes="..." alt="">
     

   • Fix CSS for responsive layout:

     @media (max-width: 768px) {
       /* Mobile styles */
     }
     

4. Mobile-specific enhancements:

   • Touch-friendly navigation
   • Hamburger menu if needed
   • Appropriate spacing
   • Readable font sizes (minimum 16px base)
   • Optimized images for mobile

5. Testing recommendations:

   • Chrome DevTools device mode
   • Real device testing
   • Mobile-Friendly Test (Google)
   • Lighthouse mobile audit

Deliver a comprehensive mobile optimization plan with actionable improvements.