Skip to content
/responsiveStable

Audits and fixes responsive design issues across breakpoints. Catches layout breaks, overflow, and touch-target problems.

FrontendDesign· 2 min read

Quick import: Download the .md file and save it to .claude/commands/ (Claude Code), .cursorrules (Cursor), or paste as a system prompt in ChatGPT, Gemini, or any LLM API.

#What it does

The /responsive skill scans your components and pages for responsive design issues. It checks every breakpoint (mobile, tablet, desktop, ultrawide) and flags layout breaks, text overflow, undersized touch targets, and missing media queries. Instead of manually resizing your browser window and squinting at edge cases, this skill catches the problems programmatically.

#How to use

bash
/responsive src/components/PricingTable.tsx

You can target a single component, a directory, or run it across the entire project without arguments.

#What it checks

  • Layout overflow -- Elements that break their container or cause horizontal scroll on narrow viewports
  • Touch targets -- Buttons and links smaller than 44x44px on mobile, violating accessibility guidelines
  • Hidden content -- Text or interactive elements accidentally hidden by overflow: hidden or display: none without a mobile alternative
  • Font scaling -- Text that becomes unreadable below 14px on small screens or uses fixed px units instead of relative units
  • Image responsiveness -- Missing srcset, hardcoded width/height, or images that stretch beyond their container
  • Breakpoint gaps -- Ranges between your defined breakpoints where no styles apply, creating a broken "no-man's land" layout
  • Flex/Grid issues -- Flex items that don't wrap properly or grid layouts that collapse into single columns too aggressively

#Workflow

  1. Scan -- Parses component styles and Tailwind classes for responsive patterns
  2. Simulate -- Evaluates layout behavior at standard breakpoints (320px, 768px, 1024px, 1440px, 1920px)
  3. Report -- Lists issues grouped by severity with specific fix suggestions
  4. Fix -- Optionally applies the suggested fixes with your approval

#Example

bash
> /responsive src/app/pricing/page.tsx
 
## Responsive Audit: pricing/page.tsx
 
### Issues Found: 4
 
- [HIGH] Line 28: Pricing grid uses `grid-cols-3` without responsive variant
  Fix: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
 
- [MEDIUM] Line 45: CTA button is 32x28px on mobile (below 44x44px touch target)
  Fix: Add `min-h-[44px] min-w-[44px]` for mobile
 
- [MEDIUM] Line 63: Hero text uses `text-5xl` without mobile size
  Fix: `text-2xl md:text-4xl lg:text-5xl`
 
- [LOW] Line 91: Image missing responsive width
  Fix: Add `w-full max-w-md mx-auto`
Orel Ohayon·
View all skills