{"id":"2832e7f7-7093-4f54-b986-c8376f816ee1","shortId":"uCCqUF","kind":"skill","title":"Responsive Layout Reviewer","tagline":"Reviews HTML/CSS or component code for responsive design issues across mobile, tablet, and desktop breakpoints.","description":"# Responsive Layout Reviewer\n\n## What this skill does\n\nThis 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.\n\nUse 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.\n\n## How to use\n\n### Claude Code / Cline\n\nCopy this file to `.agents/skills/responsive-layout-reviewer/SKILL.md` in your project root.\n\nThen ask:\n- *\"Use the Responsive Layout Reviewer skill on `src/components/ProductCard.tsx`.\"*\n- *\"Review this CSS for responsive issues using the Responsive Layout Reviewer skill.\"*\n\nProvide the component file or the HTML/CSS to review.\n\n### Cursor\n\nAdd the instructions below to your `.cursorrules` or paste them into the Cursor AI pane before sharing the code to review.\n\n### Codex\n\nPaste the HTML/CSS or component code and ask Codex to follow the instructions below.\n\n## The Prompt / Instructions for the Agent\n\nWhen asked to review for responsive design issues, check every item in this checklist:\n\n### Breakpoints to evaluate\n\nUnless the project uses a custom breakpoint system, evaluate at:\n- **Mobile**: 320px (small phone), 375px (iPhone standard)\n- **Mobile landscape**: 667px\n- **Tablet**: 768px, 1024px\n- **Desktop**: 1280px, 1440px\n- **Wide**: 1920px\n\nNote the breakpoint system used by the project (Tailwind defaults, Bootstrap, custom media queries) and use those values.\n\n### Checklist\n\n**Fixed widths**\n- Any element with a hardcoded pixel width that could overflow on smaller screens (e.g., `width: 600px` without `max-width: 100%`)\n- Flex or grid children with `flex: 0 0 [fixed]` that could overflow\n- Tables without `overflow-x: auto` on a wrapper\n\n**Overflow and clipping**\n- Long text strings (URLs, email addresses, names) that don't have `overflow-wrap: break-word` or `text-overflow: ellipsis`\n- Images without `max-width: 100%` or `width: 100%`\n- Horizontal scroll introduced by an element wider than the viewport\n- `overflow: hidden` on a parent that clips important content on small screens\n\n**Typography**\n- Font sizes below 16px on mobile (causes iOS to auto-zoom on input focus)\n- `line-height` too tight for small screens\n- Heading sizes that remain large on mobile without downscaling\n\n**Touch targets**\n- Clickable elements smaller than 44×44px (Apple HIG) or 48×48dp (Material Design) on mobile\n- Links or buttons too close together without sufficient spacing (< 8px gap)\n- Hover-only interactions with no touch equivalent\n\n**Navigation**\n- Desktop navigation that doesn't adapt (no mobile menu, items overflow, hamburger missing)\n- Dropdown menus that don't work on touch devices\n\n**Spacing and padding**\n- Elements with no padding on small screens, causing content to touch the screen edge\n- Fixed margins that eat into usable space on narrow screens\n\n**Images and media**\n- `` without `width` and `height` attributes (causes layout shift)\n- Background images without `background-size: cover` or equivalent\n- Video embeds with no responsive wrapper (`padding-top: 56.25%; position: relative`)\n\n**Flexbox and grid**\n- `flex-wrap: nowrap` on a row that can't fit all items at small sizes\n- Grid with fixed column counts that should switch to fewer columns on mobile\n- `gap` values that are too large on mobile\n\n**Input fields and forms**\n- Inputs without `width: 100%` or equivalent on mobile\n- `font-size` below 16px on inputs (triggers iOS zoom)\n- Select dropdowns with fixed widths that overflow\n\n### Output format\n\n```markdown\n## Responsive Layout Review — [Component/File]\n\n### Critical Issues (will break layout or block usage on mobile)\n\n#### 1. [Issue title]\n- **Breakpoint affected**: [e.g., 320px–768px]\n- **Location**: [CSS class, line number, or component prop]\n- **Problem**: [What breaks and why]\n- **Fix**: [Exact CSS/Tailwind/code change]\n\n### High-Priority Issues (visible problems, degrades UX significantly)\n\n[Same format]\n\n### Warnings (minor issues or edge cases)\n\n[Same format]\n\n### What's Working Well\n[Brief note on responsive patterns already done correctly]\n```\n\n## Example\n\n**Input to Agent:**\n> \"Use the Responsive Layout Reviewer skill on this component:\n>\n> ```tsx\n>
\n> \n>
\n>
{product.name}
\n>
{product.description}
\n> \n>
\n>
\n> ```\"\n\n**Output from Agent:**\n\n> ## Responsive Layout Review — ProductCard\n>\n> ### Critical Issues\n>\n> #### 1. Fixed widths cause overflow on mobile\n> - **Breakpoint affected**: All screens below 724px (300 + 400 + 24 gap = 724px minimum width)\n> - **Location**: `img` width 300px, inner `div` width 400px\n> - **Problem**: The total minimum width (724px) exceeds most phone screens, causing horizontal scroll\n> - **Fix**: Remove fixed widths; use `flex: 1` on the text div and `flex-shrink: 0` on the image, or switch to a column layout below 640px:\n> ```css\n> @media (max-width: 640px) {\n> .card { flex-direction: column; }\n> .card img { width: 100%; height: auto; }\n> }\n> ```\n>\n> ### High-Priority Issues\n>\n> #### 2. Touch target too small\n> - **Breakpoint affected**: Mobile\n> - **Location**: `button` with `padding: 4px 8px`\n> - **Problem**: The button is approximately 30px tall — well below the 44px minimum for comfortable touch interaction\n> - **Fix**: `padding: '12px 20px'` — this produces a taller target and also improves visual balance\n>\n> #### 3. Font size below 16px on mobile\n> - **Location**: `