Responsive Layout Reviewer

What this skill does

This skill reviews HTML/CSS, Tailwind, or React component code for responsive design issues. It checks for layout problems at mobile (320–480px), tablet (768–1024px), and desktop (1280px+) breakpoints, identifies common mistakes like fixed widths, missing overflow handling, inaccessible touch targets, and viewport-breaking elements, and produces a specific list of issues with exact fixes for each.

Use this during code review, before shipping a new component or page, or when a layout is broken on certain screen sizes and you need a systematic diagnosis.

How to use

Claude Code / Cline

Copy this file to .agents/skills/responsive-layout-reviewer/SKILL.md in your project root.

Then ask:

• "Use the Responsive Layout Reviewer skill on src/components/ProductCard.tsx."
• "Review this CSS for responsive issues using the Responsive Layout Reviewer skill."

Provide the component file or the HTML/CSS to review.