Responsive Layout Debugger

What it does

Responsive Layout Debugger takes your CSS and HTML and systematically checks for the most common responsive issues: elements overflowing the viewport, images without max-width: 100%, flex children that don't wrap at small sizes, grid columns that collapse incorrectly, and text that doesn't reflow. It explains each issue in terms of the CSS box model so you understand the root cause, not just the symptom.

You can also describe a layout problem in plain English ("my nav items stack vertically on iPad but disappear on mobile") and the skill forms a hypothesis, identifies likely culprits, then writes the fix validated against mobile (375px), tablet (768px), and desktop (1280px) breakpoints.

How to install

npx skills add user/responsive-debugger

How to use

Debug this layout issue: nav items stack on mobile but disappear on iPad. [paste CSS]

/* Issue: flex items not wrapping — min-width preventing collapse */
.nav-links {
  display: flex;
  flex-wrap: wrap;  /* was: nowrap */
  gap: 8px;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;  /* hidden on mobile, shown by burger menu */
  }
}

Configuration

# Target a specific breakpoint
Check this layout for iPad landscape (1024px) only

# Fix touch target sizes
Ensure all interactive elements meet WCAG 44px minimum touch target

# Explain the root cause
Explain why my CSS Grid breaks at 768px in detail

Related skills

Use CSS Wizard to write the fixed CSS from scratch, or Accessibility Checker to ensure the corrected layout also meets WCAG touch-target and colour-contrast requirements.