Responsive Design & Verification Skill

Browser tooling — works for both toolsets. Use whichever is configured: Playwright MCP (mcp_playwright_browser_*) for Claude, or the Copilot browser tools (open_browser_page, screenshot_page, read_page) for VS Code Copilot. Where this skill says "Playwright", use the equivalent tool from whichever set is available.

Purpose

Ensure all UI features are fully responsive and work correctly across all device sizes, from mobile to desktop.

Standard Breakpoints

Breakpoint	Min Width	Device Type
default	0px	Mobile
sm:	640px	Large mobile
md:	768px	Tablet
lg:	1024px	Laptop
xl:	1280px	Desktop
2xl:	1536px	Large Desktop

Testing Sizes

const testSizes = [
  { width: 375, height: 667, name: 'Mobile (iPhone SE)' },
  { width: 768, height: 1024, name: 'Tablet (iPad)' },
  { width: 1280, height: 720, name: 'Desktop (HD)' },
  { width: 1920, height: 1080, name: 'Desktop (Full HD)' },
];

Responsive Design Patterns

Navigation

• Mobile (< 768px): Hamburger menu, collapsed drawer
• Desktop (≥ 768px): Full horizontal navigation bar

Data Tables

• Mobile: Stack rows as cards or use horizontal scroll
• Desktop: Traditional table layout with all columns

Forms

• Mobile: Single column, full-width inputs, large touch targets (≥ 44x44px)
• Desktop: Grid layouts, inline labels

Layout

• Use container mx-auto px-4 sm:px-6 lg:px-8
• Responsive grids: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3

Typography

• Scale font sizes: text-2xl md:text-3xl lg:text-4xl

Scrollbar & Overflow Testing

• Lists/Tables: Minimum 15-20 items to trigger vertical scroll
• Horizontal: Test with wide tables (8+ columns)
• Always check for unintentional horizontal page scroll

Playwright Verification Workflow

1. Navigate to Feature

mcp_playwright_navigate → { url: 'http://localhost:5173/feature' }

2. Test Each Breakpoint

const breakpoints = [
  { width: 375, height: 667, name: 'Mobile' },
  { width: 768, height: 1024, name: 'Tablet' },
  { width: 1280, height: 720, name: 'Desktop' },
];

for (const bp of breakpoints) {
  // Resize, screenshot, verify elements
  mcp_playwright_resize → { width: bp.width, height: bp.height }
  mcp_playwright_screenshot → { name: `feature-${bp.name}` }
}

3. Check for Overflow

() => {
  const bodyWidth = document.body.scrollWidth;
  const windowWidth = window.innerWidth;
  return {
    hasOverflow: bodyWidth > windowWidth,
    overflowElements: Array.from(document.querySelectorAll('*'))
      .filter(el => el.scrollWidth > windowWidth)
      .map(el => ({ tag: el.tagName, class: el.className }))
  };
}

Responsive Design Checklist

Layout

• Content stacks on mobile (single column)
• Multi-column layouts work on tablet/desktop
• No horizontal overflow on any breakpoint
• Container max-widths prevent over-stretching

Navigation

• Mobile: Hamburger menu or collapsed nav
• Desktop: Full navigation visible
• Touch targets ≥ 44x44px on mobile

Tables/Lists

• Mobile: Card view or horizontal scroll
• Desktop: Full table with all columns
• Vertical scroll with 15-20+ items
• Sticky headers work when scrolling

Typography

• Font sizes scale with breakpoints
• Line length appropriate (45-75 characters)
• Text remains readable on small screens

Common Mistakes

1. Desktop-first thinking — start mobile-first
2. Fixed widths — use w-full, max-w-*
3. Insufficient test data — always provide 15-20+ items
4. Tiny touch targets — 44x44px minimum on mobile