responsive-layout-reviewer

# 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. ### Cursor Add the instructions below to your `.cursorrules` or paste them into the Cursor AI pane before sharing the code to review. ### Codex Paste the HTML/CSS or component code and ask Codex to follow the instructions below. ## The Prompt / Instructions for the Agent When asked to review for responsive design issues, check every item in this checklist: ### Breakpoints to evaluate Unless the project uses a custom breakpoint system, evaluate at: - **Mobile**: 320px (small phone), 375px (iPhone stan...